Meter 计量条

用法

import { Meter, Label } from '@heroui/react';

组件结构

import { Meter, Label } from '@heroui/react';

export default () => (
  <Meter value={60}>
    <Label>Storage</Label>
    <Meter.Output />
    <Meter.Track>
      <Meter.Fill />
    </Meter.Track>
  </Meter>
);

示例

尺寸

颜色

无可见标签

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

自定义取值范围与格式

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

自定义样式

Tailwind CSS

全局 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 类（查看源码样式）：

基础与元素类

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

尺寸类

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

颜色类

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

API 参考

Meter

继承自 React Aria Meter。

MeterRenderProps

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

相关组件