Timeline JAVASCRIPT UI Component API

Timeline Javascript API

Class

Timeline

Timeline

Displays a timeline with events.

Selector

smart-timeline

Properties

AautoWidth

Sets or gets whether the Timeline is with auto width in horizontal mode.

Ccollapsible

Sets or gets whether the items can be collapsed.

Ddisabled

Sets or gets whether the Timeline is disabled.

Hhorizontal

Sets or gets whether the Timeline is horizontal.

Pposition

Sets or gets position.

The possible values are 'near', 'far' and 'both'.
DdataSource

Sets or gets the items. Each item should be an object. The object has the following properties: date: date, description: string, subtitle: string, css: string, dotCSS: string, title: string and icon: string. Example: [{ date: 'May 15, 2024', description: 'Flight: Reserving airline tickets', subtitle: 'May 15, 2024', title: 'Flight Reservation', icon: 'material-icons flight', dotCSS: '' }]

Methods

Rrender

Re-renders the timeline.

Properties

autoWidthboolean

Sets or gets whether the Timeline is with auto width in horizontal mode.

Default value

false

Example

Set the autoWidth property. 

 <smart-timeline auto-width></smart-timeline>

Set the autoWidth property by using the HTML Element's instance. 

 const timeline = document.querySelector('smart-timeline');
 timeline.autoWidth = false;

Get the autoWidth property. 

 const timeline = document.querySelector('smart-timeline');
 let autoWidth = timeline.autoWidth;

collapsibleboolean

Sets or gets whether the items can be collapsed.

Default value

true

Example

Set the collapsible property. 

 <smart-timeline collapsible></smart-timeline>

Set the collapsible property by using the HTML Element's instance. 

 const timeline = document.querySelector('smart-timeline');
 timeline.collapsible = false;

Get the collapsible property. 

 const timeline = document.querySelector('smart-timeline');
 let collapsible = timeline.collapsible;

disabledboolean

Sets or gets whether the Timeline is disabled.

Default value

false

Example

Set the disabled property. 

 <smart-timeline disabled></smart-timeline>

Set the disabled property by using the HTML Element's instance. 

 const timeline = document.querySelector('smart-timeline');
 timeline.disabled = false;

Get the disabled property. 

 const timeline = document.querySelector('smart-timeline');
 let disabled = timeline.disabled;

horizontalboolean

Sets or gets whether the Timeline is horizontal.

Default value

false

Example

Set the horizontal property. 

 <smart-timeline horizontal></smart-timeline>

Set the horizontal property by using the HTML Element's instance. 

 const timeline = document.querySelector('smart-timeline');
 timeline.horizontal = false;

Get the horizontal property. 

 const timeline = document.querySelector('smart-timeline');
 let horizontal = timeline.horizontal;

positionstring

Sets or gets position.

The possible values are 'near', 'far' and 'both'.

Default value

"both"

Example

Set the position property. 

 <smart-timeline position='far'></smart-timeline>

Set the position property by using the HTML Element's instance. 

 const timeline = document.querySelector('smart-timeline');
 timeline.position = 'both';

Get the position property. 

 const timeline = document.querySelector('smart-timeline');
 let position = timeline.position;

dataSource[]

Sets or gets the items. Each item should be an object. The object has the following properties: date: date, description: string, subtitle: string, css: string, dotCSS: string, title: string and icon: string. Example: [{ date: 'May 15, 2024', description: 'Flight: Reserving airline tickets', subtitle: 'May 15, 2024', title: 'Flight Reservation', icon: 'material-icons flight', dotCSS: '' }]

Default value

[]

Methods

render(): void

Re-renders the timeline.


Invoke the render method.

const timeline = document.querySelector('smart-timeline');
const result = timeline.render("","");