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 を変更する際もラベルと可視フォーカスを保ちます。