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.

Properties

addNewTabboolean

Sets or gets whether the "Add new tab" button (+) is displayed.

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

Allows toggle. If set to true, **selectedIndex** can be set to null (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"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

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"

Sets or gets the close button mode.

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

Sets or gets whether close buttons are displayed.

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

Sets or gets whether the Tabs content section is collapsed.

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

Enables or disables the collapsible feature.

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

Determines the data source that will be loaded to the Tabs.

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

Enables or disables the element.

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

Enables or disables scrolling using the mouse wheel through overflowing tab labels 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;

localestring

Sets or gets the locale. Used in conjunction with the property messages.

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, related to localization module.

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 gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

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

Sets or gets the widget's name.

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"

Sets or gets the Tabs scroll buttons behavior. Applicable only when tabLayout is 'scroll'.

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

Disables user interaction with the element.

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

Enables or disables the reorder feature. When this feature is enabled, the end-user can drag a tab and drop it over another tab. As a result the tabs will be reordered.

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

Sets or gets whether tab labels can be resized by dragging with the mouse.

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

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

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"

Sets or gets the position of the scroll buttons.

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"

Sets or gets the behavior when scrolling the tab strip via the scroll buttons.

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

Sets or gets which tab is 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"

Determines the way the user can switch between tabs.

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"

Applies one of four behaviors when the element is not wide enough to display all tab labels.

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"

Sets or gets where the tab strip is positioned.

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"

Sets or gets the orientation of the text in the tabs.

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

Determines the theme. Theme defines the look of the element

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

If is set to true, the element cannot be focused.

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 is enabled and is clicked.

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 when the tab selection is changed.

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 when a tab is closed.

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 triggered when a tab is about to be closed. The closing operation can be canceled by calling event.preventDefault() in the event handler function.

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 drag operation has ended.

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 triggered when a drag operation has started.

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 when tabs have been reordered.

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

Collapses the content section.

Invoke the collapse method.

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

getTabLabel( index: number): string

Returns the label of a Tab at given index.

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

Returns the content of a Tab at given index.

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

Makes sure a tab is visible by scrolling to it.

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.

Invoke the expand method.

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

getTabs(): TabItem[]

Returns an array of the TabItems inside the element.

ReturnsTabItem[]

Invoke the getTabs method.

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

getOffsetFromEdgeOfElement( index: number): number

Returns the offset of the tab item container (smart-tab-item element) from the edge of the Tabs (smart-tabs element) where the tab strip is positioned.

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

Inserts a new tab and an associated content section.

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. Useful when the header contains elements (such as images) loaded slower than the Tabs itself.

Invoke the refreshTabHeader method.

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

removeAt( index: number): void

Removes a tab and its associated content section.

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

Selects a tab.

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 tab and its associated content section.

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.

closeButtonHiddenboolean

Tab item close button state

Default value

false

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

disabledboolean

Disables the Tab item

Default value

false

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

indexnumber

Tab item index

selectedboolean

Tab item selected state

Default value

false

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