For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/llms-full.txt, and this page is available as Markdown at https://ifhover.github.io/leaf-ui/components/timeline.md.

Timeline 时间线

按顺序展示事件与进展。

基本用法

  1. 09:00
    创建项目
  2. 10:30
    完成审核
  3. 12:00
    发布成功
basic.tsx
import { Timeline } from '@ifhover/leaf-ui';

export function TimelineBasic() {
  return (
    <Timeline
      items={[
        { key: 'create', label: '09:00', children: '创建项目', color: 'success' },
        { key: 'review', label: '10:30', children: '完成审核' },
        { key: 'release', label: '12:00', children: '发布成功', color: 'info' },
      ]}
    />
  );
}

更多用法

  1. 2026-10-01
    需求确认
  2. 2026-10-03
    开始设计
  3. 等待下一步
advanced.tsx
import { Timeline } from '@ifhover/leaf-ui';

export function TimelineAlternate() {
  return (
    <Timeline
      mode="alternate"
      pending="等待下一步"
      items={[
        { key: 'one', label: '2026-10-01', children: '需求确认' },
        { key: 'two', label: '2026-10-03', children: '开始设计', color: 'warning' },
      ]}
    />
  );
}

使用说明

items 按事件顺序展示内容,可分别指定颜色与图标。mode 控制内容排列,reverse 反转顺序,pending 表示后续事件仍在处理中。

类型

组装数据、定义回调和使用 ref 时,可以导入这些类型。

import type { TimelineItem, TimelineProps } from '@ifhover/leaf-ui';

TimelineItem API

属性类型默认值说明
keystring必填唯一且稳定的标识
labelReactNode—显示内容
childrenReactNode必填内容或下级项目
dotReactNode—自定义时间线节点
color'primary' | 'success' | 'warning' | 'error' | 'info' | (string & {})—颜色

TimelineProps API

属性类型默认值说明
itemsreadonly TimelineItem[]必填数据项目,保持 key 唯一且稳定
mode'left' | 'right' | 'alternate''left'展示模式或允许的字符
reversebooleanfalse反向排列
pendingReactNode—末尾等待内容