Een rechte meter voor één waarde, horizontaal of verticaal, met optionele gekleurde banden.
Waarom het helpt
- Rechte meter
- Gekleurde banden
- Compact
Waar het past
- Voortgang
- Niveaus
- Quota
Voorbeeld
<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)
];
}Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Onderdeel van RayCraft Complete.