Timeline 时间轴

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/base@latest -S

Guide

垂直展示的时间流信息。

何时使用

  • 当有一系列信息需要从上至下按时间排列时。

  • 需要有一条时间轴进行视觉上的串联时。

API

时间轴

参数说明类型默认值
prefix样式的品牌前缀String'next-'
fold自定义折叠选项 示例[{foldArea: [startIndex, endIndex], foldShow: boolean}]Array[]
className自定义类名String-

Timeline.Item

参数说明类型默认值
state节点状态可选值:'done', 'process', 'error', 'success'Enum'done'
icon图标String-
time格式化后的时间ReactNode-
title标题ReactNode-
content内容ReactNode-

代码示例

基本

最简单的用法。

Timeline 时间轴 - 图1

查看源码在线预览

  1. import { Timeline } from "@icedesign/base";
  3. const { Item: TimelineItem } = Timeline;
  5. ReactDOM.render(
  6.   <Timeline>
  7.     <TimelineItem title="收件" state="process" />
  8.     <TimelineItem title="发货" />
  9.     <TimelineItem title="下单" />
  10.   </Timeline>,
  11.   mountNode
  12. );

内容

带内容的用法，分别添加title，content，icon的效果。

Timeline 时间轴 - 图2

查看源码在线预览

  1. import { Timeline } from "@icedesign/base";
  3. const { Item: TimelineItem } = Timeline;
  5. ReactDOM.render(
  6.   <Timeline>
  7.     <TimelineItem
  8.       title="签收"
  9.       content={
  10.         <div>
  11.           【杭州市】已签收,签收人是阿里巴巴小邮局，感谢使用申通快递，期待再次为您服务
  12.         </div>
  13.       }
  14.       time={"2016-06-10 10:30:00"}
  15.       state="process"
  16.     />
  17.     <TimelineItem
  18.       title="派送"
  19.       content="【杭州市】快件已到达 浙江杭州滨江公司"
  20.       time={"2016-06-10 09:30:00"}
  21.     />
  22.     <TimelineItem
  23.       title="派送"
  24.       content="【杭州市】浙江杭州滨江公司派件员正在为您派件"
  25.       time={"2016-06-10 09:03:00"}
  26.     />
  27.     <TimelineItem
  28.       title="运输"
  29.       content="【杭州市】浙江杭州转运中心 已发出"
  30.       time={"2016-06-10 06:10:00"}
  31.     />
  32.     <TimelineItem
  33.       title="运输"
  34.       content="【东莞市】广东东莞转运中心 已发出"
  35.       time={"2016-06-09 18:00:00"}
  36.     />
  37.     <TimelineItem
  38.       title="揽件"
  39.       content="【东莞市】申通快递 广东东莞凤岗分部收件员 已揽件"
  40.       time={"2016-06-09 16:12:00"}
  41.     />
  42.     <TimelineItem
  43.       title="揽件"
  44.       content="【东莞市】商家正通知快递公司揽件"
  45.       time={"2016-06-09 14:00:00"}
  46.     />
  47.     <TimelineItem
  48.       title="揽件"
  49.       content="【东莞市】您的订单待配货"
  50.       time={"2016-06-09 10:12:19"}
  51.     />
  52.     <TimelineItem
  53.       title="揽件"
  54.       content="【东莞市】您的订单开始处理"
  55.       time={"2016-06-09 10:01:09"}
  56.       icon="atm"
  57.     />
  58.   </Timeline>,
  59.   mountNode
  60. );

折叠

自定义折叠区域。

Timeline 时间轴 - 图3

查看源码在线预览

  1. import { Timeline } from "@icedesign/base";
  3. const { Item: TimelineItem } = Timeline;
  5. ReactDOM.render(
  6.   <Timeline
  7.     fold={[
  8.       { foldArea: [1, 2], foldShow: false },
  9.       { foldArea: [5], foldShow: false }
  10.     ]}
  11.   >
  12.     <TimelineItem
  13.       title="签收"
  14.       content="【杭州市】已签收,签收人是阿里巴巴小邮局，感谢使用申通快递，期待再次为您服务"
  15.       time={"2016-06-10 10:30:00"}
  16.       state="process"
  17.     />
  18.     <TimelineItem
  19.       title="派送"
  20.       content="【杭州市】快件已到达 浙江杭州滨江公司"
  21.       time={"2016-06-10 09:30:00"}
  22.     />
  23.     <TimelineItem
  24.       title="派送"
  25.       content="【杭州市】浙江杭州滨江公司派件员正在为您派件"
  26.       time={"2016-06-10 09:03:00"}
  27.     />
  28.     <TimelineItem
  29.       title="运输"
  30.       content="【杭州市】浙江杭州转运中心 已发出"
  31.       time={"2016-06-10 06:10:00"}
  32.     />
  33.     <TimelineItem
  34.       title="运输"
  35.       content="【东莞市】广东东莞转运中心 已发出"
  36.       time={"2016-06-09 18:00:00"}
  37.     />
  38.     <TimelineItem
  39.       title="揽件"
  40.       content="【东莞市】申通快递 广东东莞凤岗分部收件员 已揽件"
  41.       time={"2016-06-09 16:12:00"}
  42.     />
  43.     <TimelineItem
  44.       title="揽件"
  45.       content="【东莞市】商家正通知快递公司揽件"
  46.       time={"2016-06-09 14:00:00"}
  47.     />
  48.     <TimelineItem
  49.       title="揽件"
  50.       content="【东莞市】您的订单待配货"
  51.       time={"2016-06-09 10:12:19"}
  52.     />
  53.     <TimelineItem
  54.       title="揽件"
  55.       content="【东莞市】您的订单开始处理"
  56.       time={"2016-06-09 10:01:09"}
  57.     />
  58.   </Timeline>,
  59.   mountNode
  60. );

状态

设置每个节点不同的状态。

Timeline 时间轴 - 图4

查看源码在线预览

  1. import { Timeline } from "@icedesign/base";
  3. const { Item: TimelineItem } = Timeline;
  5. ReactDOM.render(
  6.   <Timeline>
  7.     <TimelineItem title="多云" time={"2016-06-10 10:30:00"} state="process" />
  8.     <TimelineItem title="晴天" time={"2016-06-11"} state="success" />
  9.     <TimelineItem title="下雨" time={"2016-06-09"} state="error" />
  10.   </Timeline>,
  11.   mountNode
  12. );

相关区块

Timeline 时间轴 - 图5

暂无相关区块