Timeline 时间轴

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

使用指南

在 Taro 文件中引入组件

:::demo

import { AtTimeline } from 'taro-ui'

:::

用法

:::demo

<AtTimeline 
  items={[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐' }, 
    { title: '上班' }, 
    { title: '睡觉' }
  ]}
>
</AtTimeline>

:::

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

:::demo

<AtTimeline 
  items={[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐', color: 'green' }, 
    { title: '上班', color: 'red' }, 
    { title: '睡觉', color: 'yellow' }
  ]}
>
</AtTimeline>
<AtTimeline 
  items={[
    { title: '刷牙洗脸', icon: 'check-circle' }, 
    { title: '吃早餐', icon: 'clock' }, 
    { title: '上班', icon: 'clock' }, 
    { title: '睡觉', icon: 'clock' }
  ]}
>
</AtTimeline>

:::

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

:::demo

<AtTimeline 
  pending 
  items={[
    { title: '刷牙洗脸' }, 
    { title: '吃早餐' }, 
    { title: '上班' }, 
    { title: '睡觉' }
  ]}
>
</AtTimeline>

:::

添加更多内容

:::demo

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

:::

Timeline 参数