Meter

Synonyme: Messwertanzeige, Gauge, Messgerät

Beschreibung: Die Meter-Komponente visualisiert einen numerischen Messwert innerhalb eines definierten Wertebereichs. Sie unterstützt die Einordnung des Werts über optionale Schwellen und einen Optimalwert.

Beispiel

Das Beispiel zeigt eine Meter-Anzeige mit definiertem Wertebereich, Schwellenwerten und Einheit.

<KolMeter _high={80} _label="Auslastung" _low={30} _max={100} _min={0} _optimum={70} _unit="%" _value={65} />

Barrierefreiheit

• Label-Pflicht: Jede Meter-Komponente benötigt _label, damit der Messwert korrekt zugeordnet werden kann.
• Semantische Ausgabe: Ein semantisches <meter>-Element stellt die Informationen auch für assistive Technologien bereit.
• Wertänderungen: Änderungen des Messwerts können von assistiven Technologien erkannt und vorgelesen werden.
• Nicht interaktiv: Die Komponente dient der Darstellung und bietet keine eigene Eingabeinteraktion.

Links und Referenzen

Verwendung

Best Practices / Empfehlungen

• Verwenden Sie ein präzises _label, das den Messkontext beschreibt (z. B. Auslastung, Füllstand, Temperatur).
• Setzen Sie _min und _max fachlich korrekt, damit die Einordnung des Werts nachvollziehbar ist.
• Nutzen Sie _low, _high und _optimum, um den Messwert in sinnvolle Bereiche einzuordnen.
• Geben Sie mit _unit eine eindeutige Einheit an, wenn der Wert ohne Einheit missverständlich wäre.
• Nutzen Sie Meter für Status- und Messanzeigen. Für editierbare Eingaben ist eine Input-Komponente geeignet.

Anwendungsfälle

• Systemauslastung (z. B. CPU, RAM, Speicher)
• Batteriestand oder Füllstände
• Messwerte mit Grenzbereichen (z. B. Temperatur, Luftfeuchte)
• Qualitäts- oder Gesundheitsindikatoren mit Optimalbereich

Konstruktion / Technik

Playground

<KolMeter _label="Auslastung" _max={100} _min={0} _value={50} />

Funktionalitäten (mit Code)

Grundlegende Meter mit Wertbereich

Einfache Meter-Anzeige mit Minimum, Maximum, aktuellem Wert und Einheit.

<KolMeter _label="Speicherauslastung" _max={1024} _min={0} _unit="MB" _value={512} />

Meter mit Zustandsbereichen

Mit _low, _high und _optimum lassen sich Messbereiche semantisch einordnen.

• _min bis _low: niedriger Bereich
• _low bis _high: mittlerer Bereich
• _high bis _max: hoher Bereich
• _optimum definiert den optimalen Zielbereich

<KolMeter _high={70} _label="CPU-Auslastung" _low={20} _max={100} _min={0} _optimum={10} _value={15} />

Vertikaler Meter

Die Ausrichtung kann über _orientation zwischen horizontal und vertikal umgeschaltet werden.

<KolMeter _label="Flüssigkeitsstand" _max={1000} _min={0} _orientation="vertical" _unit="l" _value={650} />

API

Properties

Property	Attribute	Description	Type	Default
_high	_high	From this value to the max value is the high range of the meter. Below this value is the middle range.	number | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_low	_low	From this value to the min value is the low range of the meter. Above this value is the middle range.	number | undefined	undefined
_max	_max	Defines the maximum value of the element. Default like native component.	number	1
_min	_min	Defines the minimum value of the element. Default like native component.	number	0
_optimum	_optimum	Indicates the optimal range of the element. If this lies in the high range, the high range will be optimum, the middle range will be suboptimum and the low range will be critical. If this lies in the low range, the low range will be optimum, the middle range will be suboptimum and the high range will be critical. If this lies in the middle range, both low and high range will be suboptimum and nothing will be critical.	number | undefined	undefined
_orientation	_orientation	Defines whether the meter bar is displayed horizontally or vertically.	"horizontal" | "vertical"	'horizontal'
_unit	_unit	Defines the unit of the value.	string	'%'
_value (required)	_value	Defines the value of the element. Is capped between min and max.	number	undefined

---