Components

Divider

A rule that separates content, with an optional label sitting in a gap in the line.

Plain

With no label it renders a real hr element, which already carries the separator role.

Above

Below

razor

<span>Above</span>
<VetoDivider />
<span>Below</span>

Labelled

A label breaks the rule to make room for itself. Useful between two alternatives, such as either side of a sign-in form.

or

razor

<VetoDivider Label="or" />

Vertical

Orientation describes the rule itself, not the content it separates - so a vertical divider draws a vertical line, and reports aria-orientation to match. It needs a parent that gives it a height.

Left

Right

razor

<VetoStack Orientation="VetoOrientation.Horizontal" Align="VetoAlign.Center">
    <span>Left</span>
    <VetoDivider Orientation="VetoOrientation.Vertical" Class="rule" />
    <span>Right</span>
</VetoStack>

<!-- .rule { height: 1.5rem } -->

Parameters

Parameter	Type	Default	Description
`Orientation`	`VetoOrientation`	`Horizontal`	Which way the rule itself runs.
`Label`	`string?`	`null`	Text to sit in a gap in the rule.
`ChildContent`	`RenderFragment?`	`null`	Content for the gap. Takes precedence over Label.