Tinyrack

Meter

既知の範囲内にあるスカラー測定値を表示します。

主なプロパティ

この Tinyrack ラッパーは、Base UI の動作、React 19 の ref、ネイティブ props、イベント、render コントラクトを維持します。値は書式設定の前に min と max の範囲へ制限されるため、表示値、塗り、ARIA 値が一致します。プレイグラウンドでは、制限付きの範囲、ロケール別の数値書式、すべての明示的なセマンティックバリアントを確認でき、リセットすると文書化された初期値に戻ります。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/meter.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRMeter } from '@tinyrack/ui/components/meter';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

書式設定されたストレージ範囲 パーマリンク

例

セマンティックバリアント パーマリンク

バリアントはアプリケーション上の意味を伝え、数値からしきい値を推測しません。

カスタム範囲とフォーマット済みの値 パーマリンク

0 以外の最小値、単位書式、人が読める値の説明が同じ meter コントラクトに結び付きます。

API

  • TRMeter.Root には value が必須です。既定値は min={0}、max={100}、variant="neutral" で、ネイティブ div props、render、React 19 の ref を転送します。範囲外または NaN の値は書式設定の前に制限されます。
  • TRMeter.Label はアクセシブルな名前を提供します。表示ラベルが適切でない場合は Root に aria-label を指定してください。
  • TRMeter.Value はロケールに応じた値を表示します。レンダー関数は書式設定済みの値と数値を受け取ります。
  • TRMeter.Track は TRMeter.Indicator を内包します。Indicator の幅は min と max の間で正規化された位置を表します。
  • 表示単位には format と locale を使い、支援技術へ数値の文脈を伝える場合は getAriaValueText を使います。セマンティックバリアントは明示的で、Tinyrack は低/高しきい値を推測しません。
CSS トークン既定値用途
--tr-meter-min-width--tinyrack-measure-lgコンテナ幅を超えない meter の最小幅
--tr-meter-track-size--tinyrack-space-smTrack と Indicator の太さ
--tr-meter-track-background--tinyrack-control-trackTrack の色
--tr-meter-indicator-backgroundセマンティックバリアント色Indicator の色の上書き