smart-html-elements

Timeline — Smart UI JavaScript API

On this page + Quick start

Quick start · JavaScript

Complete starter source per framework. Run the scaffold/install command first, then replace the listed files with the full code below.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Timeline - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-timeline id="demo-timeline"></smart-timeline>

  <script type="module">
    import './node_modules/smart-webcomponents/source/modules/smart.timeline.js';

    const el = document.getElementById('demo-timeline');
    if (el) {

      el.value = 'Quick start value';

      el.addEventListener('change', (event) => console.log('change:', event.detail || event));
    }
  </script>
</body>
</html>

For AI tooling

Developer Quick Reference

Component: Timeline Framework: JavaScript Selector: smart-timeline

API counts: 6 properties, 1 methods, 0 events

Common properties: 0, 1, 2, 3, 4, 5

Common methods: render()

Common events: n/a

Module hint: smart-webcomponents/source/modules/smart.timeline.js

Displays a timeline with events.

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.

Default value

false

Examples

Markup and runtime examples for autoWidth:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

collapsibleSpecifies 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.boolean

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.

Default value

true

Examples

Markup and runtime examples for collapsible:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

dataSourceManages 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.[]

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.

Default value

[]

disabledDetermines 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.boolean

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.

Default value

false

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

horizontalControls 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.boolean

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.

Default value

false

Try a demo showcasing the horizontal property.

Examples

Markup and runtime examples for horizontal:

HTML attribute:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

positionSpecifies 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.string

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.

Default value

"both"

Examples

Markup and runtime examples for position:

HTML:

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

Vanilla JS — prefer #id if multiple widgets exist on the page:

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

Read the current value:

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

Methods

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

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

On the custom element in the DOM (narrow the selector, e.g. to #my-timeline, if you host multiple widgets):

document.querySelector('smart-timeline')?.render("","");