Tabs — Smart UI JavaScript API

Tabs — 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>Tabs - JavaScript Quick Start</title>
  <link rel="stylesheet" href="./node_modules/smart-webcomponents/source/styles/smart.default.css" />
</head>
<body>
  <smart-tabs id="demo-tabs"></smart-tabs>

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

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

      el.reorder = true;
      el.tabLayout = 'scroll';
      el.dataSource = [
        { label: 'TAB 1', content: 'Content 1' },
        { label: 'TAB 2', content: 'Content 2' },
        { label: 'TAB 3', content: 'Content 3' },
        { label: 'TAB 4', content: 'Content 4' }
      ];
      el.selectedIndex = 1;

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

Developer Quick Reference

Component: Tabs   Framework: JavaScript   Selector: smart-tabs

API counts: 29 properties, 12 methods, 7 events

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

Common methods: collapse(), getTabLabel(), getTabContent(), ensureVisible(), expand(), getTabs()

Common events: addNewTabClick, change, close, closing, dragEnd, dragStart

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

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.

Class

Tabs
TabItem
TabItemsGroup

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.

Selector

smart-tabs

Quick picks

changedataSourcedisabled

Properties

AaddNewTabDetermines 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.
AallowToggleEnables 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.
AanimationConfigures 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.
CcloseButtonModeConfigures 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.
CcloseButtonsControls 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.
CcollapsedDetermines 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.
CcollapsibleControls 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.
DdataSourceSpecifies 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.
DdisabledDetermines 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.
EenableMouseWheelActionAllows 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.
LlocaleSpecifies 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.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked during processes such as language selection, text translation, or locale updates to handle localization-specific behavior.
MmessagesSets 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.
NnameGets 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.
OoverflowSpecifies 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.
RreadonlyPrevents 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.
RreorderControls 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.
RresizeDetermines 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.
RrightToLeftGets 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.
SscrollButtonsPositionConfigures 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.
SscrollModeSpecifies 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.
SselectedIndexGets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected.
SselectionModeSpecifies 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.
TtabLayoutDetermines 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.
TtabPositionSpecifies 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.
TtabTextOrientationSpecifies 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.
TthemeSpecifies 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.
UunfocusableWhen 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.
UunlockKeySets or retrieves the 'unlockKey' value, a unique key or code required to unlock and gain access to the product’s features or content.

Events

AaddNewTabClickThis event is triggered when the addNewTab feature is enabled and the corresponding button or interface element is clicked by the user.
CchangeThis 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.
CcloseThis 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.
CclosingThis 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.
DdragEndThis 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.
DdragStartThis 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.
RreorderThis 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.

Methods

CcollapseExpands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface.
EensureVisibleEnsures 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.
EexpandExpands the content section to reveal additional information or elements that are initially hidden, providing users with more detailed content or options within this area.
GgetOffsetFromEdgeOfElementReturns 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.
GgetTabContentRetrieves 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.
GgetTabLabelRetrieves 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.
GgetTabsReturns 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.
IinsertAdds 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.
RrefreshTabHeaderRefreshes 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.
RremoveAtRemoves 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.
SselectProgrammatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.
UupdateUpdates 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.

Properties

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

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

Examples

Markup and runtime examples for addNewTab:

HTML attribute:

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

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

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

Read the current value:

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

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

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
Try a demo showcasing the allowToggle property.

Examples

Markup and runtime examples for allowToggle:

HTML attribute:

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

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

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

Read the current value:

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

animationConfigures 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."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"

Examples

Markup and runtime examples for animation:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.animation = "simple";

Read the current value:

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

closeButtonModeConfigures 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" | "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"

Examples

Markup and runtime examples for closeButtonMode:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.closeButtonMode = "default";

Read the current value:

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

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

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
Try a demo showcasing the closeButtons property.

Examples

Markup and runtime examples for closeButtons:

HTML attribute:

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

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

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

Read the current value:

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

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

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

Examples

Markup and runtime examples for collapsed:

HTML attribute:

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

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

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

Read the current value:

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

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

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

Examples

Markup and runtime examples for collapsible:

HTML attribute:

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

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

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

Read the current value:

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

dataSourceSpecifies 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.{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.

Try a demo showcasing the dataSource property.

Examples

Markup and runtime examples for dataSource:

HTML:

<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>

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

const el = document.querySelector('smart-tabs');
el.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 }];

Read the current value:

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

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

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
Try a demo showcasing the disabled property.

Examples

Markup and runtime examples for disabled:

HTML attribute:

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

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

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

Read the current value:

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

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

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
Try a demo showcasing the enableMouseWheelAction property.

Examples

Markup and runtime examples for enableMouseWheelAction:

HTML attribute:

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

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

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

Read the current value:

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

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

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"
Try a demo showcasing the locale property.

Examples

Markup and runtime examples for locale:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.locale = "fr";

Read the current value:

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

localizeFormatFunctionCallback function associated with the localization module, typically invoked during processes such as language selection, text translation, or locale updates to handle localization-specific behavior.function | 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.

Try a demo showcasing the localizeFormatFunction property.

Examples

Markup and runtime examples for localizeFormatFunction:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.localizeFormatFunction = "function(defaultMessage, message, messageArguments){return '...'}";

