Timeline 時間軸

縱向事件流。語意 <ol> 列表，時間順序即文件順序。

基礎用法

基礎用法

1. 2026-09-01

   立項評審
2. 2026-09-15

   一期交付
3. 2026-09-25

   驗收進行中

<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>

<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>

左右交替

alternate

1. Q1

   規劃
2. Q2

   開發
3. Q3

   壓測

hollow 讓節點顯示為空心圓點，常用於未完成的狀態。

空心節點

1. Q1

   未開始
2. Q2

   進行中
3. Q3

   已完成

<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>

<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

/** 條目 props（Item 元件） */
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'