Timeline

Example
基本用法
节点状态
内容
左侧展示时间
自定义轴节点
折叠用法
时间轴显示方式
API

垂直展示的时间流信息。

何时使用 #

当有一系列信息需要从上至下按时间排列时。
需要有一条时间轴进行视觉上的串联时。

代码演示 #

基本用法 #

最简单的用法。

节点状态 #

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

内容 #

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

import ReactDOM from 'react-dom';
import { Timeline } from '@alifd/next';
const TimelineItem = Timeline.Item;
ReactDOM.render(
  <Timeline>
    <TimelineItem
      title="Sign"
      content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again"
      time="2016-06-10 10:30:00"
      state="process"
    />
    <TimelineItem
      title="Delivery"
      content="[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company"
      time="2016-06-10 09:30:00"
    />
    <TimelineItem
      title="Delivery"
      content="[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you"
      time="2016-06-10 09:03:00"
    />
    <TimelineItem
      title="Transport"
      content="[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued"
      time="2016-06-10 06:10:00"
    />
    <TimelineItem
      title="Transport"
      content="[Dongguan City] Guangdong Dongguan Transshipment Center has been issued"
      time="2016-06-09 18:00:00"
    />
    <TimelineItem
      title="Processing"
      content="[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province"
      time="2016-06-09 16:12:00"
    />
    <TimelineItem
      title="Processing"
      content="[Dongguan City] The merchant is informing the express company to insert"
      time="2016-06-09 14:00:00"
    />
    <TimelineItem
      title="Processing"
      content="[Dongguan City] Your order to be picked"
      time="2016-06-09 10:12:19"
    />
    <TimelineItem
      title="Processing"
      content="[Dongguan] Your order starts processing"
      time="2016-06-09 10:01:09"
      icon="atm"
    />
  </Timeline>,
  mountNode
);

左侧展示时间 #

设置时间轴左边的内容。

自定义轴节点 #

自定义时间轴节点。

折叠用法 #

自定义折叠区域。

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline, Select } from '@alifd/next';
const TimelineItem = Timeline.Item;
class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      timelineAnimation: true,
    };
    this.onTimelineAnimation = value => {
      this.setState({ timelineAnimation: value });
    };
  }
  render() {
    return (
      <div>
        <div className="custom-step-option">
          <Select
            placeholder="Whether to start animation"
            onChange={this.onTimelineAnimation}
            className="custom-select"
            defaultValue
          >
            {[true, false].map((item, index) => (
              <Select.Option value={item} key={index}>
                {item ? 'Animation on' : 'Animation off'}
              </Select.Option>
            ))}
          </Select>
        </div>
        <Timeline
          animation={this.state.timelineAnimation}
          fold={[
            { foldArea: [1, 2], foldShow: false },
            { foldArea: [5], foldShow: false },
          ]}
        >
          <TimelineItem
            title="Sign"
            content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again"
            time="2016-06-10 10:30:00"
            state="process"
          />
          <TimelineItem
            title="Delivery"
            content="[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company"
            time="2016-06-10 09:30:00"
          />
          <TimelineItem
            title="Delivery"
            content="[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you"
            time="2016-06-10 09:03:00"
          />
          <TimelineItem
            title="Transport"
            content="[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued"
            time="2016-06-10 06:10:00"
          />
          <TimelineItem
            title="Transport"
            content="[Dongguan City] Guangdong Dongguan Transshipment Center has been issued"
            time="2016-06-09 18:00:00"
          />
          <TimelineItem
            title="Processing"
            content="[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province"
            time="2016-06-09 16:12:00"
          />
          <TimelineItem
            title="Processing"
            content="[Dongguan City] The merchant is informing the express company to insert"
            time="2016-06-09 14:00:00"
          />
          <TimelineItem
            title="Processing"
            content="[Dongguan City] Your order to be picked"
            time="2016-06-09 10:12:19"
          />
          <TimelineItem
            title="Processing"
            content="[Dongguan] Your order starts processing"
            time="2016-06-09 10:01:09"
          />
        </Timeline>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

时间轴显示方式 #

交替显示节点.

import React from 'react';
import ReactDOM from 'react-dom';
import { Timeline, Select } from '@alifd/next';
const TimelineItem = Timeline.Item;
class Demo extends React.Component {
  constructor() {
    super(...arguments);
    this.state = {
      mode: 'alternate',
    };
    this.onTimelineMode = value => {
      this.setState({ mode: value });
    };
  }
  render() {
    return (
      <div>
        <div className="custom-step-option">
          <Select
            placeholder="please choose timeline mode"
            onChange={this.onTimelineMode}
            className="custom-select"
            defaultValue="alternate"
          >
            {['left', 'alternate'].map((item, index) => (
              <Select.Option value={item} key={index}>
                {item}
              </Select.Option>
            ))}
          </Select>
        </div>
        <Timeline
          mode={this.state.mode}
          fold={[
            { foldArea: [1, 2], foldShow: false },
            { foldArea: [5], foldShow: false },
          ]}
        >
          <TimelineItem
            title="Sign"
            timeLeft="2020-09-09"
            content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again"
            time="2016-06-10 10:30:00"
            state="process"
          />
          <TimelineItem
            title="Delivery"
            timeLeft="2020-09-09"
            content="[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again"
            time="2016-06-10 09:30:00"
          />
          <TimelineItem
            title="Delivery"
            timeLeft="2020-09-09"
            content="[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you"
            time="2016-06-10 09:03:00"
          />
          <TimelineItem
            title="Transport"
            timeLeft="2020-09-09"
            content="[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued"
            time="2016-06-10 06:10:00"
          />
          <TimelineItem
            title="Transport"
            timeLeft="2020-09-09"
            content="[Dongguan City] Guangdong Dongguan Transshipment Center has been issued"
            time="2016-06-09 18:00:00"
          />
          <TimelineItem
            title="Processing"
            timeLeft="2020-09-09"
            content="[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province"
            time="2016-06-09 16:12:00"
          />
          <TimelineItem
            title="Processing"
            timeLeft="2020-09-09"
            content="[Dongguan City] The merchant is informing the express company to insert"
            time="2016-06-09 14:00:00"
          />
          <TimelineItem
            title="Processing"
            timeLeft="2020-09-09"
            content="[Dongguan City] Your order to be picked"
            time="2016-06-09 10:12:19"
          />
          <TimelineItem
            title="Processing"
            timeLeft="2020-09-09"
            content="[Dongguan] Your order starts processing"
            time="2016-06-09 10:01:09"
          />
        </Timeline>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

API #

Timeline #

参数	说明	类型	默认值	支持版本
fold	自定义折叠选项	Array<FoldItem>	-	-
className	自定义类名	string	-	-
animation	展示动画	boolean	true	-
mode	展示的模式，left 为左，alternate 为交替显示	'left' \| 'alternate'	'left'	1.23.18

Timeline.Item #

参数	说明	类型	默认值	支持版本
state	节点状态	'done' \| 'process' \| 'error' \| 'success'	'done'	-
icon	图标	string	-	-
dot	自定义时间轴节点	React.ReactNode	-	-
time	格式化后的时间	React.ReactNode	-	-
title	标题	React.ReactNode	-	-
timeLeft	左侧时间	React.ReactNode	-	-
content	右侧内容	React.ReactNode	-	-
animation	展示动画	boolean	true	-
mode	展示的模式，left 为左，alternate 为交替显示	'left' \| 'alternate'	'left'	1.23.18