Timeline タイムライン

時間順に事項の遷移を表示します。alternate モードでは左右に交互に並べ、項目はタイプと中抜きノードをサポートします。

タイムライン

<template>
  <div class="demo-col">
    <p class="demo-note">mode="left"（デフォルト）</p>
    <LhTimeline>
      <LhTimelineItem timestamp="2026-09-01" type="primary">「宋画全集」のデジタル化を開始</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-10" type="success">120 点の高画質取り込みを完了</LhTimelineItem>
      <LhTimelineItem timestamp="2026-09-20" type="warning" hollow>色校正の再確認で 3 箇所の偏差を発見</LhTimelineItem>
      <LhTimelineItem timestamp="2026-10-01" type="danger">再確認が完了し、再公開</LhTimelineItem>
    </LhTimeline>
    <p class="demo-note">mode="alternate"（左右交互）</p>
    <LhTimeline mode="alternate">
      <LhTimelineItem timestamp="北宋" type="primary">範寛『溪山行旅図』</LhTimelineItem>
      <LhTimelineItem timestamp="北宋" hollow>郭熙『早春図』</LhTimelineItem>
      <LhTimelineItem timestamp="元代" type="success">黄公望『富春山居図』</LhTimelineItem>
    </LhTimeline>
  </div>
</template>

Timeline Props

プロパティ	説明	型	デフォルト値
mode	レイアウトモード（alternate は左右交互）	'left' \| 'alternate'	'left'
sx	sx によるレイアウト省略記法	—	—

TimelineItem Props

プロパティ	説明	型	デフォルト値
timestamp	タイムスタンプ	string	—
type	ノードのタイプ	'primary' \| 'success' \| 'warning' \| 'danger'	—
hollow	中抜きノード	boolean	false
sx	sx によるレイアウト省略記法	—	—

Slots

TimelineItem のデフォルトスロット：項目の内容です。