Default options structure

Every option has the following default arguments:

NameTypeDefaultDescription
type *StringName of the vue component
descriptionStringText that appears on popup explaining what the option does.
title *StringText that displays as a title above the option

* Mandatory argument

They also support the following arguments which are optional:

NameTypeDefaultDescription
defaultString / Boolean / ArrayThe default value of the option
css_styleArray
Adds css style to an element component
$options->add_option(
            'title_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title color', 'zionbuilder' ),
                'css_style' => [
                    [
                        'selector' => '{{ELEMENT}} .zb-el-alert__title',
                        'value'    => 'color: {{VALUE}}',
                    ],
                ],
            ]
        );

syncString
It creates the synchronicity with the correspondent option from Styling.
Ex:
$options->add_option(
            'title_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title color', 'zionbuilder' ),
                'sync' => '_styles.wrapper.styles.%%RESPONSIVE_DEVICE%%.default.align-items'
            ]
        );

render_attributeArray
Renders an attribute on the element component such as class name
$options->add_option(
            'size',
            [
                'type'      => 'column_size',               
                'title'     => __( 'Select size', 'zionbuilder' ),
				'options'            => [
					[
						'id'   => 6,
						'name' => 2,
					],
				],
		'responsive_options' => true,
                'render_attribute'   => [
					[
					'tag_id'    => 'wrapper',
					'attribute' => 'class',
					'value'     => 'class--{{RESPONSIVE_DEVICE_CSS}}-{{VALUE}}',
					],
				]
            ]
        );
responsive_optionsBooleanfalseConditions if the option should render the element with responsive media queries
show_responsive_buttonsBooleanfalseShows the responsive button if enabled
layoutString‘full’Controls the layout of the option :
‘full’
‘full-reverse’
‘inline’
widthNumber100The percentage width of the option
dependencyArray
Conditions the current option to render only if other option has a property enabled. It supports multiple dependencies.
$options->add_option(
     'size',
        [
        'type'      => 'column_size',               
        'title'     => __( 'Select size', 'zionbuilder' ),
	'options'   => [
			[
			'id'   => 6,
			'name' => 2,
		],
	],				
         'dependency'  => [
		[
		'option'      => 'option_id',
		'value'       => ['style--1', 'style--2', 'style--3'],
		],
	],
        ]
        );
dynamicArray
If enabled, shows the dynamic input fields
$options->add_option(
	'text',
	array(
	'type'        => 'editor',
	'title'       => esc_html__( 'Element text', 'zionbuilder' ),
	'description' => esc_html__( 'Set the desired title', 'zionbuilder' ),
	'dynamic'     => array(
			'enabled' => true,
			),
		)
		);

The code would look something like:

public function options( $options ) {
        $options->add_option(
            'option_id',
             [
                'type'        => 'text',
                'description' => __( 'Set text', 'zionbuilder' ),
                'title'       => __( 'Option title', 'zionbuilder' ),
                'default'     => __( 'Press me', 'zionbuilder' ),
                'layout'           => 'inline',
                'responsive_options' => true,
                'width'     => 50,
                'render_attribute' => [
                    [
                        'tag_id'    => 'wrapper',
                        'attribute' => 'class',
                        'value'     => 'className{{VALUE}}',
                    ],
                ],
            ]
        );
}

Was this article helpful ?

48 people consider this article helpful
Thank you! We will improve this article.

Didn’t find what you’re looking for? Please let us know

Submit a ticket