Meter
MokaMeter renders a gauge-style meter that visualizes a value within a defined range. It supports colored segments for threshold zones (e.g., green/yellow/red), value formatting, and optional labels.
Parameters
| Name | Type | Default | Description |
|---|---|---|---|
Value |
double |
0 |
Current value |
Min |
double |
0 |
Minimum value of the range |
Max |
double |
100 |
Maximum value of the range |
Label |
string? |
-- | Label text displayed below the meter |
ShowValue |
bool |
true |
Shows the current value as text |
Format |
string? |
-- | .NET format string for the displayed value (e.g., "P0", "N1") |
Color |
MokaColor |
Primary |
Default fill color (overridden by segments when present) |
Size |
MokaSize |
Md |
Meter size |
Segments |
IReadOnlyList<MokaMeterSegment>? |
-- | Colored zones within the meter |
Class |
string? |
-- | Additional CSS classes |
Style |
string? |
-- | Additional inline styles |
MokaMeterSegment
| Name | Type | Description |
|---|---|---|
FromPercent |
double |
Start of the zone as a percentage (0--100) |
ToPercent |
double |
End of the zone as a percentage (0--100) |
Color |
string |
CSS color for this zone (e.g., "var(--moka-color-success)") |
Basic Percentage
<MokaMeter Value="72" />With Label
<MokaMeter Value="45" Max="100" Label="CPU Usage" Format="N0" />Colored Segments
Define threshold zones with different colors for visual feedback.
<MokaMeter Value="78" Label="Disk Usage" Segments="@segments" />
@code {
IReadOnlyList<MokaMeterSegment> segments = new[]
{
new MokaMeterSegment(0, 60, "var(--moka-color-success)"),
new MokaMeterSegment(60, 85, "var(--moka-color-warning)"),
new MokaMeterSegment(85, 100, "var(--moka-color-error)")
};
}Custom Range
<MokaMeter Value="37.5" Min="0" Max="50" Label="Temperature (C)" Format="N1" Color="MokaColor.Info" />
Last updated: 2026-04-11