Meter 进度指示器
@lark-ui/core

Meter 进度指示器

用于在已知范围内显示数值的进度／百分比指示器组件。

已用存储空间
x
import { Meter } from "@lark-ui/core";

export function MeterBasicDemo() {
  return <Meter label="已用存储空间" value={65} />;
}

安装

统一导出

import { Meter } from "@lark-ui/core";

按需导出

import { Meter } from "@lark-ui/core/components/meter";

用法

import { Meter } from "@lark-ui/core";

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

示例

基础进度指示器

进度指示器（Meter）默认会显示标签和百分比数值。

已用存储空间
x
import { Meter } from "@lark-ui/core";

export function MeterBasicDemo() {
  return <Meter label="已用存储空间" value={65} />;
}

自定义数值显示

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

API 请求750 / 1,000
x
import { Meter } from "@lark-ui/core";

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

隐藏数值

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

进度
x
import { Meter } from "@lark-ui/core";

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

满量程

数值达到 100% 时的进度指示器。

配额已达上限
x
import { Meter } from "@lark-ui/core";

export function MeterFullDemo() {
  return <Meter label="配额已达上限" value={100} />;
}

低数值

数值为较低值的进度指示器。

内存使用量
x
import { Meter } from "@lark-ui/core";

export function MeterLowDemo() {
  return <Meter label="内存使用量" value={15} />;
}

API 参考

属性类型默认值说明
customValuestring-自定义格式化后的数值文本（例如“750 / 1,000”），用于代替百分比显示。
label*string-显示在进度条上方的标签文字。
showValueboolean-是否在标签旁显示百分比数值。
trackClassNamestring-进度条轨道（背景条）的额外 CSS 类名。
indicatorClassNamestring-进度指示条（填充条）的额外 CSS 类名。
valuenumber-进度指示器当前的值
maxnumber-进度指示器的最大值（默认 100）
minnumber-进度指示器的最小值（默认 0）