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'