Timeline
Timeline lists events in order. Each TimelineItem has a marker, an optional title, its content and a time, and a line runs from each marker to the next.
Demos
Basic
type colors the marker: default, info, success, warning or error. The last item has no line after it.
Size
Item placement
itemPlacement="right" puts the markers on the right and aligns the text to them.
Horizontal
horizontal lays the items out in a row. lineType="dashed" draws a dashed line to the next item.
Icon and color
icon replaces the circle and takes the type’s color; iconSize sets the marker size for the whole timeline. color gives one item a custom color: take it from the Raft palette so it follows the theme.
Timeline Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
horizontal | boolean | false | Lays the items out in a row. | Unreleased |
iconSize | number | undefined | Marker size in px. Defaults to the theme’s size for size. | Unreleased |
itemPlacement | left | right | left | Which side the markers sit on. Ignored when horizontal. | Unreleased |
size | medium | large | medium | Marker and text size. | Unreleased |
TimelineItem Props
| Name | Type | Default | Description | Version |
|---|---|---|---|---|
type | default | info | success | warning | error | default | Marker color role. | Unreleased |
title | ReactNode | undefined | Title above the content. | Unreleased |
content | ReactNode | undefined | The item’s body; children override it. | Unreleased |
time | ReactNode | undefined | Shown under the content. | Unreleased |
icon | ReactNode | undefined | Replaces the circle marker. | Unreleased |
color | string | undefined | A custom marker color. | Unreleased |
lineType | default | dashed | default | The line to the next item. | Unreleased |
title and time take any ReactNode.