logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.12.1
  • Components Overview
  • General
    • Button
    • FloatButtonNew
    • Icon
    • Typography
  • Layout
    • Divider
    • FlexNew
    • Grid
    • Layout
    • Space
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPickerNew
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCodeNew
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • TourNew
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
  • Other
    • Affix
    • AppNew
    • ConfigProvider
When To Use
Examples
Basic
Color
Last node and Reversing
Alternate
Custom
Right alternate
Label
API
Timeline
Items
Design Token

Timeline

  • TagTooltip

    Resources

    Ant Design Charts
    Ant Design Pro
    Ant Design Pro Components
    Ant Design Mobile
    Ant Design Mini
    Ant Design Landing-Landing Templates
    Scaffolds-Scaffold Market
    Umi-React Application Framework
    dumi-Component doc generator
    qiankun-Micro-Frontends Framework
    ahooks-React Hooks Library
    Ant Motion-Motion Solution
    China Mirror 🇨🇳

    Community

    Awesome Ant Design
    Medium
    Twitter
    yuqueAnt Design in YuQue
    Ant Design in Zhihu
    Experience Cloud Blog
    seeconfSEE Conf-Experience Tech Conference

    Help

    GitHub
    Change Log
    FAQ
    Bug Report
    Issues
    Discussions
    StackOverflow
    SegmentFault

    Ant XTechMore Products

    yuqueYuQue-Document Collaboration Platform
    AntVAntV-Data Visualization
    EggEgg-Enterprise Node.js Framework
    kitchenKitchen-Sketch Toolkit
    GalaceanGalacean-Interactive Graphics Solution
    xtechAnt Financial Experience Tech
    Theme Editor
    Made with ❤ by
    Ant Group and Ant Design Community

    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.
    After version 5.2.0, we provide a simpler usage <Timeline items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0.
    // works when >=5.2.0, recommended ✅
    const items = [{ children: 'sample', label: 'sample' }];
    return <Timeline items={items} />;
    // works when <5.2.0, deprecated when >=5.2.0 🙅🏻‍♀️
    return (
    <Timeline onChange={onChange}>
    <Timeline.Item>Sample</Timeline.Item>
    </Timeline>
    );

    Examples

    API

    Common props ref:Common props

    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
    itemsEach node of timelineItems[]5.2.0

    Items

    Node of timeline.

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

    Design Token

    Component TokenHow to use?

    Token NameDescriptionTypeDefault Value
    dotBgBackground color of nodestring#ffffff
    dotBorderWidthBorder width of nodenumber2
    itemPaddingBottomBottom padding of itemnumber20
    tailColorLine colorstringrgba(5, 5, 5, 0.06)
    tailWidthLine widthnumber2

    Global TokenHow to use?

    • 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

    Basic timeline.

    expand codeexpand code
    • Create a services site 2015-09-01
    • Solve initial network problems 2015-09-01
    • Technical testing 2015-09-01
    • Recording...
    Last node and Reversing

    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
    • 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
    Custom

    Set a node as an icon or other custom element.

    expand codeexpand code
    • 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
    Label

    Use label show time alone.

    expand codeexpand code
    • 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

    Color

    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
    • 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

    Alternate timeline.

    expand codeexpand code
    • 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

    Right alternate timeline.

    expand codeexpand code