Timeline 时间轴

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

垂直展示的时间流信息。

何时使用

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

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

API

Timeline

Timeline.Item

代码示例

基本

最简单的用法。

查看源码在线预览

import { Timeline } from '@alifd/next';
const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Receipt" state="process"/>
    <TimelineItem title="Ship" />
    <TimelineItem title="Order" />
</Timeline>, mountNode);

状态

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

查看源码在线预览

import { Timeline } from '@alifd/next';
const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Cloudy" time={'2016-06-10 10:30:00'} state="process"/>
    <TimelineItem title="Sunny" time={'2016-06-11'} state="success"/>
    <TimelineItem title="Rainy" time={'2016-06-09'} state="error"/>
</Timeline>, mountNode);

内容

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

查看源码在线预览

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 { Timeline } from '@alifd/next';
const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Sign" state="process" timeLeft="2016-10-03" />
    <TimelineItem title="Ship" timeLeft="2016-10-02" />
    <TimelineItem title="Order" timeLeft="2016-10-01" />
</Timeline>, mountNode);

自定义时间轴节点

自定义时间轴节点。

查看源码在线预览

import { Timeline, Icon } from '@alifd/next';
const TimelineItem = Timeline.Item;
ReactDOM.render(<Timeline>
    <TimelineItem title="Receipt" state="process" icon="smile" time="2017-10-21"/>
    <TimelineItem title="Ship" dot={<span className="custom-node"> 😂 </span>} state="success" time="2017-10-22"/>
    <TimelineItem title="Order" dot={<Icon type="success" size="xl" style={{ color: '#1DC11D' }}/>} content="Congratulations, successful orders!" time="2017-10-23"/>
</Timeline>, mountNode);

.custom-node {
    color: #1DC11D;
    position: relative;
    left: 3px;
    font-size: 14px;
}

折叠

自定义折叠区域。

查看源码在线预览

import { Timeline, Select } from '@alifd/next';
const TimelineItem = Timeline.Item;
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            timelineAnimation: true
        };
    }
    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);

.custom-step-option {
    margin-bottom: 20px;
}

相关区块

暂无相关区块