Timeline
Vertical display timeline.
Import
import { Timeline } from 'rsuite';
// or
import Timeline from 'rsuite/Timeline';Examples
Basic
Custom active item
By default the last Timeline.Item is marked as active (with a blue dot).
You could change this behavior by providing a function for isItemActive prop.
Two preset values are provided for convenience.
Timeline.ACTIVE_FIRSTMark the first item as activeTimeline.ACTIVE_LASTMark the last item as active (the default behavior)
Custom alignment
Custom time
Endless
Custom Icon
Props
<Timeline>
| Property | Type (Default) |
Description |
|---|---|---|
| align | 'left' | 'right' | 'alternate' ('left') |
Timeline content alignment |
| as | ElementType ('ul') |
You can use a custom element type for this component |
| children * | Timeline.Item[] | The content of the component |
| classPrefix | string ('timeline') |
The prefix of the component CSS class |
| endless | boolean | Timeline endless |
| isItemActive | (index: number, totalItemsCount: number) => boolean | Determine whether an item should be marked as active |
<Timeline.Item>
| Property | Type (Default) |
Description |
|---|---|---|
| children * | ReactNode | The content of the component |
| classPrefix | string ('timeline-item') |
The prefix of the component CSS class |
| as | ElementType ('li') |
You can use a custom element type for this component |
| dot | ReactNode | Customizing the Timeline item |
| time | ReactNode | Customizing the Timeline time |