Note
Access to this page requires authorization. You can try signing in or changing directories.
Access to this page requires authorization. You can try changing directories.
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.