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 の塗り方を切り替えます。

Demo

時系列に並ぶ出来事の一覧を connector（縦線）+ indicator（点）+ content で表示する静的部品です。variant（solid/subtle/outline/plain）で indicator の塗り方を切り替えます。

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

Features

TimelineVariant（Solid/Subtle/Outline/Plain、crates/pre-styled-ui/src/timeline.rs:103-427）で indicator の塗り方を切り替える
item/connector/separator/indicator/content/title/description の 7 パーツで年表を構造化する（timeline.rs:1006-1049）
最終 item は separator を組み込まないことで非表示にする契約（showLastSeparator 相当は実装しない、timeline.rs:1019-1021）

Anatomy

root
  item
    connector
      indicator
      separator
    content
      title
      description

API Reference

Arguments

Name	Type	Default	Description
variant	TimelineVariant	Solid	indicator の塗り方（timeline.rs:103-427）。
palette	ColorPalette	Accent	colorPalette 軸（timeline.rs:988-1000）。

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-size	1.5rem
--fandhe-timeline-separator-width	2px

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 件）。