Horizontal Scroll

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

fluent-horizontal-scroll

Setup

import {
    provideFluentDesignSystem,
    fluentHorizontalScroll,
    fluentFlipper
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentHorizontalScroll(),
        fluentFlipper()
    );

Customizing flippers

import { html } from "@microsoft/fast-element";
import {
    provideFluentDesignSystem,
    fluentHorizontalScroll
} from "@fluentui/web-components";

provideFluentDesignSystem()
    .register(
        fluentHorizontalScroll({
            nextFlipper: html<HorizontalScroll>`
                <fluent-flipper
                    @click="${x => x.scrollToNext()}"
                    aria-hidden="${x => x.flippersHiddenFromAT}"
                ></fluent-flipper>
            `,
            previousFlipper: html<HorizontalScroll>`
                <fluent-flipper
                    @click="${x => x.scrollToPrevious()}"
                    direction="previous"
                    aria-hidden="${x => x.flippersHiddenFromAT}"
                ></fluent-flipper>
            `
        })
    );

Example

Please see the Blazor documentation and demo site for more information.