Tabs Typescript 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 valuefalse

allowToggleboolean

Allows toggle. If set to true, **selectedIndex** can be set to null (no selected tab).

Default valuefalse

animationAnimation

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

Default valueadvanced

closeButtonModeTabsCloseButtonMode

Sets or gets the close button mode.

Default valuedefault

closeButtonsboolean

Sets or gets whether close buttons are displayed.

Default valuefalse

collapsedboolean

Sets or gets whether the Tabs content section is collapsed.

Default valuefalse

collapsibleboolean

Enables or disables the collapsible feature.

Default valuefalse

dataSourceany

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

disabledboolean

Enables or disables the element.

Default valuefalse

enableMouseWheelActionboolean

Enables or disables scrolling using the mouse wheel through overflowing tab labels in the tab strip.

Default valuefalse

localestring

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

Default value"en

localizeFormatFunctionany

Callback, related to localization module.

messagesany

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

}

namestring

Sets or gets the widget's name.

Default value"""

overflowOverflow

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

Default valueauto

readonlyboolean

Disables user interaction with the element.

Default valuefalse

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 valuefalse

resizeboolean

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

Default valuefalse

scrollButtonsPositionLayoutPosition

Sets or gets the position of the scroll buttons.

Default valueboth

scrollModeTabsScrollMode

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

Default valuepaging

selectedIndexnumber | null

Sets or gets which tab is selected.

selectionModeTabSelectionMode

Determines the way the user can switch between tabs.

Default valueclick

tabLayoutTabsTabLayout

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

Default valuescroll

tabPositionTabPosition

Sets or gets where the tab strip is positioned.

Default valuetop

tabTextOrientationOrientation

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

Default valuehorizontal

themestring

Determines the theme. Theme defines the look of the element

Default value"

unfocusableboolean

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

Default valuefalse

onchange((this: Window, ev: Event) => any) | null

This event is triggered when the tab selection is changed.

Arguments

evEvent

onclose((this: Window, ev: Event) => any) | null

This event is triggered when a tab is closed.

Arguments

evEvent

onclosing((this: Window, ev: Event) => any) | null

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.

Arguments

evEvent

ondragend((this: Window, ev: Event) => any) | null

This event is triggered when a drag operation has ended.

Arguments

evEvent

ondragstart((this: Window, ev: Event) => any) | null

This event is triggered when a drag operation has started.

Arguments

evEvent

onreorder((this: Window, ev: Event) => any) | null

This event is triggered when tabs have been reordered.

Arguments

evEvent

Methods

collapse(): void

Collapses the content section.

ensureVisible( index: number): void

Makes sure a tab is visible by scrolling to it.

Arguments

indexnumber

The index of the tab to scroll to.

expand(): void

Expands the content section.

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.