Flipper

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

Please see the Blazor documentation and demo site for more information.