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.

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

---

containerStyleClass

The CSS style class 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. Type: Boolean Default Value: false

---

styleClass

Set the styleclasses that should be applied at to this component Type: Styleclass

---

tabIndex

The tab index used for keyboard navigation of the TabPanel. 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 button is visible or not Type: Visible

---

Events

onChangeMethodID(previousIndex,event)

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

---

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

• {Number} [index] Give an index where the tab should be placed, 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.

Parameters:

• {Number} index <<<<<<<< add description for this param <<<<<<<<

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 classes for the tab's 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 name associated with the tab, if applicable.

  • 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

---