Meter

限额或配额:标签和数值、6px 胶囊轨道、阈值刻度和说明文字。工作进度请用 Progress。

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

属性

  • aria-label
    string

    无障碍名称,用于没有可见标签的情况。

  • caption
    ReactNode

    “12 天后重置”

  • label
    ReactNode

    进度条上方的标签。

  • leading
    ReactNode

    标签行中的前置内容(一个图标)。

  • thresholds
    number[] = []

    以比例表示的告警阈值,绘制为刻度:[0.5, 0.8]。

  • tone
    "neutral" | "auto" = auto

    按填充程度为进度条着色(auto),或保持中性。

  • trailing
    ReactNode

    标签行末尾的内容,例如数值。

  • value
    number

    0–1(超出限额时可更大)。

  • valueLabel
    ReactNode

    “$32.10 / $50.00”