Timeline 时间轴

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

使用指南

在 Taro 文件中引入组件

import { AtTimeline } from 'taro-ui'

组件依赖的样式文件（仅按需引用时需要）

@import "~taro-ui/dist/style/components/timeline.scss";
@import "~taro-ui/dist/style/components/icon.scss";

用法

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

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

<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>

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

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

添加更多内容

<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 参数

items object 字段详解