JavaScript (ES5)

Search results

Tab

Tab is a content panel to show multiple contents in a single space, one at a time. Each Tab item has an associated content, that will be displayed based on the active Tab header item.

<div id="tab"></div>
<script>
  var tabObj = new Tab();
  tab.appendTo("#tab");
</script>

Properties

allowDragAndDrop
`boolean`

Sets true to allow drag and drop the Tab items

Defaults to false

animation
`TabAnimationSettingsModel`

Specifies the animation configuration settings while showing the content of the Tab.

Defaults to { previous: { effect: ‘SlideLeftIn’, duration: 600, easing: ‘ease’ },next: { effect: ‘SlideRightIn’, duration: 600, easing: ‘ease’ } }

clearTemplates
`boolean`

Specifies whether the templates need to be cleared or not while changing the Tab items dynamically.

Defaults to true

cssClass
`string`

Sets the CSS classes to root element of the Tab that helps to customize component styles.

Defaults to ”

dragArea
`string`

Defines the area in which the draggable element movement will be occurring. Outside that area will be restricted for the draggable element movement. By default, the draggable element movement occurs in the toolbar.

Defaults to null

enableHtmlSanitizer
`boolean`

Defines whether to allow the cross-scripting site or not.

Defaults to false

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

selectedItem

Defaults to false

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

headerPlacement
`HeaderPosition`

Specifies the orientation of Tab header. The possible values for this property as follows

Top: Places the Tab header on the top.
Bottom: Places the Tab header at the bottom.
Left: Places the Tab header on the left.
Right: Places the Tab header at the right.

Defaults to ‘Top’

height
`string` | `number`

Specifies the height of the Tab component. By default, Tab height is set based on the height of its parent. To use height property, heightAdjustMode must be set to ‘None’.

Defaults to ‘auto’

heightAdjustMode
`HeightStyles`

Specifies the height style for Tab content. The possible values for this property as follows

None: Based on the given height property, the content panel height is set.
Auto: Tallest panel height of a given Tab content is set to all the other panels.
Content: Based on the corresponding content height, the content panel height is set.
Fill: Based on the parent height, the content panel height is set.

Defaults to ‘Content’

items
`TabItemModel[]`

