Show chronological stages and milestones.
import { Timeline } from '@vrum/ui';
import { TimelineItem } from '@vrum/ui';
<Timeline>
<TimelineItem title="Discovery" date="September 12" status="completed" /><TimelineItem title="Prototype review" date="October 9" status="current"><p>Review the interaction patterns with the team.</p></TimelineItem><TimelineItem title="Release" date="October 20" status="upcoming" kind="milestone" />
</Timeline>| Prop | Type | Default | Description |
|---|---|---|---|
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLOListElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLOListElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLOListElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLOListElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLOListElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLOListElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLOListElement> | none | on select configuration. |
| Prop | Type | Default | Description |
|---|---|---|---|
status | "completed" | "current" | "upcoming" | "upcoming" | status configuration. |
title* | string | none | Content heading. |
date | string | none | date configuration. |
kind | "stage" | "milestone" | "stage" | kind configuration. |
value | string | number | readonly string[] | none | Controlled value. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLLIElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLLIElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLLIElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLLIElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLLIElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLLIElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLLIElement> | none | on select configuration. |
Review the interaction patterns with the team.