Skip to content
Lenso UI

Meter 计量条

Meter 表示已知范围内的数量，或一个比例值。

用法

import { Meter, Label } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";
import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });
export function Basic() {  return (    <Meter aria-label="Storage" xstyle={styles.meter} value={60}>      <Meter.Label>Storage</Meter.Label>      <Meter.Output />      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

组件结构

import { Meter, Label } from '@lenso/ui';
export default () => (  <Meter value={60}>    <Label>Storage</Label>    <Meter.Output />    <Meter.Track>      <Meter.Fill />    </Meter.Track>  </Meter>);

示例

尺寸

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },});export function Sizes() {  return (    <div {...stylex.props(styles.column)}>      <Meter color="success" size="sm" value={40}>        <Meter.Label>Small</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>      <Meter color="accent" size="md" value={60}>        <Meter.Label>Medium</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>      <Meter color="warning" size="lg" value={80}>        <Meter.Label>Large</Meter.Label>        <Meter.Output />        <Meter.Track>          <Meter.Fill />        </Meter.Track>      </Meter>    </div>  );}export default Sizes;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

颜色

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  column: { display: "flex", width: 256, flexDirection: "column", gap: 24 },});export function Colors() {  return (    <div {...stylex.props(styles.column)}>      {(["default", "accent", "success", "warning", "danger"] as const).map((color) => (        <Meter key={color} color={color} value={50}>          <Meter.Label>            {color[0]?.toUpperCase()}            {color.slice(1)}          </Meter.Label>          <Meter.Output />          <Meter.Track>            <Meter.Fill />          </Meter.Track>        </Meter>      ))}    </div>  );}export default Colors;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

无可见标签

无需可见标签时，使用 aria-label 提供无障碍标签。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });export function WithoutLabel() {  return (    <Meter aria-label="Storage usage" xstyle={styles.meter} value={45}>      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}export default WithoutLabel;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义取值范围与格式

使用 minValue、maxValue 与 formatOptions 自定义取值范围与显示格式。

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0); native Base UI range and formatting.import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ meter: { width: 256 } });export function CustomValue() {  return (    <Meter      xstyle={styles.meter}      format={{ currency: "USD", style: "currency" }}      max={1000}      min={0}      value={750}    >      <Meter.Label>Revenue</Meter.Label>      <Meter.Output />      <Meter.Track>        <Meter.Fill />      </Meter.Track>    </Meter>  );}export default CustomValue;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

"use client";// Adapted from HeroUI v3.2.6 (Apache-2.0).import { Meter } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({  meter: { width: 256 },  label: { fontWeight: 500, color: "var(--foreground)" },  output: { color: "var(--muted)", fontVariantNumeric: "tabular-nums" },  track: { borderRadius: 9999, backgroundColor: "var(--default)" },  fill: { borderRadius: 9999, backgroundColor: "var(--warning)" },});export function CustomStyles() {  return (    <Meter aria-label="Storage used" xstyle={styles.meter} value={68}>      <Meter.Label xstyle={styles.label}>Storage used</Meter.Label>      <Meter.Output xstyle={styles.output} />      <Meter.Track xstyle={styles.track}>        <Meter.Fill xstyle={styles.fill} />      </Meter.Track>    </Meter>  );}export default CustomStyles;

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

@layer components {  .meter {    @apply w-full gap-2;  }
  .meter__track {    @apply h-3 rounded-full;  }
  .meter__fill {    @apply rounded-full;  }}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Meter 使用以下 CSS 类（查看源码样式）：

基础与元素类 [!toc]

  • .meter — 基础容器（grid 布局）
  • .meter__output — 数值文本展示
  • .meter__track — 轨道背景
  • .meter__fill — 轨道已填充部分

尺寸类 [!toc]

  • .meter--sm — 小尺寸变体（更细的轨道）
  • .meter--md — 中等尺寸变体（默认）
  • .meter--lg — 大尺寸变体（更粗的轨道）

颜色类 [!toc]

  • .meter--default — 默认颜色变体
  • .meter--accent — 强调色变体
  • .meter--success — 成功色变体
  • .meter--warning — 警告色变体
  • .meter--danger — 危险色变体

API 参考

Meter

继承自 React Aria Meter。

Prop类型默认值描述
valuenumber0当前值
minValuenumber0最小值
maxValuenumber100最大值
size"sm" | "md" | "lg""md"Meter 轨道尺寸
color"default" | "accent" | "success" | "warning" | "danger""accent"填充条颜色
formatOptionsIntl.NumberFormatOptions{style: 'percent'}数值展示的格式化选项
valueLabelReactNode-自定义数值标签内容
childrenReactNode | (values: MeterRenderProps) => ReactNode-内容或渲染 prop

MeterRenderProps

使用渲染 prop 模式时，会提供以下值：

Prop类型描述
percentagenumberMeter 百分比（0–100）
valueTextstring格式化后的数值文本

相关组件