@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
263 lines (223 loc) • 8.15 kB
Markdown
---
localeCode: zh-CN
order: 83
category: 展示类
title: Timeline 时间轴
icon: doc-timeline
brief: 时间轴是用于对一系列信息进行时间排序时，垂直展示的组件。
---
## 代码演示
### 如何引入
```jsx import
import { Timeline } from '@douyinfe/semi-ui';
```
### 基本用法
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline>
<Timeline.Item time="2019-07-14 10:35">第一个节点内容</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17">第二个节点内容</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34">第三个节点内容</Timeline.Item>
</Timeline>
);
```
### 节点类型
通过 type 可以设置节点类型，对应原点会变成相应的颜色，可选：`default`，`ongoing`， `success`， `warning`， `error`。
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline>
<Timeline.Item time="2019-07-14 10:35" type="ongoing">
审核中
</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" type="success">
发布成功
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" type="error">
审核失败
</Timeline.Item>
</Timeline>
);
```
### 自定义节点
可以通过 `dot` 自定义图标，`color` 自定义圆点色值。通过设置 `children` 的样式可以自定义节点样式。
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
import { IconAlertTriangle } from '@douyinfe/semi-icons';
() => (
<Timeline>
<Timeline.Item time="2019-07-14 10:35">默认样式的节点</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" dot={<IconAlertTriangle />} type="warning">
自定义图标
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" color="pink">
自定义节点颜色
</Timeline.Item>
<Timeline.Item time="2019-04-10 12:20">
<span style={{ fontSize: '18px' }}>自定义节点样式</span>
</Timeline.Item>
</Timeline>
);
```
### 时间轴位置
通过 `mode` 属性可以设置时间的位置，共有 4 种模式可选：`left`， `center`， `alternate`， `right`。
#### 时间轴在左侧（默认）
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline mode="left">
<Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
第一个节点内容
</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
第二个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
第三个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
第四个节点内容
</Timeline.Item>
</Timeline>
);
```
#### 时间节点在左侧
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline mode="center">
<Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
第一个节点内容
</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
第二个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
第三个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
第四个节点内容
</Timeline.Item>
</Timeline>
);
```
#### 交替展现
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline mode="alternate">
<Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
第一个节点内容
</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
第二个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
第三个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
第四个节点内容
</Timeline.Item>
</Timeline>
);
```
#### 时间轴在右侧
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
() => (
<Timeline mode="right">
<Timeline.Item time="2019-07-14 10:35" extra="节点辅助说明信息">
第一个节点内容
</Timeline.Item>
<Timeline.Item time="2019-06-13 16:17" extra="节点辅助说明信息">
第二个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-14 18:34" extra="节点辅助说明信息">
第三个节点内容
</Timeline.Item>
<Timeline.Item time="2019-05-09 09:12" extra="节点辅助说明信息">
第四个节点内容
</Timeline.Item>
</Timeline>
);
```
### 使用 dataSource
```jsx live=true
import React from 'react';
import { Timeline } from '@douyinfe/semi-ui';
import { IconAlertTriangle } from '@douyinfe/semi-icons';
() => (
<Timeline
mode="alternate"
dataSource={[
{
time: '2019-07-14 10:35',
extra: '节点辅助说明信息',
content: '第一个节点内容',
type: 'ongoing',
},
{
time: '2019-06-13 16:17',
extra: '节点辅助说明信息',
content: <span style={{ fontSize: '18px' }}>第二个节点内容</span>,
color: 'pink',
},
{
time: '2019-05-14 18:34',
extra: '节点辅助说明信息',
dot: <IconAlertTriangle />,
content: '第三个节点内容',
type: 'warning',
},
{
time: '2019-05-09 09:12',
extra: '节点辅助说明信息',
content: '第四个节点内容',
type: 'success',
},
]}
/>
);
```
## API 参考
### TimeLine
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 类名 | string | - |
| mode | 通过设置 mode 可以改变时间轴和内容的相对位置 | `left`\|`right`\|`center`\|`alternate` | `left` |
| style | 样式 | CSSProperties | - |
| dataSource | 时间轴数据源，支持 content 属性及 TimeLine.Item 的所有属性 | array | - |
### TimeLine.Item
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 类名 | string | - | - |
| color | 自定义的圆圈色值 | string | - | - |
| dot | 自定义时间轴点 | ReactNode | - | - |
| extra | 自定义辅助内容 | ReactNode | - | - |
| position | 自定义节点位置，可以覆盖 TimeLine 的模式选项 | `left`\|`right` | - | - |
| style | 样式 | CSSProperties | - | - |
| time | 时间文本 | string | - | - |
| type | 当前圆圈的模式 | `default`\|`ongoing`\|`success`\|`warning`\|`error` | `default` | - |
| onClick | 鼠标点击事件的回调 | (e: MouseEvent) => void | - | 2.2.0 |
## Accessibility
### ARIA
- 组件中时间点的连线以及时间点本身被设置了 `aria-hidden`，不会响应 Accessibility API
- 可以通过传入 `aria-label` 设置 TimeLine 组件的标签
```text
<Timeline aria-label="xx事故处理过程时间线">
<Timeline.Item time="2015-09-01">创建服务现场</Timeline.Item>
<Timeline.Item time="2015-09-02">初步排除网络异常</Timeline.Item>
<Timeline.Item time="2015-09-03">技术测试异常</Timeline.Item>
<Timeline.Item time="2015-09-05">网络异常正在修复</Timeline.Item>
</Timeline>
```
## 设计变量
<DesignToken/>