Meter

Ein Limit oder Kontingent: Beschriftung und Wert, eine 6px-Pill-Spur, Schwellenmarken und eine Bildunterschrift. Progress ist für Arbeit.

Quelltext
Monthly budget$32.10 of $50.00
Resets in 12 days
import { Meter, Progress } from "@logicplanes/kaeso-ui";

Props

  • aria-label
    string

    Der zugängliche Name, wenn es keine sichtbare Beschriftung gibt.

  • caption
    ReactNode

    „Wird in 12 Tagen zurückgesetzt“

  • label
    ReactNode

    Die Beschriftung über dem Balken.

  • leading
    ReactNode

    Führender Inhalt in der Beschriftungszeile (ein Symbol).

  • thresholds
    number[] = []

    Warnschwellen als Anteile, als Marken gezeichnet: [0.5, 0.8].

  • tone
    "neutral" | "auto" = auto

    Färbt den Balken nach Füllstand (auto) oder hält ihn neutral.

  • trailing
    ReactNode

    Inhalt am Ende der Beschriftungszeile, etwa der Wert.

  • value
    number

    0–1 (oder mehr, wenn das Limit überschritten ist).

  • valueLabel
    ReactNode

    „32,10 $ von 50,00 $“