Properties

activeItemIndex

This property sets the default active timeline item that should be displayed when the component loads.

allowDynamicUpdate

This property allows timeline items to be updated dynamically.

borderLessCards

By enabling this property, the border and shadow on the timeline cards can be removed.

cardHeight

This property sets the minimum height of the timeline card.

cardLess

This property disables the display of timeline cards in both horizontal and vertical modes.

cardPositionHorizontal

This property positions the timeline card in horizontal mode. The value can be either TOP or BOTTOM.

cardDetailedText

Sets the text content for the timeline card. Accepts a string or an array of strings, where the string can be a HTML markup.

cardWidth

This property sets the maximum width of the timeline card.

disableAutoScrollOnClick

This property disables the timeline from auto-scrolling when a timeline card is clicked.

disableClickOnCircle

This property disables click action on the circular points.

disableNavOnKey

This property disables keyboard navigation.

enableOutline

Enabling this property displays the outline menu on VERTICAL and VERTICAL_ALTERNATING modes.

flipLayout

This property flips the layout to right-to-left (RTL).

hideControls

Enabling this property hides the navigation controls.

itemWidth

This property sets the width of the timeline section in HORIZONTAL mode.

items

This property contains a collection of Timeline Item Models.

lineWidth

This property is used to customize the width of the timeline track line.

mode

This property sets the mode of the timeline component. The value can be HORIZONTAL, VERTICAL, or VERTICAL_ALTERNATING.

onItemSelected

This property is a callback function invoked on item selection. It passes all of the data pertinent to the item.

onScrollEnd

This property is used to detect the end of the timeline using the onScrollEnd callback function.

scrollable

This property makes the timeline scrollable in VERTICAL and VERTICAL_ALTERNATING modes.

showAllCardsHorizontal

Enabling this property in horizontal mode displays all the cards instead of only the active one.

slideItemDuration

This property sets the duration (in ms) for which the timeline card is active during a slideshow.

slideShow

Enabling this property displays the slideshow control.

theme

This property is used to customize the colors of the timeline component.

timelineCircleDimension

This property sets the dimensions of the circular points on the timeline.

useReadMore

Enabling this property displays the "read more" button, which is only available if the text content on the card is taller than the card itself.

fontSizes

This property is used to customize the font sizes.

buttonTexts

This property is used to customize the alt text for all buttons.

highlightCardsOnHover

Enabling this property highlights the timeline card on hover.

disableInteraction

Enabling this property disables all interactions with the timeline.

parseDetailsAsHTML

Enabling this property parses the details text as HTML.

toolbarPosition

This property sets the position of the toolbar. The value can be either TOP or BOTTOM.

enableBreakPoint

Enabling this property enables the breakpoint for the timeline. This only applies for the vertical and vertical_alternating mode.

responsiveBreakPoint

Responsive breakpoint in pixels. This only applies for the vertical and vertical_alternating mode. This works only if the enableBreakPoint is set to true.

enableLayoutSwitch

Enabling this property enables the layout switcher for the timeline. Switches the vertical timeline to vertical_alternating and vice versa. Switches the horizontal timeline to horizontal_all and vice versa.

enableQuickJump

Enabling this property enables the quick jump feature for the timeline. When enabled, the user can jump to a specific timeline item.