Timeline タイムライン

縦型のイベントフローです。セマンティックな <ol> リストで、時系列順がドキュメント順となります。

基本的な使い方

2026-09-01
立案審査
2026-09-15
第一期納品
2026-09-25
検収進行中

vue

<script setup lang="ts">
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">立案審査</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">第一期納品</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">検収進行中</LhTimelineItem>
  </LhTimeline>
</template>

vue

<script>
export default {}
</script>

<template>
  <LhTimeline>
    <LhTimelineItem timestamp="2026-09-01">立案審査</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-15" type="success">第一期納品</LhTimelineItem>
    <LhTimelineItem timestamp="2026-09-25" type="warning">検収進行中</LhTimelineItem>
  </LhTimeline>
</template>

左右交互

Q1
計画
Q2
開発
Q3
負荷試験

hollow を指定するとノードが中抜きのドットで表示され、未完了の状態によく使われます。

Q1
未開始
Q2
進行中
Q3
完了

vue

<script setup lang="ts">
</script>

<template>
  <!-- 左右交互 -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">計画</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">開発</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">負荷試験</LhTimelineItem>
  </LhTimeline>
  <!-- 中抜きノード -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>未開始</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">進行中</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">完了</LhTimelineItem>
  </LhTimeline>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 左右交互 -->
  <LhTimeline mode="alternate">
    <LhTimelineItem timestamp="Q1">計画</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">開発</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="danger">負荷試験</LhTimelineItem>
  </LhTimeline>
  <!-- 中抜きノード -->
  <LhTimeline>
    <LhTimelineItem timestamp="Q1" hollow>未開始</LhTimelineItem>
    <LhTimelineItem timestamp="Q2">進行中</LhTimelineItem>
    <LhTimelineItem timestamp="Q3" type="success">完了</LhTimelineItem>
  </LhTimeline>
</template>

API

LhTimeline Props

プロパティ	説明	型	デフォルト値
mode	レイアウトモード	`"left" \| "alternate"`	`'left'`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

LhTimelineItem Props

プロパティ	説明	型	デフォルト値
timestamp	タイムスタンプ	`string`	—
type	ノードのセマンティックタイプ	`'primary' \| 'success' \| 'warning' \| 'danger'`	—
hollow	中抜きノード	`boolean`	`false`
sx	sx クイックレイアウトプロパティ	`LhSxProps`	—

スロット：default は内容、timestamp はタイムスタンプ、dot はカスタムドットです。

アクセシビリティ

セマンティックな <ol> リストで、時系列順がドキュメント順と同じため、スクリーンリーダーが順に読み上げます
ノードのドットは純粋な装飾です（aria-hidden="true"）。カスタムドットスロットも同様にアクセシビリティツリーには含まれません

型定義

本コンポーネントが外部にエクスポートする TypeScript の型構造は以下の通りです（packages/components/timeline/src/types.ts と @lh-ui/share/core/* のソースから自動抽出。各エントリーをクリックすると完全な定義を表示します。プロパティの説明は上記の Props 表を参照してください）：

LhTimelineItemProps

/** Item コンポーネントの props */
export interface LhTimelineItemProps {
  timestamp?: string
  type?: 'primary' | 'success' | 'warning' | 'danger'
  hollow?: boolean
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhTimelineProps

/** タイムラインの props */
export interface LhTimelineProps {
  /** レイアウトモード（alternate は左右交互） */
  mode?: LhTimelineMode
  /** sx クイックレイアウトプロパティ */
  sx?: LhSxProps
}

LhTimelineMode _{（@lh-ui/share/core/timeline より）}

/** タイムラインのレイアウトモード */
export type LhTimelineMode = 'left' | 'alternate'

Timeline タイムライン ​

基本的な使い方 ​

左右交互 ​

API ​

LhTimeline Props ​

LhTimelineItem Props ​

アクセシビリティ ​

型定義 ​