タイムライン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 | - | 各項目の補足説明です。 |
使い方
import {
Timeline,
TimelineDescription,
TimelineItem,
TimelineTime,
TimelineTitle,
Tag,
} from "@gunjo/ui";
export function Example() {
return (
<Timeline>
<TimelineItem variant="muted">
<TimelineTime dateTime="2026-05-18">5月18日</TimelineTime>
<TimelineTitle>キックオフ</TimelineTitle>
<TimelineDescription>目的と担当範囲を確認しました。</TimelineDescription>
</TimelineItem>
<TimelineItem variant="default">
<TimelineTime dateTime="2026-05-20">5月20日</TimelineTime>
<TimelineTitle>仕様を確定</TimelineTitle>
<TimelineDescription>公開前の確認項目を整理しました。</TimelineDescription>
</TimelineItem>
<TimelineItem variant="muted">
<TimelineTime dateTime="2026-05-24">5月24日</TimelineTime>
<TimelineTitle>素材を準備</TimelineTitle>
<TimelineDescription>画像、コピー、参照リンクを揃えました。</TimelineDescription>
</TimelineItem>
<TimelineItem variant="active">
<TimelineTime dateTime="2026-05-26">5月26日</TimelineTime>
<TimelineTitle className="flex items-center gap-2">
実装中
<Tag size="sm" variant="outline">現在地</Tag>
</TimelineTitle>
<TimelineDescription>UI とドキュメントの差分を確認しています。</TimelineDescription>
</TimelineItem>
<TimelineItem variant="outline" connector={false}>
<TimelineTime dateTime="2026-05-30">5月30日</TimelineTime>
<TimelineTitle>公開予定</TimelineTitle>
</TimelineItem>
</Timeline>
);
}