TabPanel

(part of package 'Bootstrap Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: 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.

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 Default Value: "glyphicon glyphicon-remove close-icon"

---

containerStyleClass

The CSS style class(es) applied to the container element of the TabPanel. Type: 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 Default Value: "500"

---

showTabCloseIcon

Flag indicating whether the close icon is displayed on the tabs. Default value is false. Type: Boolean Default Value: false

---

styleClass

Set the styleclass(es) that should be applied at to this component. Type: 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 Default Value: 1

---

tabSeq

Tab sequence number of form containers is used for all nested components in the main form. Type: Tabseq

---

tabs

An array of tab objects contained within the TabPanel. Type: Array<CustomType<bootstrapcomponents-tabpanel.tab>>

---

visible

Whether the tabpanel is visible or not. Default is true (visible). Type: Visible

---

Events

onChangeMethodID(previousIndex,event,newIndex)

Fired after a different tab is selected

Parameters:

• {Number} previousIndex The previous tab index before the change

• {JSEvent} event The event object associated with the tab change

• {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} event The event object that triggered the action

• {Number} clickedTabIndex The index of the tab that was clicked

• {String} dataTarget The identifier of the closest data-target attribute, if available

Returns: {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} event The event object that triggered the action

• {Number} clickedTabIndex The index of the tab that was clicked

Returns: {Boolean}

---

API

addTab(form,tabText,index)

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

Parameters:

• {Form} form The name of the form to add as a tab

• {Tagstring} tabText The tab text that should be displayed. Can contain tags (i18n keys or foundset data).

• {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> 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} index The 1-based index of the tab to retrieve.

Returns: CustomType<bootstrapcomponents-tabpanel.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 True if all tabs were successfully removed; false otherwise.

---

removeTabAt(index)

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

Parameters:

• {Number} index The 1-based index of the tab to remove.

Returns: 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} index

---

Types

tab

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

• containedForm

  • The form contained within the tab.

  • Type: form

• disabled

  • Flag indicating whether the tab is disabled.

  • Type: boolean

  • Default Value: false

• hideCloseIcon

  • When true, the close icon is hidden for this tab.

  • Type: boolean

  • Default Value: false

• iconStyleClass

  • CSS style class(es) that can define icon on the tab (like fontawesome icon).

  • Type: styleclass

• imageMediaID

  • The media identifier for the tab's icon.

  • Type: media

• name

  • The unique name identifier of the tab.

  • Type: 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

• styleClass

  • Additional CSS style classes applied to the tab.

  • Type: styleclass

• text

  • The text displayed on the tab.

  • Type: tagstring

• toolTipText

  • Tooltip text displayed when hovering over the tab.

  • Type: tagstring

---