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

Next

Live Editor
Result
Loading...

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...`,
});

API

Variables

NameDescriptionType
FlipperDirectionThe direction options for flipper.{ next: "next", previous: "previous", }

class: Flipper

Superclass

NameModulePackage
FoundationElement/src/foundation-element/foundation-element.js

Fields

NamePrivacyTypeDefaultDescriptionInherited From
disabledpublicbooleanThe disabled state of the flipper.
hiddenFromATpublicbooleantrueIndicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
directionpublicFlipperDirectionThe direction that the flipper implies navigating.
$presentationpublicComponentPresentation or nullA property which resolves the ComponentPresentation instance for the current component.FoundationElement
templatepublicElementViewTemplate or void or nullSets the template of the element instance. When undefined, the element will attempt to resolve the template from the associated presentation or custom element definition.FoundationElement
stylespublicElementStyles or void or nullSets the default styles for the element instance. When undefined, the element will attempt to resolve default styles from the associated presentation or custom element definition.FoundationElement

Methods

NamePrivacyDescriptionParametersReturnInherited From
keyupHandlerpublicSimulate a click event when the flipper has focus and the user hits enter or space keys Blur focus if the user hits escape keye: Event & KeyboardEvent
templateChangedprotectedvoidFoundationElement
stylesChangedprotectedvoidFoundationElement

Events

NameTypeDescriptionInherited From
clickFires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.

Attributes

NameFieldInherited From
disabled
aria-hiddenhiddenFromAT
directiondirection

CSS Parts

NameDescription
nextWraps the next flipper content
previousWraps the previous flipper content

Slots

NameDescription
nextThe next flipper content
previousThe previous flipper content

Additional resources