Divider

The Divider 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.

Default Divider

A basic divider shown in solid, dashed, and dotted styles

Source

<RzDivider/>

<RzDivider Style="@DividerStyle.Dashed"/>

<RzDivider Style="@DividerStyle.Dotted"/>

Divider with Label

A divider with text label shown in solid, dashed, and dotted styles

Source

<RzDivider Style=@DividerStyle.Solid>Solid</RzDivider>

<RzDivider Style=@DividerStyle.Dashed>Dashed</RzDivider>

<RzDivider Style=@DividerStyle.Dotted>Dotted</RzDivider>

Divider with Aligned Label

A divider with text label aligned to start, center, and end

Source

<RzDivider LabelAlignment="Align.Start" class="text-onSurface dark:text-onSurfaceDark">Start</RzDivider>

<RzDivider LabelAlignment="Align.Center" class="text-onSurface dark:text-onSurfaceDark">Center</RzDivider>

<RzDivider LabelAlignment="Align.End" class="text-onSurface dark:text-onSurfaceDark">Middle</RzDivider>

Divider with Icon

A divider with icon label styled by Tailwind classes

Source

<RzDivider Style=@DividerStyle.Solid class="text-lg text-onSurface dark:text-onSurfaceDark"><Blazicon Svg="MdiIcon.PlusCircle"/></RzDivider>