Flipper

Flippers are styled buttons that point left and right so that users can move horizontally backwards and forwards through sequential blocks of content. They also enable users to see exactly where they are in the sequence.

Flippers are often a supplemental form of navigation, so they are hidden by default to avoid duplicate keyboard interaction. Passing an attribute of aria-hidden="false" will expose the flippers to assistive technology.

Use cases:

• creating a UI to page through collections of ui elements
• creating buttons to move through different pages

Example

Genesis

Declaration

<rapid-flipper></rapid-flipper>

Usage

@customElement({
  name: 'my-element',
  template: html<MyElement>`
    <rapid-flipper @click="${(x) => x.onPreviousClick()}" direction="previous"></rapid-flipper>
    <rapid-flipper @click="${(x) => x.onNextClick()}" direction="next"></rapid-flipper>
  `,
})
export class MyElement extends GenesisElement {
  onPreviousClick() {
    console.log('previous');
  }

  onNextClick() {
    console.log('next');
  }
}

React

Declaration

<rapid-flipper></rapid-flipper>

Usage

export function MyComponent() {
  const dialogRef = useRef(null);

  return (
    <CodeSection>
      <rapid-flipper onClick={() => console.log('previous')} direction="previous"></rapid-flipper>
      <rapid-flipper onClick={() => console.log('next')} direction="next"></rapid-flipper>
    </CodeSection >
  )
}

Angular

Declaration

<rapid-flipper></rapid-flipper>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <code-section>
      <rapid-flipper
        direction="previous"
        (click)="onPreviousClick()"
      ></rapid-flipper>
      <rapid-flipper
        direction="next"
        (click)="onNextClick()"
      ></rapid-flipper>
    </code-section>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class MyComponent {
  onPreviousClick() {
    console.log('previous');
  }

  onNextClick() {
    console.log('next');
  }
}

API

Attributes

Attribute	Type	Description	Example
disabled	boolean	Disable the flipper. When disabled, it will not respond to clicks.	<rapid-flipper disabled>
aria-hidden	boolean	Indicates the flipper should be hidden from assistive technology. Because flippers are often supplementary navigation, they are often hidden from assistive technology. Default: true	<rapid-flipper aria-hidden="false">
direction	"previous" | "next"	Sets which way the flipper points. "previous" points left and "next" points right. Default: next.	<rapid-flipper direction="previous">

Properties

The properties of this component are all controlled via attributes.

Slots

Slot	Description
next	The next flipper content.
previous	The previous flipper content.

Parts

Part	Description
next	Wraps the next flipper content.
previous	Wraps the previous flipper content.

Events fired

Event	Type	Description	Example
click	Event & KeyboardEvent	Fired when Enter or Space is invoked via keyboard and the flipper is exposed to assistive technologies.	<rapid-flipper @click="${(x,ctx) => x.onFlipperClick(ctx.event)}">

Events listened to

This component doesn't listen to any events.