New to KendoReact? Start a free 30-day trial

TimelineProps

Interface

Definition

Package:@progress/kendo-react-layout

Properties

alterMode?

boolean

Renders TimelineEvents alternatingly on both sides of the axis.

Default:

false

Example:

jsx

<Timeline alterMode={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

className?

string

Specifies the CSS class names which are set to the Timeline.

Example:

jsx

<Timeline className="custom-class" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

collapsibleEvents?

boolean

Specifies whether the TimelineEvent cards can be expanded or collapsed.

Default:

false

Example:

jsx

<Timeline collapsibleEvents={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

dateFormat?

string

The date format for displaying the TimelineEvent date.

Default:

MMM dd, yyyy

Example:

jsx

<Timeline dateFormat="dd/MM/yyyy" events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

events

TimelineEventProps[]

The collection of TimelineEvents to be displayed in the Timeline.

Example:

jsx

<Timeline events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

horizontal?

boolean

Switches the Timeline to horizontal mode.

Default:

false

Example:

jsx

<Timeline horizontal={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

navigatable?

boolean

Enables keyboard navigation for the Timeline.

Default:

false

Example:

jsx

<Timeline navigatable={true} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

onActionClick?

(event: EventDataProps) => void

Fires when a TimelineEvent card action is clicked.

Parameters:eventEventDataProps

Example:

jsx

<Timeline onActionClick={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

onChange?

(event: EventDataProps) => void

Fires when a TimelineEvent card is toggled.

Parameters:eventEventDataProps

Example:

jsx

<Timeline onChange={(event) => console.log(event)} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />

transitionDuration?

number

Specifies the time for sliding to the next TimelineEvent in horizontal mode and collapsing the TimelineEvent in vertical mode. The default value are:

300ms for horizontal
400ms for vertical

Example:

jsx

<Timeline transitionDuration={500} events={[{ title: 'Event 1', date: new Date(), description: 'Details' }]} />