Meter
既知の範囲内で測定値を示すメーター。 処理の進行には Progress を使用し、MeterLabel と数値を併記します。
@neumorphism-ui/meterプレビュー
ストレージ使用量
64 GB / 100 GB
インストール
インストール: meter
npx shadcn@latest add @neumorphism-ui/meterCLI が 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 リファレンス
| コンポーネント | プロパティ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
Meter | value | number | — | 範囲内の現在の測定値です。 |
Meter | min / max | number | — | 最小値と最大値を指定します。 |
Meter | format | Intl.NumberFormatOptions | — | 地域に応じた数値の書式を設定します。 |
アクセシビリティ
- 01
処理の進行には Progress を使用し、MeterLabel と数値を併記します。
- 02
render や className を変更する際もラベルと可視フォーカスを保ちます。