TabModel API in JavaScript (ES5) Tabs API control

Interface for a class Tab

Properties

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.

allowDragAndDrop

boolean

Sets true to allow drag and drop the Tab items

animation

TabAnimationSettingsModel

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

clearTemplates

boolean

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

cssClass

string

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

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.

enableHtmlSanitizer

boolean

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

enablePersistence

boolean

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

1. selectedItem

enableRtl

boolean

Enable or disable rendering component in right to left direction.

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.

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

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.

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');

loadOn

ContentLoad

Specifies the modes for Tab content. The possible modes are:

• Demand - The content of the selected tab alone is loaded initially. The content of the tabs which were loaded once will be maintained in the DOM.
• Dynamic - The content of all the tabs are rendered on the initial load and maintained in the DOM.
• Init - The content of all the tabs are rendered on the initial load and maintained in the DOM.

locale

string

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

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.

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.

scrollStep

number

Specifies the scrolling distance in scroller.

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');

showCloseButton

boolean

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

width

string | number

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