Read the current value:

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

messagesSets 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.object

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."

}

Try a demo showcasing the messages property.

Examples

Markup and runtime examples for messages:

HTML:

<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>

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

const el = document.querySelector('smart-tabs');
el.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."}};

Read the current value:

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

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

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

""""
Try a demo showcasing the name property.

Examples

Markup and runtime examples for name:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.name = "New Name";

Read the current value:

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

overflowSpecifies 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."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"
Try a demo showcasing the overflow property.

Examples

Markup and runtime examples for overflow:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.overflow = "scroll";

Read the current value:

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

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

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

Examples

Markup and runtime examples for readonly:

HTML attribute:

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

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

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

Read the current value:

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

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

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
Try a demo showcasing the reorder property.

Examples

Markup and runtime examples for reorder:

HTML attribute:

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

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

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

Read the current value:

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

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

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

Examples

Markup and runtime examples for resize:

HTML attribute:

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

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

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

Read the current value:

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

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

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.

Examples

Markup and runtime examples for rightToLeft:

HTML attribute:

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

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

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

Read the current value:

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

scrollButtonsPositionConfigures 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."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"
Try a demo showcasing the scrollButtonsPosition property.

Examples

Markup and runtime examples for scrollButtonsPosition:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.scrollButtonsPosition = "far";

Read the current value:

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

scrollModeSpecifies 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."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"
Try a demo showcasing the scrollMode property.

Examples

Markup and runtime examples for scrollMode:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.scrollMode = "paging";

Read the current value:

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

selectedIndexGets the index or identifier of the currently selected tab, or allows you to specify which tab should be selected.number | null

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

Try a demo showcasing the selectedIndex property.

Examples

Markup and runtime examples for selectedIndex:

HTML:

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

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

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

Read the current value:

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

selectionModeSpecifies 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."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"
Try a demo showcasing the selectionMode property.

Examples

Markup and runtime examples for selectionMode:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.selectionMode = "mouseenter";

Read the current value:

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

tabLayoutDetermines 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."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"
Try a demo showcasing the tabLayout property.

Examples

Markup and runtime examples for tabLayout:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.tabLayout = "wrap";

Read the current value:

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

tabPositionSpecifies 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."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"
Try a demo showcasing the tabPosition property.

Examples

Markup and runtime examples for tabPosition:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.tabPosition = "left";

Read the current value:

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

tabTextOrientationSpecifies 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."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"

Examples

Markup and runtime examples for tabTextOrientation:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.tabTextOrientation = "horizontal";

Read the current value:

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

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

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

""
Try a demo showcasing the theme property.

Examples

Markup and runtime examples for theme:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.theme = "red";

Read the current value:

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

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

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

Examples

Markup and runtime examples for unfocusable:

HTML attribute:

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

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

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

Read the current value:

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

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

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

""

Examples

Markup and runtime examples for unlockKey:

HTML:

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

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

const el = document.querySelector('smart-tabs');
el.unlockKey = "1111-2222-3333-4444-5555";

Read the current value:

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

Events

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

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.

Examples

Listen for addNewTabClick using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

changeThis 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.CustomEvent

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.

Try a demo showcasing the change event.

Examples

Listen for change using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

closeThis 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.CustomEvent

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.

Try a demo showcasing the close event.

Examples

Listen for close using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

closingThis 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.CustomEvent

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.

Try a demo showcasing the closing event.

Examples

Listen for closing using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

dragEndThis 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.CustomEvent

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.

Examples

Listen for dragEnd using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

dragStartThis 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.CustomEvent

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.

Examples

Listen for dragStart using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

reorderThis 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.CustomEvent

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.

Try a demo showcasing the reorder event.

Examples

Listen for reorder using the pattern that matches your stack.

DOM — listen on the custom element (use a specific selector if the page has more than one):

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

	// event handling code goes here.
})

Methods

collapse(): voidExpands or collapses the content section, allowing users to toggle the visibility of its contents for improved usability and a cleaner interface.

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

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

document.querySelector('smart-tabs')?.collapse();

ensureVisible( index: number): voidEnsures 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.

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.

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

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

Try a demo showcasing the ensureVisible method.

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

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.

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

document.querySelector('smart-tabs')?.expand();

getOffsetFromEdgeOfElement( index: number): numberReturns 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.

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

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

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

getTabContent( index: number): HTMLElementRetrieves 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.

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

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

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

Try a demo showcasing the getTabContent method.

getTabLabel( index: number): stringRetrieves 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.

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

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

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

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 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}[]

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

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

insert( index: number, details: any): voidAdds 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.

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".

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

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

Try a demo showcasing the insert method.

refreshTabHeader(): voidRefreshes 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.

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.

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

document.querySelector('smart-tabs')?.refreshTabHeader();

removeAt( index: number): voidRemoves 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.

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.

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

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

Try a demo showcasing the removeAt method.

select( index: number): voidProgrammatically activates the specified tab in a tabbed interface, making its associated content visible while hiding content from other tabs.

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.

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

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

Try a demo showcasing the select method.

update( index: number, label: string, content: string | HTMLElement): voidUpdates 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.

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.

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

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

Try a demo showcasing the update method.

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.