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( | |
| 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}}',
],
],
]
);
}
