Accordion Panel

(part of package 'Bootstrap Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

The AccordionPanel component is a container similar to a TabPanel, but, instead of having tabs for showing / hiding forms, it has buttons that behave like an accordion, moving one way or the other.

This is a reference page; many components have detailed usage guides here.

Properties

activeTabIndex

The index of the currently active tab in the accordion. Type: Number Default Value: 0

---

containerStyleClass

The CSS class(es) to be added to container element - parent of the form element. Type: Styleclass

---

height

Minimum height of the accordion, should be used for responsive forms. Type: Number Default Value: "500"

---

styleClass

The CSS class(es) to be added to accordion element. Type: Styleclass

---

tabIndex

The index used for tab order when setting focus. Type: Number Default Value: 1

---

tabSeq

The tab sequence order used during design. Type: Tabseq

---

tabs

Array of tabs within the accordion component. Type: Array<CustomType<bootstrapcomponents-accordion.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
• {JSEvent} event The event object associated with the tab change

---

API

addTab(form,tabText,index)

Adds a tab to this accordion with that form and text on the given index

Parameters:

• {Form} form The form to be added as a new tab in the accordion component.
• {Tagstring} tabText The text to be displayed on the tab for the added form.
• {Number} [index] Optional. The position at which the tab should be added. If not provided, the tab is added at the end.

Returns: CustomType<bootstrapcomponents-accordion.tab> The newly created tab object that represents the added form in the accordion component.

---

getTabAt(i)

Return the Tab of the given index.

Parameters:

• {Number} i The 0-based index of the tab to retrieve from the accordion component.

Returns: CustomType<bootstrapcomponents-accordion.tab> The tab object at the specified index in the accordion component.

---

removeTabAt(index)

Removes a tab of the given index. Return true if this was sucessfull.

Parameters:

• {Number} index The 0-based position of the tab to be removed from the accordion component.

Returns: Boolean True if the tab was successfully removed; false otherwise.

---

selectTabAt(index)

Select the tab of the given index. Return true if this was succesfull.

@deprecated use tabIndex property instead.

Parameters:

• {Number} index

---

Types

tab

Defines a tab object for the AccordionPanel component. scripting type: CustomType<bootstrapcomponents-accordion.tab>

• containedForm

  • The form contained within the tab.

  • Type: form
• disabled

  • Whether the tab is disabled.

  • Type: boolean
  • Default Value: false

• name

  • The unique name identifier of the tab.

  • Type: string
• relationName

  • The relation name associated with the tab used for linking forms.

  • Type: relation
• text

  • The text displayed on the tab.

  • Type: tagstring
  • Default Value: "tab"

---