Meter - Kumo

Storage used

import { Meter } from "@cloudflare/kumo";

export function MeterBasicDemo() {
  return <Meter label="Storage used" value={65} />;
}

安装

桶式导出

import { Meter } from "@cloudflare/kumo";

细粒度导入

import { Meter } from "@cloudflare/kumo/components/meter";

用法

import { Meter } from "@cloudflare/kumo";

export default function Example() {
  return <Meter label="Storage used" value={65} />;
}

示例

基础仪表

默认仪表会显示标签和百分比数值。

Storage used

import { Meter } from "@cloudflare/kumo";

export function MeterBasicDemo() {
  return <Meter label="Storage used" value={65} />;
}

自定义数值显示

使用 customValue 显示自定义字符串，替代百分比。

API requests750 / 1,000

import { Meter } from "@cloudflare/kumo";

export function MeterCustomValueDemo() {
  return <Meter label="API requests" value={75} customValue="750 / 1,000" />;
}

隐藏数值

设置 showValue={false} 以隐藏数值显示。

Progress

import { Meter } from "@cloudflare/kumo";

export function MeterHiddenValueDemo() {
  return <Meter label="Progress" value={40} showValue={false} />;
}

满载仪表

容量达到 100% 的仪表。

Quota reached

import { Meter } from "@cloudflare/kumo";

export function MeterFullDemo() {
  return <Meter label="Quota reached" value={100} />;
}

低数值

数值较低的仪表。

Memory usage

import { Meter } from "@cloudflare/kumo";

export function MeterLowDemo() {
  return <Meter label="Memory usage" value={15} />;
}

API 参考

Prop	Type	Default	Description
customValue	`string`	-	Custom formatted value text (e.g. "750 / 1,000") displayed instead of percentage.
label*	`string`	-	Label text displayed above the meter track.
showValue	`boolean`	-	Whether to display the percentage value next to the label.
trackClassName	`string`	-	Additional CSS classes for the track (background bar).
indicatorClassName	`string`	-	Additional CSS classes for the indicator (filled bar).
value	`number`	-	Current value of the meter
max	`number`	-	Maximum value of the meter (default: 100)
min	`number`	-	Minimum value of the meter (default: 0)