Tabs JAVASCRIPT UI Component API

Tabs Javascript API

Tabs

Tabs organize content across different screens, data sets, and other interactions. Tabs can be paired with components like top app bars. Tabs can be displayed horizontally or vertically.

Determines whether the "Add new tab" button (typically represented by a plus sign "+") is visible in the user interface. When set to true, the button is displayed, allowing users to add new tabs; when set to false, the button is hidden. This property can be used to both retrieve the current visibility status or control the display of the button.

Default value

false

Example

Set the addNewTab property.

 <smart-tabs add-new-tab></smart-tabs>

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

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

 tabs.addNewTab = false;

Get the addNewTab property.

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

 let addNewTab = tabs.addNewTab;

allowToggleboolean

Enables toggle functionality for tab selection. When set to true, the selectedIndex property can be assigned a value of null, indicating that no tab is currently selected. This allows users to deselect any active tab, leaving the tab interface with no selected tab.

Default value

false

Example

Set the allowToggle property.

 <smart-tabs allow-toggle></smart-tabs>

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

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

 tabs.allowToggle = false;

Get the allowToggle property.

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

 let allowToggle = tabs.allowToggle;

animation"none" | "simple" | "advanced"

Configures or retrieves the current animation mode. When set to 'none', all animations are disabled, resulting in immediate transitions without animation effects. Use other valid values to enable or customize animation behavior as needed.

Allowed Values

"none" - animation is disabled
"simple" - ripple animation is disabled
"advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property.

 <smart-tabs animation='none'></smart-tabs>

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

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

 tabs.animation = 'simple';

Get the animation property.

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

 let animation = tabs.animation;

closeButtonMode"default" | "selected"

Configures or retrieves the display mode of the close button. This property determines how the close button appears or behaves within the user interface, such as being always visible, visible on hover, or hidden.

Default value

"default"

Example

Set the closeButtonMode property.

 <smart-tabs close-button-mode='selected'></smart-tabs>

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

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

 tabs.closeButtonMode = 'default';

Get the closeButtonMode property.

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

 let closeButtonMode = tabs.closeButtonMode;

closeButtonsboolean

Controls whether close buttons are shown in the user interface. Setting this property to true will display close buttons; setting it to false will hide them. You can also retrieve the current state to determine if close buttons are visible.

Default value

false

Example

Set the closeButtons property.

 <smart-tabs close-buttons></smart-tabs>

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

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

 tabs.closeButtons = false;

Get the closeButtons property.

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

 let closeButtons = tabs.closeButtons;

collapsedboolean

Determines whether the content section of the Tabs component is expanded or collapsed. When set to 'true', the content section is hidden (collapsed); when set to 'false', the content is visible (expanded). This property can be used to programmatically control or retrieve the collapsed state of the Tabs content.

Default value

false

Example

Set the collapsed property.

 <smart-tabs collapsed></smart-tabs>

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

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

 tabs.collapsed = false;

Get the collapsed property.

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

 let collapsed = tabs.collapsed;

collapsibleboolean

Controls whether the collapsible functionality is active, allowing content sections to expand or collapse when enabled. When disabled, all content sections remain fully expanded and cannot be collapsed.

Default value

false

Example

Set the collapsible property.

 <smart-tabs collapsible></smart-tabs>

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

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

 tabs.collapsible = false;

Get the collapsible property.

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

 let collapsible = tabs.collapsible;

dataSource{label: string, content: any, index: number, selected: boolean, labelSize: number, closeButtonsHidden: boolean}[] | TabItem[]

Specifies the data source from which the content for each tab will be retrieved and displayed. This property defines what data will populate the individual tabs when the Tabs component is rendered.

Example

Set the dataSource property.

 <smart-tabs data-source='[{ "label": "Item 1", "content": "content 1" }, { "label": "Item 2", "content": "content 2" }, { "label": "Item 3", "content": "content 3", "selected": true }]'></smart-tabs>

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

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

 tabs.dataSource = [{ label: 'Item A', content: 'Content A', index: 3 }, { label: 'Item B', labelSize: 100, content: 'Content B', selected: true, index: 2 }, { label: 'Item C', content: 'Content C', index: 1 }, { label: 'Item D', content: 'Content D', index: 0 }];

Get the dataSource property.

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

 let dataSource = tabs.dataSource;

disabledboolean

Determines whether the element is interactive or inactive. When enabled, users can interact with the element; when disabled, the element becomes non-interactive and typically appears visually muted to indicate its inactive state.

