---
title: Timeline 时间轴 (done)
order: 34
group:
  path: /components
nav:
  title: 组件
  path: /components
---

## 使用

### 使用原则

### 基本使用

```jsx
import React from 'react';
import { Timeline, Row, Col, Icons } from 'quanta-design';
const {
  CloseCircleIcon,
  CheckCircleIcon,
  WaitingCircleFillIcon,
  WarningCircleIcon,
} = Icons;

export default () => (
  <div>
    <Row gutter={24}>
      <Col span={12}>
        <Timeline>
          <Timeline.Item>某个事件D发生在 2019-11-10</Timeline.Item>
          <Timeline.Item>某个事件C发生在 2019-11-9</Timeline.Item>
          <Timeline.Item>某个事件B发生在 2019-11-8</Timeline.Item>
          <Timeline.Item>某个事件A发生在 2019-11-7</Timeline.Item>
        </Timeline>
      </Col>
      <Col span={12}>
        <Timeline>
          <Timeline.Item
            dot={<CloseCircleIcon fill="#F04134" fontSize="22px" />}
          >
            某个事件D发生在 2019-11-10
          </Timeline.Item>
          <Timeline.Item
            dot={<CheckCircleIcon fill="#2FC25A" fontSize="22px" />}
          >
            某个事件D发生在 2019-11-9
          </Timeline.Item>
          <Timeline.Item
            dot={<WaitingCircleFillIcon fill="#3C6DF0" fontSize="22px" />}
          >
            某个事件D发生在 2019-11-8
          </Timeline.Item>
          <Timeline.Item
            dot={<WarningCircleIcon fill="#f5a623" fontSize="22px" />}
          >
            某个事件D发生在 2019-11-7
          </Timeline.Item>
        </Timeline>
      </Col>
    </Row>
  </div>
);
```