Show · Timeline
Timeline
Timeline component is used to display a series of information vertically.

Demos

How to import

Basic Usage

Type

You can use type to set the type of a time node, using one of: default,ongoing, success, warning, Error. The corresponding dot will have a corresponding color.

Custom node

You can use dot to customize icon, color to customize color or pass in children with style.

Timeline Position

Use mode to set the position of the timeline, using one of: left, center, alternate, right.

Left (default)

Center

Alternate

DataSource

API reference

TimeLine

PropertiesInstructiontypeDefault
classNameClass namestring-
modeThe relative Position of the timeline and contentleft|right|center|alternateleft
styleInline styleCSSProperties-
dataSourceDataSource array for Timeline v>=1.16.0, Support content attribute and all attributes of TimeLine.Itemarray-

TimeLine.Item

PropertiesInstructiontypeDefaultVersion
classNameClass namestring--
colorColor of dotstring--
dotCustom dotReact Node--
extraCustom extra contentReact Node--
positionCustom node location to override TimeLine's mode settingleft|right--
styleInline styleCSSProperties--
timeTime valuestring--
typePattern of dotdefault|ongoing|success|warning|errordefault-
onClickClick event(e: MouseEvent) => void-2.2.0

Accessibility

ARIA

  • The element of dot and line between dots in TimeLine have a aria-hidden, indicates that they do not support Accessibility API.
  • Supporting API aria-label to specify TimeLine's label.

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED