Skip to main content

fast-horizontal-scroll

An implementation of a content scroller as a web-component.

Setup#

Basic Setup#

import {    provideFASTDesignSystem,    fastHorizontalScroll,    fastFlipper} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastHorizontalScroll(),        fastFlipper()    );

Customizing Flippers#

import { html } from "@microsoft/fast-element";import {    provideFASTDesignSystem,    fastHorizontalScroll} from "@microsoft/fast-components";
provideFASTDesignSystem()    .register(        fastHorizontalScroll({            nextFlipper: html<HorizontalScroll>`                <fast-flipper                    @click="${x => x.scrollToNext()}"                    aria-hidden="${x => x.flippersHiddenFromAT}"                ></fast-flipper>            `,            previousFlipper: html<HorizontalScroll>`                <fast-flipper                    @click="${x => x.scrollToPrevious()}"                    direction="previous"                    aria-hidden="${x => x.flippersHiddenFromAT}"                ></fast-flipper>            `        })    );

Usage#

<fast-horizontal-scroll>    <fast-card>        Card number 1        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 2        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 3        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 4        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 5        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 6        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 7        <fast-button>A button</fast-button>    </fast-card>    <fast-card>        Card number 8        <fast-button>A button</fast-button>    </fast-card></fast-horizontal-scroll>

Create your own design#

import { html } from "@microsoft/fast-element";import {    HorizontalScroll,    HorizontalScrollOptions,    horizontalScrollTemplate as template,} from "@microsoft/fast-foundation";import { horizontalScrollStyles as styles } from "./my-horizontal-scroll.styles";
export const myHorizontalScroll = HorizontalScroll.compose<HorizontalScrollOptions>({    baseName: "horizontal-scroll",    template,    styles,    nextFlipper: html`        <fast-flipper            @click="${x => x.scrollToNext()}"            aria-hidden="${x => x.flippersHiddenFromAT}"        ></fast-flipper>    `,    previousFlipper: html`        <fast-flipper            @click="${x => x.scrollToPrevious()}"            direction="previous"            aria-hidden="${x => x.flippersHiddenFromAT}"        ></fast-flipper>    `,});