Indicator: Blazor indicator component

Examples

Every combination of Vertical and Horizontal.

top start

top center

top end

middle start

middle center

middle end

bottom start

bottom center

bottom end

website/Examples/DataDisplay/IndicatorPositionsExample.razor Source

Badges on buttons and cards, a status dot on an avatar.

Overdue

Invoice #2087

website/Examples/DataDisplay/IndicatorContentExample.razor Source

DaisyBlazor

Horizontal IndicatorHorizontal
= IndicatorHorizontal.End
Horizontal position of the indicator item (Start / Center / End).
Vertical IndicatorVertical
= IndicatorVertical.Top
Vertical position of the indicator item (Top / Middle / Bottom).
Class string
= null
Extra CSS classes merged onto the root .indicator element.
Style string
= null
Inline CSS styles applied to the root element.

Name	Type	Default	Description
Horizontal	IndicatorHorizontal	IndicatorHorizontal.End	Horizontal position of the indicator item (Start / Center / End).
Vertical	IndicatorVertical	IndicatorVertical.Top	Vertical position of the indicator item (Top / Middle / Bottom).
Class	string	null	Extra CSS classes merged onto the root .indicator element.
Style	string	null	Inline CSS styles applied to the root element.

ChildContent RenderFragment
The base element over which the indicator is placed.
Item RenderFragment
The element placed as the indicator overlay (badge, dot, icon, etc.).

Name	Type	Description
ChildContent	RenderFragment	The base element over which the indicator is placed.
Item	RenderFragment	The element placed as the indicator overlay (badge, dot, icon, etc.).