Flipper
The flipper component is most often used to page through blocks of content or collections of ui elements. As flippers are often a supplemental
form of navigation, the flippers are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of
aria-hidden="false" will expose the flippers to assistive technology.
<FluentFlipper> wraps the <fluent-flipper> element, a web component implementation of a flipper leveraging the Fluent UI design system.
Examples
General usage
Previous
Next
With aria-hidden
Disabled
Download:
Flipper with custom icons
Previous with slotted content
Next with slotted content
Download:
Documentation
FluentFlipper Class
Parameters
Name | Type | Default | Description |
|---|---|---|---|
AriaHidden | bool? | Gets or sets a value indicating whether the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology. | |
ChildContent | RenderFragment? | Gets or sets the content to be rendered inside the component. | |
Direction | FlipperDirection? | Gets or sets the direction. See FlipperDirection. | |
Disabled | bool? | Gets or sets a value indicating whether the element is disabled. |