# TabPanel

(part of package '[Bootstrap Components](https://docs.servoy.com/reference/servoyextensions/packages/ui-component-packages/bootstrap-components)')\
Extends designtime/SolutionModel: [JSWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/solutionmodel/jswebcomponent)\
Extends runtime: [RuntimeWebComponent](https://docs.servoy.com/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent)

The TabPanel component is a container that organizes multiple forms into a tabbed interface, only one form being visible (selected) at any point in time.

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### closeIconStyleClass

The CSS style class applied to the close icon used in the TabPanel's tab headers. Only applicable if showTabCloseIcon is true. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass) Default Value: "glyphicon glyphicon-remove close-icon"

***

### containerStyleClass

The CSS style class(es) applied to the container element of the TabPanel. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### height

Minimum height of the tabpanel, should be used for responsive forms. Can be 100% (to take parent container height) or a number (in pixels). Type: [String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string) Default Value: "500"

***

### showTabCloseIcon

Flag indicating whether the close icon is displayed on the tabs. Default value is false. Type: [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) Default Value: false

***

### styleClass

Set the styleclass(es) that should be applied at to this component. Type: [Styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)

***

### tabIndex

The current 1-based index of the active(visible) tab from tabs array. Can also be set to change the active tab. Type: [Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number) Default Value: 1

***

### tabSeq

Tab sequence number of form containers is used for all nested components in the main form. Type: [Tabseq](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tabseq)

***

### tabs

An array of tab objects contained within the TabPanel. Type: [Array\<CustomType\<bootstrapcomponents-tabpanel.tab>>](#tab)

***

### visible

Whether the tabpanel is visible or not. Default is true (visible). Type: [Visible](https://docs.servoy.com/servoy-developer/component_and_service_property_types#visible)

***

## Events

### onChangeMethodID(previousIndex,event,newIndex)

Fired after a different tab is selected

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} previousIndex The previous tab index before the change
> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object associated with the tab change
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} newIndex The current tab index ( after the change )

***

### onTabClickedMethodID(event,clickedTabIndex,dataTarget)

Fired when the user clicks on a tab. When false is returned, the tab switch is prevented

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object that triggered the action
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} clickedTabIndex The index of the tab that was clicked
> * {[String](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)} dataTarget The identifier of the closest data-target attribute, if available

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

### onTabCloseMethodID(event,clickedTabIndex)

Fired when the user clicks on the tab close icon. When false is returned, the tab close is prevented

**Parameters:**

> * {[JSEvent](https://docs.servoy.com/reference/servoycore/dev-api/application/jsevent)} event The event object that triggered the action
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} clickedTabIndex The index of the tab that was clicked

**Returns:** {[Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)}

***

## API

### addTab(form,tabText,index)

Adds a tab with the given form and tab text on the given index.

**Parameters:**

> * {[Form](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form)} form The name of the form to add as a tab
> * {[Tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)} tabText The tab text that should be displayed. Can contain tags (i18n keys or foundset data).
> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} \[index] Give an index where the tab should be placed in the array of tabs, default at the end.

**Returns:** [CustomType\<bootstrapcomponents-tabpanel.tab>](#tab) The newly created tab object that represents the added form in the tab panel.

***

### getTabAt(index)

Retrieves the tab at the specified index from the tabs model.

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The 1-based index of the tab to retrieve.

**Returns:** [CustomType\<bootstrapcomponents-tabpanel.tab>](#tab) The tab object at the specified index, or null if the index is out of range.

***

### removeAllTabs()

Removes all tabs of this tabpanel

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if all tabs were successfully removed; false otherwise.

***

### removeTabAt(index)

Removes the tab from the given index (index is 1-based).

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index The 1-based index of the tab to remove.

**Returns:** [Boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean) True if the tab was successfully removed; false otherwise.

***

### selectTabAt(index)

Selects the tab of the given index

**@deprecated** use tabIndex property instead.

**Parameters:**

> * {[Number](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/number)} index

***

## Types

## tab

Represents a tab in the tabpanel. scripting type: CustomType\<bootstrapcomponents-tabpanel.tab>

* containedForm
  * The form contained within the tab.
  * **Type**: [form](https://docs.servoy.com/servoy-developer/component_and_service_property_types#form)
* disabled
  * Flag indicating whether the tab is disabled.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* hideCloseIcon
  * When true, the close icon is hidden for this tab.
  * **Type**: [boolean](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/boolean)
  * **Default Value**: false
* iconStyleClass
  * CSS style class(es) that can define icon on the tab (like fontawesome icon).
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
* imageMediaID
  * The media identifier for the tab's icon.
  * **Type**: [media](https://docs.servoy.com/servoy-developer/component_and_service_property_types#media)
* name
  * The unique name identifier of the tab.
  * **Type**: [string](https://docs.servoy.com/reference/servoycore/dev-api/js-lib/string)
* relationName
  * The relation used for loading data into the form contained within the tab. Can be null if no relation is used.
  * **Type**: [relation](https://docs.servoy.com/servoy-developer/component_and_service_property_types#relation)
* styleClass
  * Additional CSS style classes applied to the tab.
  * **Type**: [styleclass](https://docs.servoy.com/servoy-developer/component_and_service_property_types#styleclass)
* text
  * The text displayed on the tab.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)
* toolTipText
  * Tooltip text displayed when hovering over the tab.
  * **Type**: [tagstring](https://docs.servoy.com/servoy-developer/component_and_service_property_types#tagstring)

***