{"id":223,"date":"2020-04-22T06:24:33","date_gmt":"2020-04-22T06:24:33","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&p=223"},"modified":"2021-07-06T09:32:43","modified_gmt":"2021-07-06T09:32:43","slug":"element-controls","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/element-controls\/","title":{"rendered":"Element Controls"},"content":{"rendered":"\n

Element controls allow the user to change the content and appearance of an element. You can define the controls of an element with the set_controls() method in your element PHP class<\/a>.<\/p>\n\n\n\n

Example element class with control parameters for control testColor<\/code>:<\/p>\n\n\n\n

class Prefix_Element_Test extends \\Bricks\\Element {\n  public function set_controls() {\n    $this->controls['testColor'] = [\n      'tab' => 'content',\n      'group' => 'settings',\n      'label' => esc_html__( 'Text color', 'bricks' ),\n      'type' => 'color',\n      'inline' => true,\n      'small' => true,\n      'css' => [\n        [\n          'property' => 'color',\n          'selector' => '.content',\n          'important' => true, \/\/ Optional\n        ],\n      ],\n      'default' => [\n        'rgb' => 'rgba(158, 158, 158, .8)',\n        'hex' => '#9e9e9e',\n      ],\n      'pasteStyles' => false,\n      'description' => esc_html__( 'Define the content color.', 'bricks' ),\n      'required' => ['showText', '!=', ''],\n    ];\n  }\n}\n<\/pre>\n\n\n\n
The following control parameters are available for all control types. To dive deeper into the arguments of a specific control type select the control from the list at the bottom.<\/p>\n\n\n\n
Universal control arguments<\/h3>\n\n\n\n
Name<\/th>Type<\/th>Default<\/th>Description<\/th><\/tr><\/thead>
tab<\/td>string<\/td>content<\/td>Tab under which to show the control. Accepts: content<\/code> or style<\/code>.<\/td><\/tr>
group<\/td>string<\/td> <\/td>Group under which to show the control. By default a control shows ungrouped under the content<\/code> tab.<\/td><\/tr>
label<\/td>string<\/td> <\/td>Localized control label. E.g.: esc_html__( 'Color', 'bricks' ),<\/code><\/td><\/tr>
type<\/td>string<\/td> <\/td>Set the control type (see the list below for a list of all available control types).<\/td><\/tr>
inline<\/td>bool<\/td>false<\/td>Set to true to show control label and input on the same line.<\/td><\/tr>
small<\/td>bool<\/td>false<\/td>Set to true to show a control input of 60px width. By default inline label and input have equal widths of 50%.<\/td><\/tr>
css<\/td>array<\/td> <\/td>Array with CSS rule definitions. Each CSS rule is a separate array and requires a property<\/code> and selector<\/code> parameter.<\/td><\/tr>
default<\/td>string\/array<\/td> <\/td>Default control value. Either a string or an array (depending on the control type, see control list below for specific control default)<\/td><\/tr>
pasteStyles<\/td>bool<\/td>true<\/td>Set to true excludes setting from being pasted via the builders’ custom right click “Paste Styles”. Recommended for all controls that output HTML content instead of CSS.<\/td><\/tr>
description<\/td>string<\/td> <\/td>Optional description for controls that need additional explanation or link to a resource.<\/td><\/tr>
required<\/td>array<\/td> <\/td>Show control in relation to the setting of another control.\n
 <\/p>\n
Parameter #1: control ID 
Parameter #2: comparison operator:  =<\/code>, !=<\/code>, >=<\/code>, <=<\/code>
Parameter #3: setting value<\/p>\n
Example: 'required' => ['layout', '=', ['list', 'grid']],<\/code> 
Required condition: Show this control if setting value of control layout<\/code> equals =<\/code> either list<\/code> or grid<\/code>.<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Controls Types<\/h3>\n\n\n\n
Control Type<\/td>Output (Content\/CSS)<\/td><\/tr><\/thead>
apply<\/a><\/td>None<\/td><\/tr>
align-items<\/a><\/td>CSS<\/td><\/tr>
audio<\/a><\/td>Content<\/td><\/tr>
background<\/a><\/td>CSS<\/td><\/tr>
border<\/a><\/td>CSS<\/td><\/tr>
box-shadow<\/a><\/td>CSS<\/td><\/tr>
checkbox<\/a><\/td>Conditional<\/td><\/tr>
code<\/a><\/td>Content<\/td><\/tr>
color<\/a><\/td>CSS<\/td><\/tr>
datepicker<\/a><\/td>Content<\/td><\/tr>
dimensions<\/a><\/td>CSS<\/td><\/tr>
direction<\/a><\/td>CSS<\/td><\/tr>
editor<\/a><\/td>Content<\/td><\/tr>
filters<\/a><\/td>CSS<\/td><\/tr>
gradient<\/a><\/td>CSS<\/td><\/tr>
icon<\/a><\/td>Content<\/td><\/tr>
image<\/a><\/td>Content\/CSS<\/td><\/tr>
image-gallery<\/a><\/td>Content<\/td><\/tr>
info<\/a><\/td>Builder panel only<\/td><\/tr>
justify-content<\/a><\/td>CSS<\/td><\/tr>
link<\/a><\/td>Content<\/td><\/tr>
number<\/a><\/td>Content\/CSS<\/td><\/tr>
posts<\/a><\/td>Content<\/td><\/tr>
repeater<\/a><\/td>Content<\/td><\/tr>
select<\/a><\/td>Content\/CSS<\/td><\/tr>
slider<\/a><\/td>Content<\/td><\/tr>
svg<\/a><\/td>Content<\/td><\/tr>
text<\/a><\/td>Content<\/td><\/tr>
textarea<\/a><\/td>Content<\/td><\/tr>
text-align<\/a><\/td>CSS<\/td><\/tr>
text-decoration<\/a><\/td>CSS<\/td><\/tr>
text-shadow<\/a><\/td>CSS<\/td><\/tr>
text-transform<\/a><\/td>CSS<\/td><\/tr>
typography<\/a><\/td>CSS<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"
Element controls allow the user to change the content and appearance of an element. You can define the controls of an element with the set_controls() method in your element PHP class. Example element class with control parameters for control testColor: class Prefix_Element_Test extends \\Bricks\\Element { public function set_controls() { $this->controls[‘testColor’] = [ ‘tab’ => ‘content’, ‘group’ => […]<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":190,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/223"}],"collection":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article"}],"about":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/types\/bricks_article"}],"author":[{"embeddable":true,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/223\/revisions"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=223"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}