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

<fast-flipper direction="previous"></fast-flipper>

Result

Loading...

Next

Live Editor

<fast-flipper direction="next"></fast-flipper>

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

Name	Description	Type
FlipperDirection	The direction options for flipper.	{ next: "next", previous: "previous", }

---

class: Flipper

Superclass

Name	Module	Package
FoundationElement	/src/foundation-element/foundation-element.js

Fields

Name	Privacy	Type	Default	Description	Inherited From
disabled	public	boolean		The disabled state of the flipper.
hiddenFromAT	public	boolean	true	Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology.
direction	public	FlipperDirection		The direction that the flipper implies navigating.
$presentation	public	ComponentPresentation or null		A property which resolves the ComponentPresentation instance for the current component.	FoundationElement
template	public	ElementViewTemplate or void or null		Sets 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
styles	public	ElementStyles or void or null		Sets 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

Name	Privacy	Description	Parameters	Return	Inherited From
keyupHandler	public	Simulate a click event when the flipper has focus and the user hits enter or space keys Blur focus if the user hits escape key	e: Event & KeyboardEvent
templateChanged	protected			void	FoundationElement
stylesChanged	protected			void	FoundationElement

Events

Name	Type	Description	Inherited From
click		Fires a custom 'click' event when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.

Attributes

Name	Field	Inherited From
	disabled
aria-hidden	hiddenFromAT
direction	direction

CSS Parts

Name	Description
next	Wraps the next flipper content
previous	Wraps the previous flipper content

Slots

Name	Description
next	The next flipper content
previous	The previous flipper content

---

Additional resources

• Component explorer examples
• Component technical specification