The function is used to render custom attributes on an element such as classes and data-attrbiutes. It supports the following properties:
| Name | Type | Default | Description |
| tag_id | String | ‘wrapper’ | Creates render attribute for tag id if doesn’t exists |
| attribute | String | ‘class’ | Adds an attribute to the tag_id |
| value | String | Adds the value to the mentioned attribute |
In php files, render attributes function is used in the following examples:
In options function
public function options( $options ) {
$options->add_option(
'icon_position',
[
'type' => 'custom_selector',
'title' => __( 'Icon position', 'zionbuilder' ),
'description' => __( 'Choose icon position.' ),
'default' => 'left',
'columns' => 2,
'options' => [
[
'id' => 'left',
'name' => 'left',
],
[
'id' => __( 'right', 'zionbuilder' ),
'name' => 'right',
],
],
'render_attribute' => [
[
'tag_id' => 'button_styles',
'attribute' => 'class',
'value' => 'zb-el-button--icon-{{VALUE}}',
],
],
]
}
In render function
it combines the inherited attributes styles such as custom global classes with other classes attributes:
/**
* Get style elements
*
* Returns a list of elements/tags that for which you
* want to show style options
*
* @return void
*/
public function on_register_styles() {
$this->register_style_options_element(
'button_styles',
[
'title' => esc_html__( 'Button styles', 'zionbuilder' ),
'selector' => '{{ELEMENT}} .zb-el-button',
'render_tag' => 'button_styles',
]
);
}
public function render( $options ) {
/**
* gets the combined attributes from registered styles with classes attributes
*/
$combined_button_attr = $this->render_attributes->get_combined_attributes( 'button_styles', [ 'class' => 'zb-el-button' ] );
$button_text = 'link text';
$this->render_tag(
'a,
'button',
[ $button_text ],
$combined_button_attr
);
}
In vue component
In vue component, to render the cstom attributes and classes, the following functions are used:
v-bind="api.getAttributesForTag('tag_id')"
:class="api.getStyleClasses('tag_id')"<component
v-bind="api.getAttributesForTag('button_styles')"
:class="api.getStyleClasses('button_styles')"
></component>
