() => {return <Timeline events={data.simpleEvents} variant="simple" />;};
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "simple" | "complex" | "simple" | The variant prop determines the complexity of the timeline. If the variant is set to "simple", the timeline will only display the title of the event. If the variant is set to "complex", the timeline will display the title, description, time frame, and button of the event. |
| position | "left" | "right" | "right" | An extension of the position prop from MUI. In MUI, the position prop determines the position of the timeline content relative to the center line. In prism, it also determines whether the entire timeline is left aligned or right aligned. The timeline will be aligned opposite of where the content is positioned. If position is right, the content will appear on the right side of the center line, but the timeline itself will hug the left side of the div. |
| events | { title: string, description?: string, timeFrame?: number, timeFrameUnit?: string, button?: () => JSX.Element, timelineItemFooter?: () => JSX.Element, customFooter?: () => JSX.Element, position?: Position, dotVariant?: "filled" | "outlined", tags?: { title: string, infoText?:string }[]}[] | An array of events to be displayed on the timeline. An events array is required. Properties that return JSX.Element can return whatever the developer requires. timelineItemFooter will render just below the tags container but still within the borders of the timeline item, while customFooter spans the entire left to right of the timeline parent container, below the bottom border of each timeline item. |
() => {return <Timeline events={data.events} position="right" variant="complex" />;};
() => {return <Timeline events={data.events} position="left" variant="complex" />;};
() => {return <Timeline events={data.simpleOutlinedEvents} position="right" variant="simple" />;};