Timeline 时间轴

定义／Definition

垂直展示的时间流信息。

规则 / Rule

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

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

代码演示

基本用法

基本的时间轴。 

  1. import { Timeline, WingBlank, WhiteSpace } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div>
  7.         <WhiteSpace size={32} />
  8.         <WingBlank size={32}>
  9.           <Timeline>
  10.             <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
  11.             <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
  12.             <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
  13.             <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
  14.           </Timeline>
  15.         </WingBlank>
  16.       </div>
  17.     );
  18.   },
  19. });
  21. ReactDOM.render(<App />, mountNode);

圆圈颜色

圆圈颜色，绿色用于已完成、成功状态，橙色表示告警或错误状态，蓝色可表示正在进行或其他默认状态。 

  1. import { Timeline, WingBlank, WhiteSpace } from 'antd-mobile';
  3. let App = React.createClass({
  4.   render() {
  5.     return (
  6.       <div>
  7.         <WhiteSpace size={32} />
  8.         <WingBlank size={32}>
  9.           <Timeline>
  10.             <Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
  11.             <Timeline.Item color="green">创建服务现场 2015-09-01</Timeline.Item>
  12.             <Timeline.Item color="orange">
  13.               <p>初步排除网络异常1</p>
  14.               <p>初步排除网络异常2</p>
  15.               <p>初步排除网络异常3 2015-09-01</p>
  16.             </Timeline.Item>
  17.             <Timeline.Item>
  18.               <p>技术测试异常1</p>
  19.               <p>技术测试异常2</p>
  20.               <p>技术测试异常3 2015-09-01</p>
  21.             </Timeline.Item>
  22.           </Timeline>
  23.         </WingBlank>
  24.       </div>
  25.     );
  26.   },
  27. });
  29. ReactDOM.render(<App />, mountNode);

Timeline时间轴 - 图1

API

  1. <Timeline>
  2.   <Timeline.Item>创建服务现场 2015-09-01</Timeline.Item>
  3.   <Timeline.Item>初步排除网络异常 2015-09-01</Timeline.Item>
  4.   <Timeline.Item>技术测试异常 2015-09-01</Timeline.Item>
  5.   <Timeline.Item>网络异常正在修复 2015-09-01</Timeline.Item>
  6. </Timeline>

Timeline.Item

时间轴的每一个节点。
参数说明类型可选值默认值
color指定圆圈颜色。stringblue, red, greenblue