Flipper

Flippers are styled buttons which can be used to indicate moving through blocks of content.

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.

Use cases:

• Create a UI to page through collections of ui elements
• Create 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, if disabled it will not respond to click.	<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"	The direction that the flipper implies navigating. Default: next	<rapid-flipper direction="previous">

Properties

This component doesn't have any properties that are not also 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.