# 时间轴

## 案例演示

### 时间轴:基本使用

---demo
```js
import { Timeline, Icon } from 'amos-framework';

ReactDOM.render((
<Timeline>
  <Timeline.Item>属性</Timeline.Item>
  <Timeline.Item>条件</Timeline.Item>
  <Timeline.Item>结果</Timeline.Item>
  <Timeline.Item>动作</Timeline.Item>
</Timeline>
), _react_runner_);
```
---demoend

### 时间轴:自定义步骤

---demo
```js
import { Timeline, Icon } from 'amos-framework';

ReactDOM.render((
  <Timeline>
    <Timeline.Item color="green">时间点 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">时间点 2015-09-01</Timeline.Item>
    <Timeline.Item color="red">
      <p>步骤 1</p>
      <p>步骤 2</p>
      <p>步骤 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item>
      <p>测试 1</p>
      <p>测试 2</p>
      <p>测试 3 2015-09-01</p>
    </Timeline.Item>
  </Timeline>
), _react_runner_);
```
---demoend

### 时间轴:自定义Icon

---demo
```js
import { Timeline, Icon } from 'amos-framework';

ReactDOM.render((
<Timeline>
  <Timeline.Item>时间点 2015-09-01</Timeline.Item>
  <Timeline.Item>步骤 2015-09-01</Timeline.Item>
  <Timeline.Item dot={<Icon icon="collection" style={{ fontSize: '16px' }} />} color="red">测试 2015-09-01</Timeline.Item>
  <Timeline.Item>解决 2015-09-01</Timeline.Item>
</Timeline>
), _react_runner_);
```
---demoend

### 时间轴:See more

---demo
```js
import { Timeline, Icon } from 'amos-framework';

ReactDOM.render((
  <Timeline pending={<a href="#">See more</a>}>
    <Timeline.Item>时间点 2015-09-01</Timeline.Item>
    <Timeline.Item>步骤 2015-09-01</Timeline.Item>
    <Timeline.Item>测试 2015-09-01</Timeline.Item>
  </Timeline>
), _react_runner_);
```
---demoend

### 时间轴:横向

---demo
```js
import { Timeline, Icon } from 'amos-framework';

ReactDOM.render((
  <Timeline pending={<a href="#">See more</a>} direction="horizontal">
    <Timeline.Item>时间点 2015-09-01</Timeline.Item>
    <Timeline.Item>步骤 2015-09-01</Timeline.Item>
    <Timeline.Item>测试 2015-09-01</Timeline.Item>
  </Timeline>
), _react_runner_);
```
---demoend

## props

### Timeline

| params | type |  default | description |
| ------ | ------ | ------ | ------ |
| prefixCls | string | `amos-timeline` | css class 前缀 |
| className | string | - | 自定义className |
| style | object | - | 自定义样式 |
| children | ReactNode | - | 时间轴内容 |
| pending | boolean | - | 指定最后一个幽灵节点是否存在或内容 |
| direction | string | vertical | 显示方向，默认垂直，可选值为 `horizontal、vertical` |

### Timeline.Item

| params | type |  default | description |
| ------ | ------ | ------ | ------ |
| prefixCls | string | `amos-timeline` | css class 前缀 |
| className | string | - | 自定义className |
| style | object | - | 自定义样式 |
| children | ReactNode | - | 每一个时间节点内容 |
| pending | boolean | - | 指定最后一个幽灵节点是否存在或内容 |
| last | boolean | - | 是否为最后一个时间节点 |
| color | string | - | 节点颜色 |
| dot | ReactNode | - | 自定义时间轴点 |