Search results

TabComponent

TabComponent represents the react Tab Component.

<TabComponent overflowMode= 'Popup'></TabComponent>

Properties

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

cssClass

string

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

Defaults to

enablePersistence

boolean

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

  1. selectedItem

Defaults to false.

enableRtl

boolean

Specifies the direction of the Tab. For the culture like Arabic, direction can be switched as right-to-left.

Defaults to false

headerPlacement

string

Specifies the orientation of Tab header. The possible values are:

  • 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

string

Specifies the height style for Tab content. The possible values are:

  • 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 undefined

overflowMode

string

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’

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

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

destroy

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

Returns void

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

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

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.

Returns void

Events

added

EmitType<Event>

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

adding

EmitType<Event>

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.

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.