Separator

The Separator component is a versatile UI element used to separate content, providing a clear visual distinction between different sections or elements within your application. It enhances readability and organizes the layout by creating logical divisions in both horizontal and vertical orientations.

Horizontal Separator

A basic horizontal separator shown in solid, dashed, and dotted styles. This is the default orientation.

Source

<RzSeparator/>
<RzSeparator Style="@SeparatorStyle.Dashed"/>
<RzSeparator Style="@SeparatorStyle.Dotted"/>

Horizontal Separator with Label

A horizontal separator with a text label, aligned to the start, center, or end.

Source

<RzSeparator LabelAlignment="Align.Start">Start</RzSeparator>
<RzSeparator LabelAlignment="Align.Center">Center</RzSeparator>
<RzSeparator LabelAlignment="Align.End">End</RzSeparator>

Vertical Separator

Set `Orientation="Orientation.Vertical"` to render a vertical line, useful for dividing columns or side-by-side content.

Source

<div class="flex flex-row items-stretch h-32">
    <RzSeparator Orientation="Orientation.Vertical" />
    <RzSeparator Orientation="Orientation.Vertical" Style="SeparatorStyle.Dashed" />
    <RzSeparator Orientation="Orientation.Vertical" Style="SeparatorStyle.Dotted" />
</div>

Vertical Separator with Aligned Label

When using a vertical orientation, `LabelAlignment` positions the content along the line at the start, center, or end.

Source

<div class="flex flex-row items-stretch h-40">
    <RzSeparator Orientation="Orientation.Vertical" LabelAlignment="Align.Start">Start</RzSeparator>
    <RzSeparator Orientation="Orientation.Vertical" LabelAlignment="Align.Center">Center</RzSeparator>
    <RzSeparator Orientation="Orientation.Vertical" LabelAlignment="Align.End">End</RzSeparator>
</div>

Separator with Icon

A separator can also contain an icon, which can be styled using standard CSS classes.

Source

<!-- Horizontal -->
<RzSeparator Style="@SeparatorStyle.Solid" class="text-lg text-foreground">
    <Blazicon Svg="MdiIcon.PlusCircle"/>
</RzSeparator>

<!-- Vertical -->
<RzSeparator Orientation="Orientation.Vertical" LabelAlignment="Align.Center" class="text-lg text-foreground">
    <Blazicon Svg="MdiIcon.PlusCircle"/>
</RzSeparator>

Separator Component Parameters

Property	Description	Type	Default
`Style`	`SeparatorStyle` – The style of the dividing line. Options are `Solid`, `Dashed`, and `Dotted`.	`SeparatorStyle`	`SeparatorStyle.Solid`
`Orientation`	`Orientation` – Determines if the separator is displayed horizontally or vertically. Options are `Orientation.Horizontal` and `Orientation.Vertical`.	`Orientation`	`Orientation.Horizontal`
`LabelAlignment`	`Align` – The alignment of the child content within the divider. Options are `Start`, `Center`, and `End`. Only used if `ChildContent` is provided.	`Align`	`Align.Center`
`ChildContent`	`RenderFragment?` – Optional content to display within the divider (e.g., text or an icon). If null, a simple divider line is rendered.	`RenderFragment?`	`null`