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	Defines the upper boundary of the high 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	Defines the lower boundary of the low range.	number | undefined	undefined
_max (required)	_max	Defines the maximum value of the element.	number	undefined
_min	_min	Defines the minimum value of the element.	number | undefined	undefined
_optimum	_optimum	Defines the optimal value of the element.	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 step values (not shown).	string	'%'
_value (required)	_value	Defines the value of the element.	number	undefined

---