Default value

false

Example

Set the disabled property.

 <smart-tabs disabled></smart-tabs>

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

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

 tabs.disabled = false;

Get the disabled property.

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

 let disabled = tabs.disabled;

enableMouseWheelActionboolean

Allows users to scroll horizontally through tab labels in the tab strip using the mouse wheel when the tabs exceed the visible area (i.e., when the tab strip overflows). Enabling this option lets users navigate through hidden tabs by scrolling, while disabling it prevents mouse wheel scrolling in the tab strip.

Default value

false

Example

Set the enableMouseWheelAction property.

 <smart-tabs enable-mouse-wheel-action></smart-tabs>

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

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

 tabs.enableMouseWheelAction = true;

Get the enableMouseWheelAction property.

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

 let enableMouseWheelAction = tabs.enableMouseWheelAction;

unlockKeystring

Sets or retrieves the 'unlockKey' value, a unique key or code required to unlock and gain access to the product’s features or content.

Default value

Example

Set the unlockKey property.

 <smart-tabs unlock-key=''></smart-tabs>

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

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

 tabs.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property.

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

 let unlockKey = tabs.unlockKey;

localestring

Specifies or retrieves the current locale setting, which determines language and regional formatting. This property works together with the messages property to display localized content or translations based on the selected locale.

Default value

"en"

Example

Set the locale property.

 <smart-tabs locale='de'></smart-tabs>

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

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

 tabs.locale = 'fr';

Get the locale property.

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

 let locale = tabs.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module, typically invoked during processes such as language selection, text translation, or locale updates to handle localization-specific behavior.

Example

Set the localizeFormatFunction property.

 <smart-tabs localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-tabs>

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

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

 tabs.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property.

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

 let localizeFormatFunction = tabs.localizeFormatFunction;

messagesobject

Sets or retrieves an object containing key-value pairs of strings used throughout the widget’s interface. These strings can be customized for different languages, enabling localization of the widget’s text content. This property is typically used alongside the locale property to display the widget’s labels, messages, and prompts in the selected language.

Default value

"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.",

"ambiguousIndexes": "smart-tabs: Initially set smart-tab-item indexes are ambiguous and are ignored in favour of the HTML structure.",

"detailsObjectRequired": "smart-tabs: The method \"insert\" requires a details Object to be passed as a second argument.",

"invalidIndex": "smart-tabs: '{{method}}' method accepts an index of type number.",

"referenceNodeNotChild": "smart-tabs: Passed {{argument}} is not part of this smart-tabs element.",

"tabItemRequired": "smart-tabs: The method '{{method}}' requires a \"smart-tab-item\" element to be passed as an argument."

}

Example

Set the messages property.

 <smart-tabs messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss.","ambiguousIndexes":"{{elementType}}: Anfanglich gesetzte smart-tab-item-Indizes sind mehrdeutig und werden zugunsten der HTML-Struktur ignoriert.","detailsObjectRequired":"{{elementType}}: Die Methode \"Einfugen\" erfordert, dass ein Detailobjekt als zweites Argument ubergeben wird.","invalidIndex":"{{elementType}}: '{{method}}' Methode akzeptiert einen Index der Typennummer.","referenceNodeNotChild":"{{elementType}}: Das ubergebene {{argument}} ist nicht Bestandteil dieses smart-tabs-Elements.","tabItemRequired":"{{elementType}}: Die Methode '{{method}}' erfordert, dass ein Element \"smart-tab-item\" als Argument ubergeben wird."}}'></smart-tabs>

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

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

 tabs.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM.","ambiguousIndexes":"smart-tabs: Initially set smart-tab-item indexes are ambiguous and are ignored in favour of the HTML structure.","detailsObjectRequired":"smart-tabs: The method \"insert\" requires a details Object to be passed as a second argument.","invalidIndex":"smart-tabs: '{{method}}' method accepts an index of type number.","referenceNodeNotChild":"smart-tabs: Passed {{argument}} is not part of this smart-tabs element.","tabItemRequired":"smart-tabs: The method '{{method}}' requires a \"smart-tab-item\" element to be passed as an argument."}};

Get the messages property.

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

 let messages = tabs.messages;

namestring

Gets the current name of the widget, or assigns a new name to the widget when provided a value. The name uniquely identifies the widget instance within the application.

Default value

