Timeline

fandhe-frontend-pre-styled-ui の timeline mod が提供するスタイル済み Timeline 部品です。

時系列イベントを表示する年表部品です。item/connector/separator/indicator/content/title/description の 7 パーツで構成し、最終 item は separator を組み込まないことで非表示にする契約です。TimelineVariant（Solid/Subtle/Outline/Plain）で indicator の塗り方を切り替えます。content は縦積みで title（medium 太さ、size 連動の font-size）と description（xs・muted）の型階層を持ちます。

Demo

時系列に並ぶ出来事の一覧を connector（縦線）+ indicator（点）+ content で表示する静的部品です。variant（solid/subtle/outline/plain）で indicator の塗り方を切り替えます。呼び出し側が indicator/separator へ data-state="complete"/"current" を付与すると、完了区間・現在位置のスタイルが適用されます。

プロジェクト開始2026-01-01
開発中2026-03-01
リリース

Features

TimelineVariant（Solid/Subtle/Outline/Plain、crates/pre-styled-ui/src/timeline.rs:232-247）で indicator の塗り方を切り替える
item/connector/separator/indicator/content/title/description の 7 パーツで年表を構造化する（timeline.rs:711-756）
最終 item は separator を組み込まないことで非表示にする契約（showLastSeparator 相当は実装しない、timeline.rs:48-55）
content は縦積み flex で title（sm / medium、size 連動の font-size）・description（xs / muted）の型階層を持つ（イシュー #1576）
呼び出し側が indicator/separator へ data-state="complete"/"current" を付与すると完了区間・現在位置のスタイルが適用される（recipe 側は子孫セレクタを持たないため、値は呼び出し側の構成責務。イシュー #1575、timeline.rs:107-118）

Anatomy

root
  item
    connector
      indicator
      separator
    content
      title
      description

API Reference

Arguments

Name	Type	Default	Description
`variant`	`TimelineVariant`	`Solid`	indicator の塗り方（timeline.rs:232-247）。
`palette`	`ColorPalette`	`Accent`	colorPalette 軸（timeline.rs:659）。

Data Attributes

Part	Attribute	Observed Values
`indicator`	`data-state`	`complete`, `current`
`separator`	`data-state`	`complete`

CSS Variables

Variable	Default
`--fandhe-timeline-indicator-bg`	`var(--fandhe-palette, var(--fandhe-color-accent))`
`--fandhe-timeline-indicator-border`	`none`
`--fandhe-timeline-indicator-fg`	`var(--fandhe-palette-fg, var(--fandhe-color-accent-fg))`
`--fandhe-timeline-indicator-font-size`	`var(--fandhe-font-font-size-xs)`
`--fandhe-timeline-indicator-size`	`1.5rem`
`--fandhe-timeline-separator-width`	`2px`
`--fandhe-timeline-title-font-size`	`var(--fandhe-font-font-size-sm)`
`--fandhe-timeline-title-margin-top`	`0`

Examples

Two events

2 件のイベントを Outline variant で表示する例です（最終 item は separator を省略）。

Started2026-01-01
Now

Accessibility

WAI-ARIA

Attribute	Description
(該当なし)	ol/li のネイティブ意味論のみで固有の role/aria-* は出力しない（timeline.rs 全文で role/aria-* を grep しても 0 件）。