ReactJS UI Ant Design Timeline 组件

简介

Ant Design 是一个 UI 库，致力于提供开箱即用的高质量 React 组件用于企业级开发，其中包括 Timeline 组件。Timeline 是展示时间轴的组件，支持垂直和水平两种展示方式。

特性

• 支持垂直和水平两种展示方式
• 支持节点自定义和内容自定义
• 支持最后一个节点自定义
• 支持新增节点和删除节点

安装

使用 npm 进行安装：

npm install antd

使用

首先在需要使用 Timeline 的地方引入组件：

import { Timeline } from 'antd';

然后使用 Timeline 组件，设置 mode 属性为 'left' 或 'alternate' 即可展示垂直或水平 Timeline，并在内部使用 Timeline.Item 定义每一个节点：

<Timeline mode="left">
  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
  <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>

节点自定义

使用 Timeline.Item 的 dot 属性可以自定义节点，在 dot 中可以使用任何 React 元素，如 Icon、Badge 等等：

<Timeline mode="left">
  <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} >Create a services site 2015-09-01</Timeline.Item>
  <Timeline.Item dot={<Badge status="success" text="Done" />} >Solve initial network problems 2015-09-01</Timeline.Item>
  <Timeline.Item dot={<Icon type="loading" style={{ fontSize: '16px' }} />} >Technical testing 2015-09-01</Timeline.Item>
  <Timeline.Item dot={<Icon type="check-circle" style={{ fontSize: '16px' }} />} >Network problems being solved 2015-09-01</Timeline.Item>
</Timeline>

内容自定义

使用 Timeline.Item 的 content 属性可以自定义节点的内容，在 content 中可以使用任何 React 元素，如 Typography、Image 等等：

<Timeline mode="left">
  <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} >
    <Typography.Text strong>Create a services site</Typography.Text>
    <Typography.Text>2015-09-01</Typography.Text>
    <Image src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png" width={200} />
  </Timeline.Item>
  <Timeline.Item dot={<Badge status="success" text="Done" />} >
    <Typography.Text strong>Solve initial network problems</Typography.Text>
    <Typography.Text>2015-09-01</Typography.Text>
  </Timeline.Item>
  <Timeline.Item dot={<Icon type="loading" style={{ fontSize: '16px' }} />} >
    <Typography.Text strong>Technical testing</Typography.Text>
    <Typography.Text>2015-09-01</Typography.Text>
  </Timeline.Item>
  <Timeline.Item dot={<Icon type="check-circle" style={{ fontSize: '16px' }} />} >
    <Typography.Text strong>Network problems being solved</Typography.Text>
    <Typography.Text>2015-09-01</Typography.Text>
  </Timeline.Item>
</Timeline>

最后一个节点自定义

使用 Timeline.Item 的 position 属性可以自定义最后一个节点，position 属性为 'last' 则表示该节点是最后一个节点：

<Timeline mode="left">
  <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
  <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
  <Timeline.Item position="last" >Technical testing 2015-09-01</Timeline.Item>
</Timeline>

新增节点和删除节点

使用状态变量保存节点数组，通过 setState 方法更新节点数组即可新增、删除节点：

const [items, setItems] = useState([
  <Timeline.Item key="0">Create a services site 2015-09-01</Timeline.Item>,
  <Timeline.Item key="1">Solve initial network problems 2015-09-01</Timeline.Item>,
  <Timeline.Item key="2">Technical testing 2015-09-01</Timeline.Item>,
]);

const handleAdd = () => {
  const newItems = [...items];
  const newItem = <Timeline.Item key={items.length}>Add new node</Timeline.Item>;
  newItems.push(newItem);
  setItems(newItems);
};

const handleDelete = () => {
  const newItems = [...items];
  newItems.pop();
  setItems(newItems);
};

<Timeline>
  {items}
</Timeline>
<Button onClick={handleAdd}>Add node</Button>
<Button onClick={handleDelete}>Delete node</Button>

以上便是 Ant Design Timeline 组件的介绍和使用方法，通过自定义节点和内容，可以为展示时间轴的需求带来更丰富的交互体验。