""""

Example

Set the name property.

 <smart-tabs name='Name'></smart-tabs>

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

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

 tabs.name = 'New Name';

Get the name property.

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

 let name = tabs.name;

overflow"auto" | "hidden" | "scroll"

Specifies or retrieves the behavior of the scroll buttons for the Tabs component. This property is relevant only when the tabLayout is set to 'scroll', allowing navigation through tab items that exceed the visible area. Use this option to control how scroll buttons appear and function when there are more tabs than can be displayed at once.

Default value

"auto"

Example

Set the overflow property.

 <smart-tabs overflow='hidden'></smart-tabs>

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

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

 tabs.overflow = 'scroll';

Get the overflow property.

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

 let overflow = tabs.overflow;

readonlyboolean

Prevents all user interactions with the element, making it unresponsive to mouse, keyboard, and touch events such as clicking, dragging, or typing. This means the element cannot be activated, focused, or interacted with in any way by the user.

Default value

false

Example

Set the readonly property.

 <smart-tabs readonly></smart-tabs>

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

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

 tabs.readonly = true;

Get the readonly property.

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

 let readonly = tabs.readonly;

reorderboolean

Controls whether the tab reordering feature is enabled or disabled. When enabled, users can rearrange the tabs by dragging a tab and dropping it onto a new position within the tab list. This allows for dynamic reordering of tabs based on the user's preference. When disabled, tabs remain in their original order and cannot be moved by the user.

Default value

false

Example

Set the reorder property.

 <smart-tabs reorder></smart-tabs>

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

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

 tabs.reorder = true;

Get the reorder property.

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

 let reorder = tabs.reorder;

resizeboolean

Determines whether users can resize tab labels by clicking and dragging them with the mouse. When enabled, this allows tab labels to be adjusted interactively by the user. When disabled, tab label sizes remain fixed and cannot be changed through mouse actions. This setting can be used to either retrieve the current resizability state or update it.

Default value

false

Example

Set the resize property.

 <smart-tabs resize></smart-tabs>

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

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

 tabs.resize = true;

Get the resize property.

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

 let resize = tabs.resize;

rightToLeftboolean

Gets or sets a value that determines whether the element’s text direction is set to right-to-left (RTL) alignment, ensuring proper display and support for languages and locales that read from right to left, such as Arabic or Hebrew.

Default value

false

Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property.

 <smart-tabs right-to-left></smart-tabs>

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

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

 tabs.rightToLeft = true;

Get the rightToLeft property.

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

 let rightToLeft = tabs.rightToLeft;

scrollButtonsPosition"near" | "far" | "both"

Configures or retrieves the position of the scroll buttons within the component, allowing you to specify where the scroll controls appear (for example, at the start, end, or both ends of the scrollable area). This property enables precise placement of navigation controls for improved user experience.

Default value

"both"

Example

Set the scrollButtonsPosition property.

 <smart-tabs scroll-buttons-position='near'></smart-tabs>

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

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

 tabs.scrollButtonsPosition = 'far';

Get the scrollButtonsPosition property.

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

 let scrollButtonsPosition = tabs.scrollButtonsPosition;

scrollMode"paging" | "continuous"

Specifies or retrieves how the tab strip responds when users interact with the scroll buttons. Determines the scrolling behavior—such as the distance the tab strip moves or whether scrolling is smooth or immediate—when the left or right scroll buttons are clicked.

Default value

"paging"

Example

Set the scrollMode property.

 <smart-tabs scroll-mode='continuous'></smart-tabs>

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

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

 tabs.scrollMode = 'paging';

Get the scrollMode property.

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

 let scrollMode = tabs.scrollMode;

selectedIndexnumber | null

Gets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected.

Example

Set the selectedIndex property.

 <smart-tabs selected-index='2'></smart-tabs>

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

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

 tabs.selectedIndex = 0;

Get the selectedIndex property.

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

 let selectedIndex = tabs.selectedIndex;

selectionMode"click" | "dblclick" | "mouseenter" | "none"

Specifies how users can navigate or switch between different tabs, such as by clicking, keyboard shortcuts, or swipe gestures. This setting defines the interaction method for moving from one tab to another within the tabbed interface.

Default value

"click"

Example

Set the selectionMode property.

 <smart-tabs selection-mode='dblclick'></smart-tabs>

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

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

 tabs.selectionMode = 'mouseenter';

Get the selectionMode property.

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

 let selectionMode = tabs.selectionMode;

tabLayout"scroll" | "dropDown" | "wrap" | "shrink"

Determines how the component handles situations where the element’s width is insufficient to display all tab labels. Offers four configurable behaviors for managing tab overflow, such as scrolling, collapsing, fading, or displaying an overflow menu.

Default value

"scroll"

Example

Set the tabLayout property.

 <smart-tabs tab-layout='dropdown'></smart-tabs>

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

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

 tabs.tabLayout = 'wrap';

Get the tabLayout property.

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

 let tabLayout = tabs.tabLayout;

tabPosition"top" | "bottom" | "left" | "right" | "hidden"

Specifies or retrieves the position of the tab strip within the user interface, determining where the tab strip is displayed (e.g., top, bottom, left, or right) relative to the main content area.

Default value

"top"

Example

Set the tabPosition property.

 <smart-tabs tab-position='bottom'></smart-tabs>

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

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

 tabs.tabPosition = 'left';

Get the tabPosition property.

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

 let tabPosition = tabs.tabPosition;

tabTextOrientation"horizontal" | "vertical"

Specifies or retrieves the direction in which the text is displayed within the tabs, such as horizontal or vertical orientation. This property allows you to control whether tab labels are arranged from left to right, top to bottom, or in another supported direction.

Default value

"horizontal"

Example

Set the tabTextOrientation property.

 <smart-tabs tab-text-orientation='vertical'></smart-tabs>

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

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

 tabs.tabTextOrientation = 'horizontal';

Get the tabTextOrientation property.

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

 let tabTextOrientation = tabs.tabTextOrientation;

themestring

Specifies the theme to be applied, which controls the visual style, color scheme, and overall appearance of the element. The selected theme determines how the element is displayed to users.

Default value

Example

Set the theme property.

 <smart-tabs theme='blue'></smart-tabs>

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

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

 tabs.theme = 'red';

Get the theme property.

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

 let theme = tabs.theme;

unfocusableboolean

When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to interact with it using tab navigation or other focus-related actions.

Default value

false

Example

Set the unfocusable property.

 <smart-tabs unfocusable></smart-tabs>

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

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

 tabs.unfocusable = false;

Get the unfocusable property.

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

 let unfocusable = tabs.unfocusable;

Events

addNewTabClickCustomEvent

This event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onAddNewTabClick

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of addNewTabClick event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('addNewTabClick', function (event) {
	// event handling code goes here.
})

changeCustomEvent

This event is triggered whenever the user selects a different tab, indicating that the active tab has changed. It allows you to respond to tab selection changes, such as updating content or executing specific logic based on the newly selected tab.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onChange

Arguments

evCustomEvent

ev.detailObject

ev.detail.index number - The tab's index.

ev.detail.oldIndex number - The tab's old index.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('change', function (event) {
    const detail = event.detail,
        index = detail.index,
        oldIndex = detail.oldIndex;

	// event handling code goes here.
})

closeCustomEvent

This event is triggered whenever a user closes a browser tab. It allows you to execute custom actions or clean up resources associated with that tab right before it is removed from the browser. The event provides details about the closed tab, such as its identifier and any relevant data, enabling you to manage your application's state accordingly.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onClose

Arguments

evCustomEvent

ev.detailObject

ev.detail.index number - The tab's index.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of close event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('close', function (event) {
    const detail = event.detail,
        index = detail.index;

	// event handling code goes here.
})

closingCustomEvent

This event is dispatched immediately before a tab is closed, giving you an opportunity to intercept the closure. By calling event.preventDefault() within the event handler, you can cancel the default close action and prevent the tab from closing. This allows you to perform actions such as prompting the user to save changes or confirming the close operation before proceeding.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onClosing

Arguments

evCustomEvent

ev.detailObject

ev.detail.index number - The tab's index.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of closing event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('closing', function (event) {
    const detail = event.detail,
        index = detail.index;

	// event handling code goes here.
})

dragEndCustomEvent

This event is triggered when a user completes a drag operation, signaling that the dragged element has been released and the drag sequence has finished. It allows you to perform cleanup actions, update UI elements, or handle any final logic after dragging is concluded.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragEnd

Arguments

evCustomEvent

ev.detailObject

ev.detail.left number - The tab's left position.

ev.detail.top number - The tab's top position.

ev.detail.index number - The tab's index.

ev.detail.label string - The tab's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragEnd event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('dragEnd', function (event) {
    const detail = event.detail,
        left = detail.left,
        top = detail.top,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

dragStartCustomEvent

This event is fired when a user initiates a drag operation, typically by clicking and beginning to move a draggable element. It marks the beginning of the drag-and-drop sequence, allowing you to set up any necessary data or visual feedback for the dragged item.

Bubbles Yes
Cancelable Yes
Interface CustomEvent
Event handler property onDragStart

Arguments

evCustomEvent

ev.detailObject

ev.detail.left number - The tab's left position.

ev.detail.top number - The tab's top position.

ev.detail.index number - The tab's index.

ev.detail.label string - The tab's label.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of dragStart event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('dragStart', function (event) {
    const detail = event.detail,
        left = detail.left,
        top = detail.top,
        index = detail.index,
        label = detail.label;

	// event handling code goes here.
})

reorderCustomEvent

This event is triggered whenever the order of tabs within a tab group changes, such as when a user drags and drops a tab to a new position. It allows you to respond to tab reordering actions, enabling features like updating your application's state or saving the new tab arrangement.

Bubbles Yes
Cancelable No
Interface CustomEvent
Event handler property onReorder

Arguments

evCustomEvent

ev.detailObject

ev.detail.index number - The tab's index.

ev.detail.oldIndex number - The tab's old index.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of reorder event.

const tabs = document.querySelector('smart-tabs');
tabs.addEventListener('reorder', function (event) {
    const detail = event.detail,
        index = detail.index,
        oldIndex = detail.oldIndex;

	// event handling code goes here.
})

Methods

collapse(): void

Expands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface.

Invoke the collapse method.

const tabs = document.querySelector('smart-tabs');
tabs.collapse();

getTabLabel( index: number): string

Retrieves the label (displayed title) of the Tab located at the specified index within the Tab collection. The index parameter is zero-based, meaning 0 refers to the first Tab.

Arguments

indexnumber

The index of the tab.

Returnsstring

Invoke the getTabLabel method.

const tabs = document.querySelector('smart-tabs');
const result = tabs.getTabLabel(5);

getTabContent( index: number): HTMLElement

Retrieves and returns the content associated with the Tab located at the specified index within the Tab component. This allows access to the data or elements currently displayed in the selected Tab.

Arguments

indexnumber

The index of the tab.

ReturnsHTMLElement

Invoke the getTabContent method.

const tabs = document.querySelector('smart-tabs');
const result = tabs.getTabContent(5);

ensureVisible( index: number): void

Ensures the specified tab is brought into view within its container by automatically scrolling the container so that the entire tab is visible to the user.

Arguments

indexnumber

The index of the tab to scroll to.

Invoke the ensureVisible method.

const tabs = document.querySelector('smart-tabs');
tabs.ensureVisible(4);

expand(): void

Expands the content section to reveal additional information or elements that are initially hidden, providing users with more detailed content or options within this area.

Invoke the expand method.

const tabs = document.querySelector('smart-tabs');
tabs.expand();

getTabs(): {label: string, content: any}[]

Returns an array containing all TabItem objects that are child elements of the specified element. Each TabItem in the array represents a tab within the tabbed interface, allowing you to programmatically access and manipulate individual tabs.

Returns{label: string, content: any}[]

Invoke the getTabs method.

const tabs = document.querySelector('smart-tabs');
const result = tabs.getTabs();

getOffsetFromEdgeOfElement( index: number): number

Returns the distance, in pixels, between the edge of the tab item container (the smart-tab-item element) and the corresponding edge of the parent smart-tabs element where the tab strip is located. This offset indicates how far the tab item container is positioned from the start of the tab strip within the tabs component, allowing for precise alignment and positioning calculations.

Arguments

indexnumber

The index of the tab item.

Returnsnumber

Invoke the getOffsetFromEdgeOfElement method.

const tabs = document.querySelector('smart-tabs');
const result = tabs.getOffsetFromEdgeOfElement(1);

insert( index: number, details: any): void

Adds a new tab to the tab navigation interface and creates a corresponding content section. The new tab becomes selectable, allowing users to view and interact with its associated content when it is active.

Arguments

indexnumber

The index to insert a new tab at.

detailsany

An Object with the fields "label", "labelSize", "content" and "group".

Invoke the insert method.

const tabs = document.querySelector('smart-tabs');
tabs.insert(1,{"label":"New TAB","content":"New content"});

refreshTabHeader(): void

Refreshes the Tabs header section to ensure it displays correctly. This is particularly useful when the header contains elements—such as images or dynamic content—that may load after the initial rendering of the Tabs. By calling this function, you can re-render or update the header layout to accommodate any late-loaded or dynamically updated elements, ensuring alignment and visual consistency.

Invoke the refreshTabHeader method.

const tabs = document.querySelector('smart-tabs');
tabs.refreshTabHeader();

removeAt( index: number): void

Removes the specified tab along with its corresponding content section from the user interface, ensuring that both the tab header and its related content are deleted and no longer accessible to the user.

Arguments

indexnumber

The index of the tab to remove.

Invoke the removeAt method.

const tabs = document.querySelector('smart-tabs');
tabs.removeAt(5);

select( index: number): void

Programmatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.

Arguments

indexnumber

The index of the tab to select.

Invoke the select method.

const tabs = document.querySelector('smart-tabs');
tabs.select(5);

update( index: number, label: string, content: string | HTMLElement): void

Updates a specific tab along with its corresponding content section, ensuring that both the tab interface and its related content are synchronized and reflect the latest changes.

Arguments

indexnumber

The index of the tab to update.

labelstring

The new label of the tab. The value can be the id of an HTMLTemplateElement

contentstring | HTMLElement

The new content of the tab.

Invoke the update method.

const tabs = document.querySelector('smart-tabs');
tabs.update(5,"Updated TAB","Updated content");

CSS Variables

--smart-tabs-header-button-sizevar()

Default value

"20px"

smartTabs header buttons size. Horizontal Tabs header buttons width = Vertical Tab header buttons height.

--smart-tabs-animation-durationvar()

Default value

"0.5s"

smartTabs animation duration

--smart-tabs-default-widthvar()

Default value

"var(--smart-box-width)"

smartTabs default width

--smart-tabs-default-heightvar()

Default value

"var(--smart-box-height)"

smartTabs default height

--smart-tabs-header-paddingvar()

Default value

"0px"

Defines Tabs header padding.

--smart-tabs-header-offsetvar()

Default value

"0px"

Defines Tabs header offset.

--smart-tab-item-paddingvar()

Default value

"12px 16px"

Defines vertical and horizontal padding of tab items.

--smart-tab-item-offsetvar()

Default value

"5px"

Default tab item offset.

--smart-tab-item-initial-offsetvar()

Default value

"5px"

Initial tab item offset.

--smart-tab-item-text-transformvar()

Default value

"uppercase"

Tab item text capitalization.

TabItem

Defines a tab item.

Selector

smart-tab-item

Properties

closeButtonHiddenboolean

"Represents the visual and interactive state of the close button within a tab item. This can include states such as default, hovered, focused, active (pressed), or disabled, and determines how the close button appears and responds to user actions."

Default value

false

 <smart-tab-item close-button-hidden></smart-tab-item>

disabledboolean

Prevents the Tab item from being interacted with or selected by the user. When disabled, the Tab item appears visually inactive and cannot be activated through mouse, touch, or keyboard navigation.

Default value

false

 <smart-tab-item disabled></smart-tab-item>

indexnumber

"Indicates the numerical position of an individual tab item within a tabbed navigation component, starting from zero. Used to identify, activate, or manage specific tabs based on their sequence in the tab list."

selectedboolean

Indicates the visual state and styling applied to a tab item when it is currently selected or active, signaling to users which tab is in focus and displaying its associated content.

Default value

false

 <smart-tab-item selected></smart-tab-item>

labelstring

Label text displayed on a navigation tab within a tabbed interface. Used to identify and differentiate each tab for the user.

Default value

contentany

Content displayed within a tab panel, representing the information or elements associated with a specific tab item in a tabbed interface.

Tabs Javascript API

addNewTabboolean

Default value

Example

allowToggleboolean

Default value

Example

animation"none" | "simple" | "advanced"

Default value

Example

closeButtonMode"default" | "selected"

Default value

Example

closeButtonsboolean

Default value

Example

collapsedboolean

Default value

Example

collapsibleboolean

Default value

Example

dataSource{label: string, content: any, index: number, selected: boolean, labelSize: number, closeButtonsHidden: boolean}[] | TabItem[]

Example

disabledboolean

Default value

Example

enableMouseWheelActionboolean

Default value

Example

unlockKeystring

Default value

Example

localestring

Default value

Example

localizeFormatFunctionfunction | null

Example

messagesobject

Default value

Example

namestring

Default value

Example

overflow"auto" | "hidden" | "scroll"

Default value

Example

readonlyboolean

Default value

Example

reorderboolean

Default value

Example

resizeboolean

Default value

Example

rightToLeftboolean

Default value

Example

scrollButtonsPosition"near" | "far" | "both"

Default value

Example

scrollMode"paging" | "continuous"

Default value

Example

selectedIndexnumber | null

Example