Timeline 时间轴

垂直展示一系列的时间流信息。

使用指南

在 Taro 文件中引入组件

:::demo

1. import { AtTimeline } from 'taro-ui'

:::

用法

:::demo

1. <AtTimeline
2. items={[
3. { title: '刷牙洗脸' },
4. { title: '吃早餐' },
5. { title: '上班' },
6. { title: '睡觉' }
7. ]}
8. >
9. </AtTimeline>

:::

自定义默认图标颜色、自定义图标

:::demo

1. <AtTimeline
2. items={[
3. { title: '刷牙洗脸' },
4. { title: '吃早餐', color: 'green' },
5. { title: '上班', color: 'red' },
6. { title: '睡觉', color: 'yellow' }
7. ]}
8. >
9. </AtTimeline>

11. <AtTimeline
12. items={[
13. { title: '刷牙洗脸', icon: 'check-circle' },
14. { title: '吃早餐', icon: 'clock' },
15. { title: '上班', icon: 'clock' },
16. { title: '睡觉', icon: 'clock' }
17. ]}
18. >
19. </AtTimeline>

:::

标记最后一个为幽灵节点（即时间轴未完成，还在记录过程中）

:::demo

1. <AtTimeline
2. pending
3. items={[
4. { title: '刷牙洗脸' },
5. { title: '吃早餐' },
6. { title: '上班' },
7. { title: '睡觉' }
8. ]}
9. >
10. </AtTimeline>

:::

添加更多内容

:::demo

1. <AtTimeline
2. pending
3. items={[
4. { title: '刷牙洗脸', content: ['大概8:00'], icon: 'check-circle' },
5. { title: '吃早餐', content: ['牛奶+面包', '餐后记得吃药'], icon: 'clock' },
6. { title: '上班', content: ['查看邮件', '写PPT', '发送PPT给领导'], icon: 'clock' },
7. { title: '睡觉', content: ['不超过23:00'], icon: 'clock' }
8. ]}
9. >
10. </AtTimeline>

:::

Timeline 参数