Skip to main content
Version: Current

Web Components - 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.

Set-up​

import { provideDesignSystem, alphaFlipper } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaFlipper());

Usage​

Live Editor
<alpha-flipper direction="previous"></alpha-flipper>
Result
Loading...
Live Editor
<alpha-flipper direction="next"></alpha-flipper>
Result
Loading...

Use cases​

  • List navigation