Skip to main content

fast-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.

Setup#

Basic Setup#

import {    provideFASTDesignSystem,    fastFlipper} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastFlipper()    );

Customizing Icons#

import {    provideFASTDesignSystem,    fastFlipper} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastFlipper({            next: `...your next icon...`,            previous: `...your previous icon...`,        })    );

Usage#

Previous#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Next#

Live Editor
Result
SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

Create your own design#

import {    Flipper,    FlipperOptions,    flipperTemplate as template,} from "@microsoft/fast-foundation";import { flipperStyles as styles } from "./my-flipper.styles";
export const myFlipper = Flipper.compose<FlipperOptions>({    baseName: "flipper",    template,    styles,    next: `...default next icon...`,    previous: `...default previous icon...`,});

Additional resources#