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

PreviousPicker

Last updated 4 years ago