Data Display

TimelineItem

Compose one event row inside a Timeline using content slots.

TimelineItem renders one event row inside a Timeline. Fill its content slots to compose an event without supplying a TimelineEvent record.

Import

TSX

import { TimelineItem } from "@solarius/onset";

TimelineItemProps props

Prop	Type	Default	Description
`title`	`ReactNode`	—	The headline.
`meta`	`ReactNode`	—	Monospace source text beside the title.
`time`	`ReactNode`	—	Timestamp content positioned according to the enclosing Timeline.
`description`	`ReactNode`	—	Secondary content below the title.
`children`	`ReactNode`	—	The description slot under another name, for the composed path. description wins if both are given.
`detail`	`ReactNode`	—	Framed detail content below the row.
`actions`	`ReactNode`	—	Right-aligned controls on the title row.
`tone`	`ToneProp`	—	Colors this row's marker and its halo, and the detail block's edge.
`icon`	`ReactNode`	—	Glyph inside the marker, in place of the dot.
`marker`	`ReactNode`	—	Replaces the event marker.
`content`	`ReactNode`	—	Replaces the row's slots entirely, keeping the rail, the state and the click. What Timeline's renderItem arrives as.
`active`	`boolean`	—	Applies active styling with a tinted background and emphasized marker.
`dashed`	`boolean`	—	Draws the run of line below this row dashed.
`onClick`	`(event: MouseEvent<HTMLElement>) => void`	—	Makes the row a button. Lands on the row, not the <li>.

TimelineItem