Flipper

  • Article

The flipper is most often used to page through blocks of content or collections of ui elements. As flippers are often a supplemental form of navigation, they are often hidden by default to avoid duplicate keyboard interaction. Passing an attribute of aria-hidden="false" will expose the flippers to assistive technology.

fluent-flipper

Setup

import {
    provideFluentDesignSystem,
    fluentFlipper
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentFlipper()
    );

Customize the icons

import {
    provideFluentDesignSystem,
    fluentFlipper
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentFlipper({
            next: `...your next icon...`,
            previous: `...your previous icon...`,
        })
    );

Example

FluentFlipper

<FluentFlipper> wraps the <fluent-flipper> element, a web component implementation of a flipper leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Previous</h4>
<FluentFlipper Direction="Direction.Previous"></FluentFlipper>

<h4>Next</h4>
<FluentFlipper Direction="Direction.Next"></FluentFlipper>

Example

See the component in action with implementation examples at the Blazor demo site.