Divider
The Divider component provides visual separation between content sections.
Import
<script>
import { Divider } from 'svelte-fluentui';
</script>svelte
Basic Usage
<p>Content above</p>
<Divider />
<p>Content below</p>svelte
Vertical Divider
<div style="display: flex; align-items: center;">
<span>Left content</span>
<Divider orientation="vertical" />
<span>Right content</span>
</div>svelte
With Text
<Divider>OR</Divider>svelte
Properties
| Property | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Divider orientation |
variant | 'solid' | 'dashed' | 'dotted' | 'solid' | Line style |
Slots
| Slot | Description |
|---|---|
default | Text content to display in the divider |