Progress
サイズと意味のあるステータス軸を持つ確定・不確定のタスク進行状況です。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
variant | neutral, info, success, warning, danger | neutral |
uiSize | md, lg | md |
| parts | Root, Label, Track, Indicator, Value | compound API |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/progress.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRProgress } from '@tinyrack/ui/components/progress';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
サイズ パーマリンク
周囲のレイアウトに合うトラックの太さを選んでください。サイズはタスクの重要度を表しません。
セマンティックバリアント パーマリンク
タスクの意味に合わせて `variant` を設定してください。Progress は数値だけから状態を推測しません。
カスタム範囲とフォーマット パーマリンク
視覚的な塗り、表示値、アクセシブルな値テキストはすべて同じ 0–64 GB の範囲を共有します。
API
Base UI が値のセマンティクスを提供します。不確定プログレスには null を渡して aria-valuenow を省略します。視差効果を減らす設定では、動くインジケーターが無効になります。
Root のプロパティ
| prop | 型 | 既定値 | 用途 |
|---|---|---|---|
value | number | null | 必須 | 現在値。null は不確定プログレス |
min | number | 0 | 範囲の最小値 |
max | number | 100 | 範囲の最大値 |
format | Intl.NumberFormatOptions | — | Value と既定のアクセシブルな値テキストを整形 |
locale | Intl.LocalesArgument | 実行時ロケール | Intl.NumberFormat のロケール |
getAriaValueText | (formattedValue, value) => string | 組み込み | aria-valuetext をカスタマイズ |
uiSize | md | lg | md | トラックの太さ |
variant | neutral | info | success | warning | danger | neutral | 意味に応じた塗りの色 |
render | Base UI render prop | <div> | 動作を維持しながらルート要素を置換 |
TRProgressStatus は 'indeterminate' | 'progressing' | 'complete' です。Root とすべての part は対応するネイティブ prop、className、style、ref も受け取ります。
パーツ
| part | 既定の要素 | 用途 |
|---|---|---|
Root | div | アクセシブルな progressbar と範囲コンテキスト |
Label | span | 表示されるアクセシブルな名前 |
Track | div | 範囲全体の面 |
Indicator | div | 確定の塗りまたは不確定のモーション |
Value | span | 整形された表示値 |
トークン
| CSS token | 既定値 | 用途 |
|---|---|---|
--tr-progress-background | --tinyrack-surface-muted | トラックの表面 |
--tr-progress-fill | 意味に応じた variant 色 | インジケーターの塗り |
--tr-progress-height | サイズレシピ | トラックの太さ |
--tr-progress-radius | --tinyrack-radius-full | トラックの角丸 |
--tr-progress-duration | --tinyrack-duration-normal | 確定した幅の遷移時間 |
--tr-progress-easing | --tinyrack-ease-out | 確定した遷移の easing |
--tr-progress-indeterminate-duration | --tinyrack-duration-loading | 不確定アニメーションの周期 |
--tr-progress-indeterminate-easing | --tinyrack-ease-linear | 不確定アニメーションの easing |
--tr-progress-indeterminate-width | 40% | 動くインジケーターの幅 |