Divider

As the name implies, it divides one section of content from another with a line. A web component implementation of a horizontal rule.

fluent-divider

Setup

TypeScript

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

provideFluentDesignSystem()
    .register(
        fluentDivider()
    );

Example

Customize the design

TypeScript

import { Divider, dividerTemplate as template } from "@microsoft/fast-foundation";
import { dividerStyles as styles } from "./my-divider.styles";

export const myDivider = Divider.compose({
    baseName: "divider",
    template,
    styles,
});

FluentDivider

<FluentDivider> wraps the <fluent-divider> element, a web component implementation of a divider leveraging the Fluent UI design system.

Usage

razor

@using Microsoft.Fast.Components.FluentUI
<h4>Default</h4>
<FluentDivider></FluentDivider>

<h4>Presentation</h4>
<FluentDivider role="presentation"></FluentDivider>

Example

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