Neumorphism UI
数据与反馈@neumorphism-ui/meter

Meter

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

@neumorphism-ui/meter
Registry JSON

预览

存储用量

64 GB / 100 GB

x

安装

安装: meternpx shadcn@latest add @neumorphism-ui/meter

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Meter import 代码
"use client";

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

Example

Meter 用法代码
export default function Example() {

  return (<Meter value={64} className="w-full max-w-sm"><div className="flex justify-between gap-4"><MeterLabel>{"存储用量"}</MeterLabel><MeterValue /></div><MeterTrack><MeterIndicator /></MeterTrack><p className="text-xs text-[var(--muted-foreground)]">64 GB / 100 GB</p></Meter>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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