Steps
記述したドキュメント向けの番号付きで意味のある手順です。
主なプロパティ
| Part | レンダリング | 用途 |
|---|---|---|
Root | セマンティックな順序付きリスト | 手順全体 |
Item | 番号 marker 付きリスト項目 | rich children を含む1つのステップ |
Progress | アクセシブルな segmented progressbar | 手順が決まったフローの現在位置 |
Root と Item は表示専用です。Progress は 1 から始まる current と total を受け取り、範囲を安全に補正して progressbar セマンティクスで通知します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/steps.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSteps } from '@tinyrack/ui/components/steps';長い行はコード領域を横にスクロールして確認できます。
使用方法
インストール手順 パーマリンク
タスクごとに 1 つの `Item` を使用します。
例
完全なセットアップガイド パーマリンク
同じ番号付きリスト内に見出し、説明、コードを組み合わせられます。
TRSteps.Progress は、フローを操作するコントロールの横で進捗を示すために使用してください。ステップ移動や送信処理は行いません。
状態の境界
Root と Item には current、completed、disabled の状態がありません。別のコントロールがフローを管理する場合は Item の aria-current を "step" に設定してください。Progress は数値の進捗だけを扱い、フローの文脈を含むアクセシブルな label が必要です。
狭い画面では長い content が折り返されます。制御する意味のある visual scalar prop がないため、Playground は表示しません。
API
| Export | Element | Props |
|---|---|---|
TRSteps.Root, TRStepsRoot | ol | native ordered-list props と React 19 ref を含む TRStepsRootProps |
TRSteps.Item, TRStepsItem | li | native list-item props と React 19 ref を含む TRStepsItemProps |
TRSteps.Progress, TRStepsProgress | div[role="progressbar"] | current、total、アクセシブルな label、native div props、React 19 ref を含む TRStepsProgressProps |
スタイルトークン
root で --tr-steps-gap、--tr-steps-margin-block、--tr-steps-item-border、--tr-steps-item-border-width、--tr-steps-item-padding-inline-start、--tr-steps-marker-background、--tr-steps-marker-color、--tr-steps-marker-font-size、--tr-steps-marker-font-weight、--tr-steps-marker-radius、--tr-steps-marker-size を上書きできます。各 token は semantic Tinyrack token に fallback します。