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`	-	自定义格式化值文本（例如“750 / 1,000”），用于替代百分比显示。
label*	`string`	-	显示在仪表轨道上方的标签文本。
showValue	`boolean`	-	是否在标签旁边显示百分比值。
trackClassName	`string`	-	轨道（背景条）的额外 CSS 类。
indicatorClassName	`string`	-	指示器（填充条）的额外 CSS 类。
value	`number`	-	仪表当前的值
max	`number`	-	仪表的最大值（默认值：100）
min	`number`	-	仪表的最小值（默认值：0）