Timeline
Display list of events in chronological order
Import
Source
Docs
Package
Usage
New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago
Line and bullet props
Control timeline appearance with the following props:
active
– index of current active element, all elements before this index will be highlighted withcolor
color
– color from theme that should be used to highlight active items, defaults totheme.primaryColor
lineWidth
– controls line width and bullet borderbulletSize
– bullet width, height and border-radiusalign
– defines line and bullets position relative to content, also sets text-align
New branch
You've created new branch fix-notifications from master
2 hours ago
Commits
You've pushed 23 commits to fix-notifications branch
52 minutes ago
Pull request
You've submitted a pull request Fix incorrect notification message (#187)
34 minutes ago
Code review
Robert Gluesticker left a code review on your pull request
12 minutes ago
Color
Shades
Radius
xs
sm
md
lg
xl
Align
Bullet as React node
Default bullet
Default bullet without anything
Avatar
Timeline bullet as avatar image
Icon
Timeline bullet as icon
ThemeIcon
Timeline bullet as ThemeIcon component
Wrap Timeline.Item
Timeline
component relies on Timeline.Item
order. Wrapping Timeline.Item
is not supported,
Instead you will need to use different approaches:
Timeline component props
Name | Type | Description |
---|---|---|
active | number | Index of active element |
align | "left" | "right" | Timeline alignment |
bulletSize | string | number | Bullet size |
children * | ReactNode | <Timeline.Item /> components only |
color | MantineColor | Active color from theme |
lineWidth | string | number | Line width |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, "xl" by default |
reverseActive | boolean | Reverse active direction without reversing items |
TimelineItem component props
Name | Type | Description |
---|---|---|
active | boolean | Should this item be highlighted, controlled by Timeline component |
align | "left" | "right" | Line and bullet position relative to item content, controlled by Timeline component |
bullet | ReactNode | React node that should be rendered inside bullet – icon, image, avatar, etc. |
bulletSize | number | Bullet width, height and border-radius, controlled by Timeline component |
children | ReactNode | React node that will be rendered after title |
color | MantineColor | Highlight color for active item |
lineActive | boolean | Should line of this item be highlighted, controlled by Timeline component |
lineVariant | "dashed" | "dotted" | "solid" | Line border style |
lineWidth | number | Line border width, controlled by Timeline component |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, "xl" by default |
title | ReactNode | Item title, rendered next to bullet |
Timeline component Styles API
Name | Static selector | Description |
---|---|---|
root | .asuikit-Timeline-root | Root element |
item | .asuikit-Timeline-item | Item root element |
itemBody | .asuikit-Timeline-itemBody | Item body, wraps title and content |
itemTitle | .asuikit-Timeline-itemTitle | Item title, controlled by title prop |
itemContent | .asuikit-Timeline-itemContent | Item content, controlled by children prop |
itemBullet | .asuikit-Timeline-itemBullet | Item bullet |