Neumorphism UI

Meter

用于存储用量等已知范围内的测量值。进行中任务的完成程度使用 Progress。

预览

存储空间用量

用标签、数值和填充轨道展示总量 100 GB 中已使用的 64 GB。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/meter

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

设置值与范围，并组合 MeterLabel、MeterValue、MeterTrack 和 MeterIndicator。百分比含义不明确时，补充单位或上下文。

"use client";

import { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue } from "@/components/ui/meter";

export default function Example() {
  return (
    <Meter value={64} max={100}>
      <MeterLabel>Storage used</MeterLabel>
      <MeterValue />
      <MeterTrack><MeterIndicator /></MeterTrack>
    </Meter>
  );
}

API 参考

在已知范围内表示测量值的计量条。 任务完成进度请用 Progress。配合 MeterLabel 显示可见数值。

组件属性类型默认值说明
Metervaluenumber—范围内的当前测量值。
Metermin / maxnumber—设置最小值与最大值。
MeterformatIntl.NumberFormatOptions—配置本地化数字格式。

无障碍

  • 01

    任务完成进度请用 Progress。配合 MeterLabel 显示可见数值。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。