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
Right
DataSource
API reference
TimeLine
Properties | Instruction | type | Default |
---|---|---|---|
className | Class name | string | - |
mode | The relative Position of the timeline and content | left |right |center |alternate | left |
style | Inline style | CSSProperties | - |
dataSource | DataSource array for Timeline v>=1.16.0, Support content attribute and all attributes of TimeLine.Item | array | - |
TimeLine.Item
Properties | Instruction | type | Default | Version |
---|---|---|---|---|
className | Class name | string | - | - |
color | Color of dot | string | - | - |
dot | Custom dot | React Node | - | - |
extra | Custom extra content | React Node | - | - |
position | Custom node location to override TimeLine's mode setting | left |right | - | - |
style | Inline style | CSSProperties | - | - |
time | Time value | string | - | - |
type | Pattern of dot | default |ongoing |success |warning |error | default | - |
onClick | Click 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.