Timeline

Vertical display timeline.

When To Use#

  • When a series of information needs to be ordered by time (ascending or descending).

  • When you need a timeline to make a visual connection.

Examples

  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Technical testing 2015-09-01
  • Network problems being solved 2015-09-01

Basic timeline.

expand codeexpand code
import { Timeline } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>
);

export default App;
  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Technical testing 2015-09-01
  • Recording...

When the timeline is incomplete and ongoing, put a ghost node at last. Set pending as truthy value to enable displaying pending item. You can customize the pending content by passing a React Element. Meanwhile, pendingDot={a React Element} is used to customize the dot of the pending item. reverse={true} is used for reversing nodes.

expand codeexpand code
import { Button, Timeline } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [reverse, setReverse] = useState(false);

  const handleClick = () => {
    setReverse(!reverse);
  };

  return (
    <div>
      <Timeline pending="Recording..." reverse={reverse}>
        <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
        <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
        <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
      </Timeline>
      <Button type="primary" style={{ marginTop: 16 }} onClick={handleClick}>
        Toggle Reverse
      </Button>
    </div>
  );
};

export default App;
  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Technical testing 2015-09-01
  • Network problems being solved 2015-09-01

Set a node as an icon or other custom element.

expand codeexpand code
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Timeline>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined className="timeline-clock-icon" />} color="red">
      Technical testing 2015-09-01
    </Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>
);

export default App;
.timeline-clock-icon {
  font-size: 16px;
}

[data-theme='compact'] .timeline-clock-icon {
  font-size: 14px;
}
  • 2015-09-01
    Create a services
  • 2015-09-01 09:12:11
    Solve initial network problems
  • Technical testing
  • 2015-09-01 09:12:11
    Network problems being solved

Use label show time alone.

expand codeexpand code
import type { RadioChangeEvent } from 'antd';
import { Radio, Timeline } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('left');

  const onChange = (e: RadioChangeEvent) => {
    setMode(e.target.value);
  };

  return (
    <>
      <Radio.Group
        onChange={onChange}
        value={mode}
        style={{
          marginBottom: 20,
        }}
      >
        <Radio value="left">Left</Radio>
        <Radio value="right">Right</Radio>
        <Radio value="alternate">Alternate</Radio>
      </Radio.Group>
      <Timeline mode={mode}>
        <Timeline.Item label="2015-09-01">Create a services</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Solve initial network problems</Timeline.Item>
        <Timeline.Item>Technical testing</Timeline.Item>
        <Timeline.Item label="2015-09-01 09:12:11">Network problems being solved</Timeline.Item>
      </Timeline>
    </>
  );
};

export default App;
  • Create a services site 2015-09-01
  • Create a services site 2015-09-01
  • Solve initial network problems 1

    Solve initial network problems 2

    Solve initial network problems 3 2015-09-01

  • Technical testing 1

    Technical testing 2

    Technical testing 3 2015-09-01

  • Technical testing 1

    Technical testing 2

    Technical testing 3 2015-09-01

  • Technical testing 1

    Technical testing 2

    Technical testing 3 2015-09-01

  • Custom color testing

Set the color of circles. green means completed or success status, red means warning or error, and blue means ongoing or other default status, gray for unfinished or disabled status.

expand codeexpand code
import { SmileOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Timeline>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="red">
      <p>Solve initial network problems 1</p>
      <p>Solve initial network problems 2</p>
      <p>Solve initial network problems 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item>
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item color="gray">
      <p>Technical testing 1</p>
      <p>Technical testing 2</p>
      <p>Technical testing 3 2015-09-01</p>
    </Timeline.Item>
    <Timeline.Item color="#00CCFF" dot={<SmileOutlined />}>
      <p>Custom color testing</p>
    </Timeline.Item>
  </Timeline>
);

export default App;
  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
  • Network problems being solved 2015-09-01
  • Create a services site 2015-09-01
  • Technical testing 2015-09-01

Alternate timeline.

expand codeexpand code
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Timeline mode="alternate">
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item color="green">Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
      laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
      beatae vitae dicta sunt explicabo.
    </Timeline.Item>
    <Timeline.Item color="red">Network problems being solved 2015-09-01</Timeline.Item>
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />}>
      Technical testing 2015-09-01
    </Timeline.Item>
  </Timeline>
);

export default App;
  • Create a services site 2015-09-01
  • Solve initial network problems 2015-09-01
  • Technical testing 2015-09-01
  • Network problems being solved 2015-09-01

Right alternate timeline.

expand codeexpand code
import { ClockCircleOutlined } from '@ant-design/icons';
import { Timeline } from 'antd';
import React from 'react';

const App: React.FC = () => (
  <Timeline mode="right">
    <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
    <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
    <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color="red">
      Technical testing 2015-09-01
    </Timeline.Item>
    <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
  </Timeline>
);

export default App;

API#

<Timeline>
  <Timeline.Item>step1 2015-09-01</Timeline.Item>
  <Timeline.Item>step2 2015-09-01</Timeline.Item>
  <Timeline.Item>step3 2015-09-01</Timeline.Item>
  <Timeline.Item>step4 2015-09-01</Timeline.Item>
</Timeline>

Timeline#

Timeline

PropertyDescriptionTypeDefault
modeBy sending alternate the timeline will distribute the nodes to the left and rightleft | alternate | right-
pendingSet the last ghost node's existence or its contentboolean | ReactNodefalse
pendingDotSet the dot of the last ghost node when pending is trueReactNode<LoadingOutlined />
reverseWhether reverse nodes or notbooleanfalse

Timeline.Item#

Node of timeline

PropertyDescriptionTypeDefault
colorSet the circle's color to blue, red, green, gray or other custom colorsstringblue
dotCustomize timeline dotReactNode-
labelSet the labelReactNode-
positionCustomize node positionleft | right-
TagTooltip