Demos
timeline items:
Timeline with multipleWe can pass down a list of timeline items as a variable to data
.
It's also possible to pass down timeline items as children in Multiple Timeline.
- Completed event10. september 2021
- Current eventAdditional information about this step if needed.
- Upcoming event
timeline items passed down as children:
Timeline with multiplePassing down timeline items as children
- Completed event10. september 2021
- Current eventAdditional information about this step if needed.
- Upcoming event
timeline item:
Examples of Timelines with onetimeline item:
Completed- Completed event
timeline item:
Current- Current event
timeline item:
Upcoming- Upcoming event
state
of timeline item:
Setting property Property state
changes styling of icon, border, and font of the timeline item
- Completed event10. september 2021Additional information about this step if needed.
- Current event10. september 2021Additional information about this step if needed.
- Upcoming event10. september 2021Additional information about this step if needed.
icon
of timeline items:
Setting property Property icon
is by default set based on the value of state
property, but can be overwritten by passing a icon
, see how to import icons.
See default icons based on value of state
property in documentation for icon
property of the timeline item
- Completed event
- Current event
- Upcoming event
Timeline skeleton:
- Upcoming10. september 2021
- Current11. september 2021
- Completed12. september 2021
Timeline as children skeleton:
- Upcoming10. september 2021
- Current11. september 2021
- Completed11. september 2021
Timeline item skeleton:
- Completed event#110. september 2021
- Completed event#211. september 2021Additional information about this step if needed.
timeline items:
Timeline with multiple completed- Completed event#110. september 2021Additional information about this step if needed.
- Completed event#2Additional information about this step if needed.
- Completed event#310. september 2021
timeline items:
Timeline with multiple current- Current event#110. september 2021Additional information about this step if needed.
- Current event#2Additional information about this step if needed.
- Current event#310. september 2021
timeline items:
Timeline with multiple upcoming- Upcoming event#110. september 2021Additional information about this step if needed.
- Upcoming event#2Additional information about this step if needed.
- Upcoming event#310. september 2021