TabsWindow
Tabs window displays a dialog with tabs.
Selector
smart-tabs-window
Properties
addNewTabboolean
Determines if 'Add New' Tab inside the Tabs element is visible.
Default valuefalse
allowToggleboolean
Determines if toggle mode is enabled. Toggle mode allows null selection.
Default valuefalse
animationAnimation
Sets or gets the animation mode. Animation is disabled when the property is set to 'none'
Default valueadvanced
autoHideboolean
When enabled the only visible section of the window is the tabs label section. The header,content and footer of the window is hidden. When an item is selected from the tabs label section the content is visualized in an auto-hide popup container beneath the tabsWindow element.
Default valuefalse
autoHideWindowany
By default when autoHide is enabled a smartWindow is used as the autoHideWindow popup to display the content of the selected tabItem. The 'autoHideWindow' property is used to reference a different smartWindow element inside the DOM to be used as the autoHideContainer instead of the one provided by the actual TabsWindow.
collapsedboolean
Determines if the window is collapsed or not. When collapsed the only the header of the window is visible.
Default valuefalse
closeOnMaskClickboolean
When a modal window is opened, thid property determines if clicking on the mask closes the window or not.
Default valuefalse
dataSource{label: string, content: string}[]
Determines the data source that will be loaded to the Tabs.
disabledboolean
Enables or disables the window.
Default valuefalse
disableSnapboolean
Enables or disables the window snapping feature.
Default valuetrue
dropPositionWindowDropPosition
Applicable to DockingLayout Custom Element.
Determines where the window(it's tab items as well) can be dropped inside the DockingLayout.
The property is an array that accepts multiple positions. Note: Positions with prefix 'layout-' are applied to the Tab item children of the TabsWidnow owner that is being dragged. The rest of the positions indicate the allowed drop position inside the hovered target(TabsWindow). Used only by smartDockingLayout custom elements. Determines the possible drop position inside the DockingLayout. The following values are allowed.
Default value
footerTemplateany
Determines the template for the Dialog section of the window. By default footerTemplate is null.
headerButtonsstring[]
Set's the buttons that will be visible in the header section.
headerTemplateany
Determines the template for the Dialog section of the window. By default headerTemplate is null.
headerPositionTabPosition
Determines the position of the header of the window element.
Default valuetop
labelstring
The label of the window that appears in the header area.
Default value"
liveResizeboolean
When enabled the resizing operation happens live. By default it's not enabled and during resizing a highlighter around the edges of the window appears to outline the current size of the element.
Default valuefalse
layoutany
Used only by smartDockingLayout. Determines the owner smartDockingLayout that the window belongs to. When the tabsWindow has been removed from a DockingLayout element, the property is used to indicate that it belongs to that particular Dockinglayout. Accepts a string, representing the ID of a smartDockingLayout on the page, or an instance of smartDokcingLayout.
localestring
Sets or gets the language. Used in conjunction with the property messages.
Default value"en
localizeFormatFunctionany
Callback, related to localization module.
lockedboolean
Applicable to DockingLayout Custom Element.Determines of the item can be resized or not.
Default valuefalse
maximizedboolean
Determines if the window is maximized or not. When maximized the window covers the whole viewport.
Default valuefalse
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."
}
modalboolean
Determines if the window is modal or not. If true the user can only interact with the window and nothing else on the page.
Default valuefalse
minimizedboolean
Determines if the window is minimized or not. When minimized the window is docked at the bottom left corner of the viewport.
Default valuefalse
openedboolean
Determines if the window is visible or not.
Default valuefalse
pinnedboolean
Determines if the window is pinned or not. Pinned window is a window that can't be dragged but can be resized.
Default valuefalse
readonlyboolean
If the element is readonly, users cannot interact with it.
Default valuefalse
resizeIndicatorboolean
When applied a resize indicator is displayed in the bottom right corner of the window and resizing operation can be initiated only from its position.
Default valuefalse
resizeModeWindowResizeMode
Determines the resizing mode of the window.
Several modes are available:
- none - resizing is disabled.
- vertical - vertical resizing is allowed.
- horizontal - horizontal resizing is allowed.
- both - horizontal and vertical resizing is allowed.
- top - the window can only be resized from the top side.
- bottom - the window is resizable only from the bottom side.
- left - the window can be resized only from the left side.
- right - the window can be resized only from the right side.
Default valuenone
tabCloseButtonsboolean
Sets or gets whether close buttons are displayed.
Default valuefalse
tabCloseButtonModeTabsWindowTabCloseButtonMode
Determines if the close button is visible on select or always.
Default valuedefault
tabOverflowOverflow
Sets or gets the Tabs scroll buttons behavior. Applicable only when tabLayout is 'scroll'.
Default valueauto
tabLayoutTabLayout
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
tabReorderboolean
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
tabResizeboolean
Sets or gets whether tab labels can be resized by dragging with the mouse.
Default valuefalse
tabScrollButtonsPositionLayoutPosition
Sets or gets the position of the scroll buttons inside the Tab header.
Default valueboth
selectedIndexnumber | null
Sets or gets which tab is selected.
selectionModeTabSelectionMode
Determines the way the user can switch between tabs.
Default valueclick
collapsibleboolean
Applicable to DockingLayout Custom Element. Determines of the item can be collapsed. If set to false, the item can't be collapsed
Default valuefalse
minstring
Applicable to DockingLayout Custom Element. Determines the min size of the item
Default value"
maxstring
Applicable to DockingLayout Custom Element. Determines the max size of the item.
Default value"
sizestring
Applicable to DockingLayout Custom Element. Determines the size of the item.
Default value"
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
windowParentany
Determines the actual parent of the element. The window can size and move only in the area of that element.
onopening((this: Window, ev: Event) => any) | null
This event is triggered just before the window starts opening.
Arguments
evEvent
onopen((this: Window, ev: Event) => any) | null
This event is triggered when the window is opened( visible ).
Arguments
evEvent
onclosing((this: Window, ev: Event) => any) | null
This event is triggered just before the window starts closing.
Arguments
evEvent
onclose((this: Window, ev: Event) => any) | null
This event is triggered when the window is closed( hidden )
Arguments
evEvent
oncollapse((this: Window, ev: Event) => any) | null
This event is triggered when the window is collapsed.
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
onexpand((this: Window, ev: Event) => any) | null
This event is triggered when the window is expanded.
Arguments
evEvent
onmaximize((this: Window, ev: Event) => any) | null
This event is triggered when the window is maximized.
Arguments
evEvent
onminimize((this: Window, ev: Event) => any) | null
This event is triggered when the window is minimized.
Arguments
evEvent
onrestore((this: Window, ev: Event) => any) | null
This event is triggered when the window is restored to it's previous state before maximization.
Arguments
evEvent
onreorder((this: Window, ev: Event) => any) | null
This event is triggered when tabs have been reordered.
Arguments
evEvent
Methods
close(): void
Closes the window.
collapse(): HTMLElement
Collapses the window.
ReturnsHTMLElement
ensureVisible( index: number): void
Makes sure a tab item is visible by scrolling to it.
Arguments
indexnumber
The index of the tab to scroll to.
expand(): any[]
Expands the window after being collapsed.
Returnsany[]
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".
insertBefore( newNode: Node, referenceNode?: Node | null): T
Arguments
newNodeNode
The "smart-tab-item" node to insert.
referenceNode?Node | null
The "smart-tab-item" node before which newNode is inserted.
ReturnsNode
removeAt( index: number): void
Removes a tab and its associated content section.
Arguments
indexnumber
The index of the tab to remove.
removeChild( node: Node): T
Arguments
nodeNode
The "smart-tab-item" node to remove.
ReturnsNode
open(): void
Opens the window
maximize(): void
Maximizes the window to fill the area.
minimize(): void
Minimizes the window.
pin(): void
Pins the window. Disables window dragging.
restore(): void
Restores the window to it's previous size before maximization/minimization.
select( index: number): void
Selects a tab.
Arguments
indexnumber
The index of the tab to select.
unpin(): void
Unpins the window. Enables window dragging.
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.