Divider
The Divider component is used to visually separate content within a layout. It can be oriented horizontally or vertically.
Usage
<script>
import { Divider } from 'fluentui-svelte';
</script>
<Divider>Divider</Divider>Appearance
Controls the color of the divider. Possible values: 'standard', 'accent', 'subtle'.
Vertical
When vertical is set, the divider renders on the vertical axis instead of the horizontal one. Make sure the parent container has a defined height so the divider is visible.
Align Content
The alignContent prop controls where the label content (children) is positioned along the divider. Possible values: 'start', 'center', 'end'.
It also works combined with the vertical prop:
Inset
When inset is set, the divider gets some inline padding applied, useful when it's placed inside a container that has content touching its edges.
Custom element
The as prop lets you change the underlying HTML element rendered by the divider. Possible values: 'div', 'hr', 'span'.
Divider Props
| Name | Type | Default | Description |
|---|---|---|---|
as | 'div' | 'hr' | 'span' | 'div' | The HTML element to render the divider as. |
ref bindable | HTMLDivElement | HTMLHRElement | HTMLSpanElement | The DOM reference of the divider element. | |
vertical | boolean | Renders the divider vertically instead of horizontally. | |
alignContent | 'start' | 'center' | 'end' | 'center' | Where the content of the divider sits along the line. |
inset | boolean | Removes the padding around the divider line. | |
appearance | 'accent' | 'standard' | 'subtle' | 'default' | 'default' | The divider line can be styled for greater emphasis or to be subtle. |
| HTML Attributes |