Timeline Javascript API

Class

Timeline

Displays a timeline with events.

Selector

smart-timeline

Properties

Methods

Properties

autoWidthboolean

Specifies or retrieves whether the Timeline component automatically adjusts its width to fit its content when displayed in horizontal mode. When enabled, the Timeline will expand or contract its width based on its items, rather than using a fixed or predefined width.

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

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

 timeline.autoWidth = false;

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

 let autoWidth = timeline.autoWidth;

collapsibleboolean

Specifies whether the items are collapsible. When set to true, users can expand or collapse the items to show or hide their contents. When set to false, all items remain expanded and cannot be collapsed. This property can be used to retrieve the current state or to enable or disable the collapse functionality.

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

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

 timeline.collapsible = false;

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

 let collapsible = timeline.collapsible;

disabledboolean

Determines whether the Timeline component is enabled or disabled. When set to true, the Timeline is disabled and user interaction is prevented. When set to false, the Timeline is enabled and fully interactive. This property can be used to programmatically check the current state or update the disabled state of the Timeline.

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

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

 timeline.disabled = false;

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

 let disabled = timeline.disabled;

horizontalboolean

Controls or retrieves the orientation of the Timeline, determining whether it is displayed horizontally. When set to true, the Timeline is laid out horizontally; when false, it is displayed vertically.

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

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

 timeline.horizontal = false;

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

 let horizontal = timeline.horizontal;

positionstring

Specifies or retrieves the position setting. Acceptable values are:

- '"near"': Aligns the element or feature near the reference point.
- '"far"': Aligns the element or feature farther from the reference point.
- '"both"': Applies alignment to both the near and far positions.

Use this property to control the placement of the element relative to its container or another reference within the layout.

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

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

 timeline.position = 'both';

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

 let position = timeline.position;

dataSource[]

Manages the collection of items by setting or retrieving them. Each item must be an object containing the following properties:

- 'date' ('string'): The relevant date for the item, typically in a human-readable format (e.g., ''May 15, 2024'').
- 'description' ('string'): A detailed explanation or summary associated with the item.
- 'subtitle' ('string'): Additional secondary text, often used to supplement the main title or date information.
- 'title' ('string'): The main heading or name for the item.
- 'css' ('string'): Custom CSS class or styles applied to the item for additional styling (can be an empty string if not used).
- 'dotCSS' ('string'): Custom CSS class or styles specifically for the item's dot indicator, if applicable (can be an empty string if not used).
- 'icon' ('string'): The icon class or identifier, such as a Material Icon class, to visually represent the item.

'Example:'
'''json
[
{
"date": "May 15, 2024",
"description": "Flight: Reserving airline tickets",
"subtitle": "May 15, 2024",
"title": "Flight Reservation",
"css": "",
"dotCSS": "",
"icon": "material-icons flight"
}
]
'''
Use this structure to ensure consistent formatting and styling when displaying each item in your application.

Methods

render(): void

Triggers a re-render of the timeline component, updating its display to reflect any changes in data or configuration.

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