A straight meter for one value, horizontal or vertical, with optional colored bands.
Why it helps
- Straight meter
- Colored bands
- Compact
Where it fits
- Progress
- Levels
- Quotas
Example
<Stack Wrap="true" Align="end" Spacing="6">
<div style="width:22rem">
<LinearGauge Label="Storage used" Value="72" Unit="%" Bands="_bands" />
<LinearGauge Label="Battery" Value="35" Unit="%" />
</div>
<div style="width:6rem">
<LinearGauge Label="Temperature" Vertical="true" Min="-20" Max="60" Value="24" Unit=" °C" />
</div>
</Stack>
@code {
private readonly GaugeBand[] _bands =
[
new(0, 60, Severity.Success),
new(60, 85, Severity.Warning),
new(85, 100, Severity.Error)
];
}A short fragment. Add @using RayCraft.Blazor.Components to your page and use an interactive render mode.
Part of RayCraft Complete.