Group fields
The setting field type Group Fields
Arguments
Name
Type
Value
Description
type
string
group
The type of setting
name
string
{field_name}
The unique name will be used in template
label
string
(optional)
The label that appears above of the setting field.
description
string
(optional)
The description that appears above under of the setting field.
tooltip
string
(optional)
The long description that appears on the tooltip when hover on.
value
object
(optional)
The default value will be used for the first time.
options
object
(optional)
{
add_text: string (Custom text for add new),
max: interge (Maximum item)
}
params
object
(required)
List of fields in this group (support group level 2)
on
object
(optional)
Add listener events for setting field
Code example
@schema
{
"name" : "Group Fields",
"author" : "LayoutHub",
"website" : "https://www.LayoutHub.com"
}
@endschema
<div class="sample-demo">
@include('group')
</div>[
{
name: 'group_1',
label: 'Simple Group',
type: 'group',
value: [
{
text: 'Text 01',
}
],
options: {
add_text: 'Add new item'
},
params: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'image',
type: 'image',
label: 'Image'
}
]
},
{
name: 'group_2',
label: 'Group in group',
type: 'group',
value: [
{
text: "Text 02",
group_inner: [
{
text: 'Text 03'
}
]
}
],
options: {
add_text: 'Add new group'
},
params: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'group_inner',
type: 'group',
label: 'Child group',
params: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'image',
type: 'image',
label: 'Image'
}
]
}
]
},
{
name: 'group_3',
label: 'Group types',
type: 'group',
value: [
{
type: 'group_type_1',
settings: {
text: 'Text 03',
group_inner: [
{
text: 'Text 04'
},
{
text: 'Text 05'
}
]
}
}
],
options: {
add_text: 'Add new group'
},
params: [
{
type: 'group_type_1',
name: 'Group 01',
settings: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'group_inner',
type: 'group',
label: 'Child group',
params: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'image',
type: 'image',
label: 'Image'
}
]
}]
},
{
type: 'group_type_2',
name: 'Group 02',
settings: [
{
name: 'text',
type: 'text',
label: 'Text'
},
{
name: 'group_inner',
type: 'image',
label: 'Select image'
}]
}
]
}
]<ul>
@for (section.settings.group_1 as grp)
<li>
<label>@print(grp.text)</label>
@if (grp.image !== undefined && grp.image !== '')
<img src="@attr(grp.image)" width="250" />
@endif
</li>
@endfor
</ul>
<p>@print(JSON.stringify(section.settings.group_2))</p>
<p>@print(JSON.stringify(section.settings.group_3))</p>How it works
Last updated
Was this helpful?