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>