An array of object that is used to configure the Tab component.

  let tabObj: Tab = new Tab( {
    items: [
      { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
      { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
    ]
  });
  tabObj.appendTo('#tab');

Defaults to []

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

overflowMode
`OverflowMode`

Specifies the Tab display mode when Tab content exceeds the viewing area. The possible modes are:

Scrollable: All the elements are displayed in a single line with horizontal scrolling enabled.
Popup: Tab container holds the items that can be placed within the available space and rest of the items are moved to the popup. If the popup content overflows the height of the page, the rest of the elements can be viewed by scrolling the popup.

Defaults to ‘Scrollable’

reorderActiveTab
`boolean`

Determines whether to re-order tab items to show active tab item in the header area or popup when OverflowMode is Popup. True, if active tab item should be visible in header area instead of pop-up. The default value is true.

Defaults to true

scrollStep
`number`

Specifies the scrolling distance in scroller.

Defaults to null

selectedItem
`number`

Specifies the index for activating the current Tab item.

  let tabObj: Tab = new Tab( {
    selectedItem: 1,
    items: [
      { header: { text: 'TabItem1' }, content: 'Tab Item1 Content' },
      { header: { text: 'TabItem2' }, content: 'Tab Item2 Content' }
    ]
  });
  tabObj.appendTo('#tab');

Defaults to 0

showCloseButton
`boolean`

Specifies whether to show the close button for header items to remove the item from the Tab.

Defaults to false

width
`string` | `number`

Specifies the width of the Tab component. Default, Tab width sets based on the width of its parent.

Defaults to ‘100%’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

addTab

Adds new items to the Tab that accepts an array as Tab items.

Parameter	Type	Description
items	`TabItemModel[]`	An array of item that is added to the Tab.
index (optional)	`number`	Number value that determines where the items to be added. By default, index is 0.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns any

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Removes the component from the DOM and detaches all its related event handlers, attributes and classes.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns any

disable

Specifies the value to disable/enable the Tab component. When set to true, the component will be disabled.

Parameter	Type	Description
value	`boolean`	Based on this Boolean value, Tab will be enabled (false) or disabled (true).

Returns void

enableTab

Enables or disables the specified Tab item. On passing value as false, the item will be disabled.

Parameter	Type	Description
index	`number`	Index value of target Tab item.
value	`boolean`	Boolean value that determines whether the command should be enabled or disabled. By default, isEnable is true.

Returns void

getItemIndex

Gets the item index from the Tab.

Parameter	Type	Description
tabItemId	`string`	Item ID is used for getting index from the Tab.

Returns number

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns any

hideTab

Shows or hides the Tab that is in the specified index.

Parameter	Type	Description
index	`number`	Index value of target item.
value (optional)	`boolean`	Based on this Boolean value, item will be hide (false) or show (true). By default, value is true.

Returns void

refresh

Refresh the tab component

Returns void

refreshActiveTab

To refresh the active tab contents.

Returns void

refreshActiveTabBorder

To refresh the active tab indicator.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

removeTab

Removes the items in the Tab from the specified index.

Parameter	Type	Description
index	`number`	Index of target item that is going to be removed.

Returns void

select

Specifies the index or HTMLElement to select an item from the Tab.

Parameter	Type	Description
args	`number` \| `HTEle`	Index or DOM element is used for selecting an item from the Tab.
event (optional)	`Event`	An event which takes place in DOM.

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

Returns void

Events

added
`EmitType<AddEventArgs>`

The event will be fired after adding the item to the Tab.

adding
`EmitType<AddEventArgs>`

The event will be fired before adding the item to the Tab.

created
`EmitType<Event>`

The event will be fired once the component rendering is completed.

destroyed
`EmitType<Event>`

The event will be fired when the component gets destroyed.

dragged
`EmitType<DragEventArgs>`

The event will be fired after dropping the Tab item

dragging
`EmitType<DragEventArgs>`

The event will be fired while dragging the Tab item

onDragStart
`EmitType<DragEventArgs>`

The event will be fired before dragging the item from Tab

removed
`EmitType<RemoveEventArgs>`

The event will be fired after removing the item from the Tab.

removing
`EmitType<RemoveEventArgs>`

The event will be fired before removing the item from the Tab.

selected
`EmitType<SelectEventArgs>`

The event will be fired after the item gets selected.

selecting
`EmitType<SelectingEventArgs>`

The event will be fired before the item gets selected.

Tab

Properties

allowDragAndDrop boolean

animation TabAnimationSettingsModel

clearTemplates boolean

cssClass string

dragArea string

enableHtmlSanitizer boolean

enablePersistence boolean

enableRtl boolean

headerPlacement HeaderPosition

height string | number

heightAdjustMode HeightStyles

items TabItemModel[]

locale string

overflowMode OverflowMode

reorderActiveTab boolean

scrollStep number

selectedItem number

showCloseButton boolean

width string | number

Methods

addEventListener

addTab

appendTo

attachUnloadEvent

dataBind

destroy

detachUnloadEvent

disable

enableTab

getItemIndex

getLocalData

getRootElement

handleUnload

hideTab

refresh

refreshActiveTab

refreshActiveTabBorder

removeEventListener

removeTab

select

Inject

Events

added EmitType<AddEventArgs>

adding EmitType<AddEventArgs>

created EmitType<Event>

destroyed EmitType<Event>

dragged EmitType<DragEventArgs>

dragging EmitType<DragEventArgs>

onDragStart EmitType<DragEventArgs>

removed EmitType<RemoveEventArgs>

removing EmitType<RemoveEventArgs>

selected EmitType<SelectEventArgs>

selecting EmitType<SelectingEventArgs>

allowDragAndDrop
`boolean`

animation
`TabAnimationSettingsModel`

clearTemplates
`boolean`

cssClass
`string`

dragArea
`string`

enableHtmlSanitizer
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

headerPlacement
`HeaderPosition`

height
`string` | `number`

heightAdjustMode
`HeightStyles`

items
`TabItemModel[]`

locale
`string`

overflowMode
`OverflowMode`

reorderActiveTab
`boolean`

scrollStep
`number`

selectedItem
`number`

showCloseButton
`boolean`

width
`string` | `number`

added
`EmitType<AddEventArgs>`

adding
`EmitType<AddEventArgs>`

created
`EmitType<Event>`

destroyed
`EmitType<Event>`

dragged
`EmitType<DragEventArgs>`

dragging
`EmitType<DragEventArgs>`

onDragStart
`EmitType<DragEventArgs>`

removed
`EmitType<RemoveEventArgs>`

removing
`EmitType<RemoveEventArgs>`

selected
`EmitType<SelectEventArgs>`

selecting
`EmitType<SelectingEventArgs>`