Tab
The Tab control is a content panel that shows multiple content panes in specific area one at a time.
Properties
allowDragAndDrop Boolean
Specifies whether to allow the dragging and dropping of tab items.
Default: false
animation TabAnimationSettingsModel
Specifies options to customize the animation effect switch between tabs.
Default: { previous: { effect: 'SlideLeftIn', duration: 600, easing: 'ease' }, next: { effect: 'SlideRightIn', duration: 600, easing: 'ease' } }
clearTemplates Boolean
Specifies whether the tab templates should be cleared or not when changing the tab items dynamically.
Default: true
cssClass String
Specifies CSS classes to customize the appearance of the control.
Default: ""
dragArea String
Specifies the area in which the draggable element movement will be occurring. Dragging outside this area will be restricted. By default, the draggable element movement only occurs in the tab toolbar.
Default: Null
enableHtmlSanitizer Boolean
Specifies whether to allow the rendering of untrusted HTML and JavaScript values withing the control. When true, any untrusted strings or scripts will be remote before rendering.
Default: true
enableRtl Boolean
Specifies whether to render the control in right to left direction.
Default: false
enableState Boolean
Specifies whether to persist the state of the control between page loads.
- actEleId
- selectedItem
Default: false
headerPlacement HeaderPosition
Specifies the positioning the header.
Default: Top
height String Number
Specifies the height of the control expressed in pixels, a number, or in a percentage. By default, the tab height is set based on the height of its parent. The height property only affects the control when the heightAdjustMode is set to 'None'.
Default: auto
heightAdjustMode HeightAdjustMode
Specifies the height adjustment mode of the tab content.
Default: Content
items TabItemModel[]
Specifies a collection of items for the tab.
Default: []
loadOn TabItemModel
Specifies the tab content load mode.
Default: Dynamic
locale String
Specifies the culture and localization value for this control, overriding the globally defined value.
Default: en-US
overflowMode OverflowMode
Specifies the table overflow mode when tab items exceed the width of the viewing area.
Default: Scrollable
reorderActiveTab Boolean
Specifies whether to re-order the tab items to show the active tab in the header area or popup when OverflowMode is set to 'Popup'.
Default: true
scrollStep Number
Specifies the scrolling step distance of the scrollbar.
Default: null
selectedItem Number
Specifies the index of the active/current tab.
Default: 0
showCloseButton Boolean
Specifies whether to show the close button in the tab headers to remove the item from the tab.
Default: false
width String Number
Specifies the width of the control. By default, the width of the control is determined by its parent container. Value can be expressed in percent or pixels.
Default: 100%
Methods
addEventListener
Attaches an event handler to a specified element. This method allows you to set up a function that will be called whenever the specified event is delivered to the target element.
| Parameter | Type | Description |
|---|---|---|
| eventName | String | A string value that specifies the name of the event. |
| handler | Function | Specifies the function to run when the event is triggered. |
Returns: Void
addTab
Adds new items to the tab.
| Parameter | Type | Description |
|---|---|---|
| data | TabItemModel[] | Specifies an array of items to be added to the tab. |
| index (optional) | Number | Specifies an index that will determine where the items will be added. By default, the tab will be added at the beginning of the tab list. |
Returns: Void
appendTo
Appends the control to the specified HTML element.
| Parameter | Type | Description |
|---|---|---|
| selector | String HTMLElement | The select to a specified HTML element or an HTML element where the control will be appended to. |
Returns: Void
dataBind
Applies all pending property changes to the control.
Returns: Void
destroy
Destroys the Aware instance, detaches all related events, removes attributes, css classes and restores the root element.
Returns: Void
enableTab
Enables or disables a tab by the given tab index value.
| Parameter | Type | Description |
|---|---|---|
| index | Number | Specifies the tab index of the tab to enable or disable. |
| value (optional) | Boolean | Specifies whether to disable (false) or enable (false) the tab. By default, the tab will be enabled. |
Returns: Void
getItemIndex
Gets the item index of the tab using the given tab id.
| Parameter | Type | Description |
|---|---|---|
| id | String | Specifies the tab id to use to get the index for. |
Returns: Number
getLocalData
Gets the current properties values for the accordion that will be persisted to the state.
Returns: String
getRootElement
Gets the root element of the control.
Returns: HTMLElement
getStateData
Gets the current persisted state data for the control.
Returns: String
hideTab
Hides or shows a tab by the given tab index value.
| Parameter | Type | Description |
|---|---|---|
| index | Number | Specifies the tab index of the tab to hide or show. |
| value (optional) | Boolean | Specifies whether to hide (true) or show (false) the tab. By default, the tab will be hidden. |
Returns: Void
refresh
Applies all pending property changes to the accordion and re-renders the control.
Returns: Void
refreshActiveTab
Refresh the active tab's content.
Returns: Void
removeEventListener
Removes the attached event handler for the specified event listener.
| Parameter | Type | Description |
|---|---|---|
| eventName | String | A string value that specifies the name of the event to be removed. |
| handler | Function | Specifies the function to be removed. |
Returns: Void
removeTab
Removes the tab at the given index.
| Parameter | Type | Description |
|---|---|---|
| index | Number | Specifies the tab index to be removed. |
Returns: Void
select
Select the active tab by using the given index or element.
| Parameter | Type | Description |
|---|---|---|
| args | Number HTMLElement | Specifies the index or element to select as the active tab. |
Returns: Void
Events
added EmitType<AddEventArgs>
Event callback that is raised after the tab has been added.
adding EmitType<AddEventArgs>
Event callback that is raised before the tab is added.
created EmitType<CreatedEventArgs>
Event callback that is raised when the control has been created.
destroyed EmitType<Object>
Event callback that is raised when the control has been destroyed.
dragged EmitType<DragEventArgs>
Event callback that is raised when the tab header being dragged has been dropped.
dragging EmitType<DragEventArgs>
Event callback that is raised when while the tab is being dragged.
dragStarted EmitType<DragEventArgs>
Event callback that is raised when the tab starts to be dragged.
removed EmitType<RemoveEventArgs>
Event callback that is raised after the tab has been removed.
removing EmitType<RemoveEventArgs>
Event callback that is raised before the tab is removed.
selected EmitType<SelectedEventArgs>
Event callback that is raised after the tab has been selected.
selecting EmitType<SelectingEventArgs>
Event callback that is raised before the tab is selected.