Horizontal scroller

Use cases:

• Presenting many sections of data to the user that they can scroll through.
• Alternative to typical dragging of a scrollbar to navigate through content. Uses buttons (fliipers) instead.

Example

Card number 1A buttonCard number 2A buttonCard number 3A buttonCard number 4A buttonCard number 5A buttonCard number 6A buttonCard number 7A buttonCard number 8A buttonCard number 9A buttonCard number 10A buttonCard number 11A buttonCard number 12A button

Genesis

Declaration

<rapid-horizontal-scroll></rapid-horizontal-scroll>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-horizontal-scroll>
      <rapid-card>
        Card number 1
        <rapid-button>A button</rapid-button>
      </rapid-card>
      <rapid-card>
        Card number 2
        <rapid-button>A button</rapid-button>
      </rapid-card>
    </rapid-horizontal-scroll>
  `,
})
export class MyElement extends GenesisElement {
}

React

Declaration

  <rapid-horizontal-scroll></rapid-horizontal-scroll>

Usage

export function MyComponent() {
  return (
    <rapid-horizontal-scroll>
      <rapid-card>
        Card number 1
        <rapid-button>A button</rapid-button>
      </rapid-card>
        <rapid-card>
        Card number 2
        <rapid-button>A button</rapid-button>
      </rapid-card>
    </rapid-horizontal-scroll>
  );
}

Angular

Declaration

  <rapid-horizontal-scroll></rapid-horizontal-scroll>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-horizontal-scroll>
      <rapid-card>
        Card number 1
        <rapid-button>A button</rapid-button>
      </rapid-card>
        <rapid-card>
        Card number 2
        <rapid-button>A button</rapid-button>
      </rapid-card>
    </rapid-horizontal-scroll>
  `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

tip

You can use any html content inside of the scroll component, you don't have to use <rapid-card>s.

API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Name	Type	Description	Example
speed	number	Speed of scroll in pixels per second. Default: 600	<rapid-horizontal-scroll speed="750">
duration	string	The CSS time value for the scroll transition duration. Overrides the speed attribute. When duration is set, the speed attribute has no effect.	<rapid-horizontal-scroll duration="300">
easing	"linear" | "ease-in" | "ease-out" | "ease-in-out" | string	The easing value of the scroll. Default "ease-out"	<rapid-horizontal-scroll easing="ease-in">
flippers-hidden-from-at	boolean	Whether the flippers are hidden from assistive technology. Default: false	<rapid-horizontal-scroll flippers-hidden-from-at>
view	"default" | "mobile"	View for this component. Default: default	<rapid-horizontal-scroll view="mobile">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Name	Description
Default	Where the content to be scrolled is placed
start	Content which can be provided before the scroll area
end	Content which can be provided after the scroll area

Parts

Name	Description
scroll-area	Wraps the entire scrollable region.
scroll-view	The visible scroll area.
content-container	The container for the content.
scroll-prev	The previous flipper container.
scroll-action-previous	The element wrapping the previous flipper.
scroll-next	The next flipper container.
scroll-action-next	The element wrapping the next flipper.

Events fired

Name	Description
scrollstart	Fires a custom 'scrollstart' event when scrolling
scrollend	Fires a custom 'scrollend' event when scrolling stops

Events listened to

This component doesn't listen to any events.