accordion2
The accordion allows collapsable data rows, much like a portal.
Accordion2 version adds slots that can replace the row header.
bfId
object
a BetterForms UUID is generated and added to all browser side created records to help in post processing
defaultModel
object
when provided will be used to populate browser side created rows.
min
number
{optional} The minimum number of tabs the user is allowed to create. The delete icon will had when this number is reached.
max
number
{optional} The maximum number of tabs the user is allowed to create. The add icons will hide when this number is reached.
model
array
the data key the tab row data resides in. model
must be initialized as an array. []
modelActiveTab
string
{optional} Model path for two-way binding of the active accordion index. When blank/undefined, all accordions are closed. Set to 0, 1, 2... to open a specific row. Updates when user toggles accordions.
schema
object
the schema object follows the same construct as schema of its parent. It only needs to contain a fields array.
slots
array
Array of slot objects. Slot names: tabLabel
`row._index`
contains the current rows index
tabLabelModel
string
Point this to the data model.field. It will be used to display on the tab.
Usage
{
"label": "Enter Some Contacts (min. 1 max 4)",
"max": 4,
"min": 1,
"model": "contacts",
"slots": [{
"html": "This is row:{{row._index +1}}, with the full name: {{model.nameFirst}} {{model.nameLast}}`",
"slot": "tabLabel"
}],
"schema": {
"fields": [{
"inputType": "text",
"label": "First Name",
"model": "nameFirst",
"styleClasses": "",
"type": "input"
},{
"inputType": "text",
"label": "Last Name",
"model": "nameLast",
"styleClasses": "",
"type": "input"
}]
},
"styleClasses": "col-md-6",
"type": "accordion2"
}
Controlling Which Accordion is Open (modelActiveTab)
Note: Available from BetterForms v3.2.27+
Use modelActiveTab
to control which accordion row is open. This creates two-way binding between the accordion state and your data model.
Example:
{
"type": "accordion2",
"model": "contacts",
"modelActiveTab": "activeContact",
"slots": [{
"html": "{{row.name}}",
"slot": "tabLabel"
}],
"schema": {
"fields": [{
"type": "input",
"label": "Name",
"model": "name"
}]
}
}
Model:
{
"contacts": [
{ "name": "Ada Lovelace" },
{ "name": "Grace Hopper" }
],
"activeContact": 1
}
In this example, the second accordion (Grace Hopper) opens on load because activeContact
is set to 1
. When users toggle accordions, activeContact
updates automatically. Leave it blank or undefined to start with all accordions closed.
Notes
Set the min and max values to the same number to permanently hide the add and delete icons. Data within your data models array will still render rows accordingly.
Last updated