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

FluentHorizontalScroll

<FluentHorizontalScroll> wraps the <fluent-horizontal-scroll> element, a web component implementation of a horizontal scroller leveraging the Fluent UI design system.

Usage

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<style>
    fluent-card {
        --card-width: 120px;
        --card-height: 200px;
        padding: 20px;
        margin: 12px;
        width: 120px;
        height: 200px
    }

    fluent-horizontal-scroll {
        max-width: 620px;
        margin: 20px
    }
</style>
<FluentHorizontalScroll Speed="600" Easing="ease-in-out" >
    <FluentCard>Card number 1</FluentCard>
    <FluentCard>Card number 2</FluentCard>
    <FluentCard>Card number 3</FluentCard>
    <FluentCard>Card number 4</FluentCard>
    <FluentCard>Card number 5</FluentCard>
    <FluentCard>Card number 6</FluentCard>
    <FluentCard>Card number 7</FluentCard>
    <FluentCard>Card number 8</FluentCard>
    <FluentCard>Card number 9</FluentCard>
    <FluentCard>Card number 10</FluentCard>
    <FluentCard>Card number 11</FluentCard>
    <FluentCard>Card number 12</FluentCard>
    <FluentCard>Card number 13</FluentCard>
    <FluentCard>Card number 14</FluentCard>
    <FluentCard>Card number 15</FluentCard>
    <FluentCard>Card number 16</FluentCard>
</FluentHorizontalScroll>

Example

See the component in action with implementation examples at the Blazor demo site.