Divider: Blazor divider component

Examples

Basic

A plain rule between two blocks of content.

Release notes

Version 2.4 brings faster deploys and a new billing page.

Contributors

Built by Priya Nair and Tom Becker. Reviewed by Mei Chen.

website/Examples/Layout/DividerBasicExample.razor Source

With text

Child content sits in the middle of the line; daisyUI's divider-* classes colour it.

New here?

website/Examples/Layout/DividerTextExample.razor Source

Vertical

Vertical draws the rule between siblings laid out in a row.

12 tasks

5 days

Sprint 14

website/Examples/Layout/DividerVerticalExample.razor Source

API

<Divider>

DaisyBlazor

Parameters

DividerType object
= null
Accepted for MudBlazor compatibility; visual style is fixed.
FlexItem bool
= false
Stretches the divider to fill the flex container cross axis (self-stretch), e.g. full height between flex children.
Vertical bool
= false
Renders a vertical divider (between horizontally-laid-out siblings).
Class string
= null
Extra CSS classes added to the divider.
Style string
= null
Inline CSS style applied to the divider.

Name	Type	Default	Description
DividerType	object	null	Accepted for MudBlazor compatibility; visual style is fixed.
FlexItem	bool	false	Stretches the divider to fill the flex container cross axis (self-stretch), e.g. full height between flex children.
Vertical	bool	false	Renders a vertical divider (between horizontally-laid-out siblings).
Class	string	null	Extra CSS classes added to the divider.
Style	string	null	Inline CSS style applied to the divider.

Content

ChildContent RenderFragment
Optional text or markup shown in the middle of the divider line.

Name	Type	Description
ChildContent	RenderFragment	Optional text or markup shown in the middle of the divider line.

From MudDivider

Divider keeps MudDivider's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.