Horizontal scroll

The horizontal scroller provides an alternative to a horizontal scroll bar. When the screen space is not wide enough to display the whole the of the content, a right arrow (a flipper) is displayed on the right side of the content. The user can click on the arrow to move to the right.

Similarly, as soon as content disappears from view on the left side, a left arrow is displayed at the left of the content so that the user can move back in that direction.

Use cases:

• where there is insufficient space for horizontal scroll bars
• where the content is broken into individual horizontal sections

Example

The example below shows the horizontal scroller in action. There are twelve individual cards displayed. If you reduce the size of your window so that they do not all fit, the flipper button appears at the right. If you click to move right, a flipper button appears at the left side to enable you to move back.

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 the scroll component. You don't have to use <rapid-card>.

API

This table shows attribute binding examples for Genesis Component syntax. The HTML closing tag is not included.

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 is only controlled via attributes.

Slots

Name	Description
Default	This is where you place the content to be scrolled.
start	You can place content before (to the left of) the Default content. This is not scrolled.
end	You can place content after (to the right of) the Default content. This is not scrolled.

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.