Steps
記述したドキュメント向けの番号付きで意味のある手順です。
主なプロパティ
| Part | レンダリング | 用途 |
|---|---|---|
Root | セマンティックな順序付きリスト | 手順全体 |
Item | 番号 marker 付きリスト項目 | rich children を含む1つのステップ |
TRSteps は表示専用です。進捗や選択を管理せず、heading、paragraph、link、code block などの React children をそのまま保持します。
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/steps.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRSteps } from '@tinyrack/ui/components/steps';長い行はコード領域を横にスクロールして確認できます。
使用方法
インストール手順 パーマリンク
タスクごとに 1 つの `Item` を使用します。
例
完全なセットアップガイド パーマリンク
同じ番号付きリスト内に見出し、説明、コードを組み合わせられます。
TRSteps は記述された手順に使用し、interactive progress indicator には使用しません。ユーザーが状態間を移動する必要がある場合は、専用の progress または navigation component を構成してください。
状態の境界
Steps には current、completed、disabled state prop や state style はありません。すべての読者が状態を理解できるように Item content に記載してください。別の control が広い workflow を管理する場合は Item の aria-current を "step" に設定できますが、Steps item 自体は interactive にも disableable にもなりません。
狭い画面では長い 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 |
スタイルトークン
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 します。