Default options structure

Every option has the following default arguments:

Name	Type	Default	Description
type *	String		Name of the vue component
description	String		Text that appears on popup explaining what the option does.
title *	String		Text that displays as a title above the option

* Mandatory argument

They also support the following arguments which are optional:

Name	Type	Default	Description
default	String / Boolean / Array		The default value of the option
css_style	Array		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}}',                     ],                 ],             ]         );
sync	String		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_attribute	Array		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_options	Boolean	false	Conditions if the option should render the element with responsive media queries
show_responsive_buttons	Boolean	false	Shows the responsive button if enabled
layout	String	‘full’	Controls the layout of the option : ‘full’ ‘full-reverse’ ‘inline’
width	Number	100	The percentage width of the option
dependency	Array		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'], ], ], ] );
dynamic	Array		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}}',
                    ],
                ],
            ]
        );
}