タイムラインTimelineExperimental
履歴、進行状況、予定などを時系列の項目として縦方向に表示します。
プレビュー
- キックオフ
目的と担当範囲を確認しました。
- 仕様を確定
公開前の確認項目を整理しました。
- 素材を準備
画像、コピー、参照リンクを揃えました。
- 実装中現在地
UI とドキュメントの差分を確認しています。
- 公開予定
状態とバリエーション
進行状況
過去、現在、予定を marker variant で読み分けられるようにします。
- キックオフ
目的と担当範囲を確認しました。
- 仕様を確定
公開前の確認項目を整理しました。
- 素材を準備
画像、コピー、参照リンクを揃えました。
- 実装中現在地
UI とドキュメントの差分を確認しています。
- 公開予定
カスタムマーカー
状態が重要な履歴では、アイコンで完了・進行中・予定を補強できます。
- レビュー完了
- 検証中
- 公開
短いステップ
処理ステップだけを示す場合は説明文を省き、タイトル中心で密度を上げます。
- 受付
- 処理中
- 完了待ち
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| Timeline | HTMLOListElement props | - | タイムライン全体の ol 要素です。 |
| TimelineItem.connector | boolean | true | 次の項目へつながる線を表示します。最後の項目では false にします。 |
| TimelineItem.variant | "default" | "muted" | "active" | "outline" | "default" | マーカーの状態表現です。 |
| TimelineItem.marker | ReactNode | - | アイコンなどの独自マーカーです。指定すると標準の点を置き換えます。 |
| TimelineTime | time props | - | 日時や状態ラベルを表示します。 |
| TimelineTitle | div props | - | 各項目の見出しです。 |
| TimelineDescription | p props | - | 各項目の補足説明です。 |
使い方
Loading...