> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/components/timeline.html

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

# Timeline 时间线

按顺序展示事件与进展。

## 基本用法


1. 09:00

创建项目
1. 10:30

完成审核
1. 12:00

发布成功

basic.tsx

复制代码

```tsx lineNumbers file="../../src/examples/timeline/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

需求确认
1. 2026-10-03

开始设计
1. 等待下一步

advanced.tsx

复制代码

```tsx lineNumbers file="../../src/examples/timeline/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 时，可以导入这些类型。

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

## TimelineItem API

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

## TimelineProps API

| 属性        | 类型                                             | 默认值      | 说明                |
| --------- | ---------------------------------------------- | -------- | ----------------- |
| `items`   | [`readonly TimelineItem[]`](#timelineitem-api) | 必填       | 数据项目，保持 key 唯一且稳定 |
| `mode`    | `'left' \| 'right' \| 'alternate'`             | `'left'` | 展示模式或允许的字符        |
| `reverse` | `boolean`                                      | `false`  | 反向排列              |
| `pending` | `ReactNode`                                    | —        | 末尾等待内容            |