{"id":287,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=287"},"modified":"2022-07-13T14:15:33","modified_gmt":"2022-07-13T14:15:33","slug":"select-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/select-control\/","title":{"rendered":"Select Control"},"content":{"rendered":"\n<p>The select control lets you select an option from a dropdown. It can be used to render content or CSS styling. Use the options array to populate the dropdown with your own options. The option key should be all lowercase, with no spaces.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Posts extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    \/\/ Example content \n    $this->controls&#91;'exampleSelectTitleTag'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Title tag', 'bricks' ),\n      'type' => 'select',\n      'options' => &#91;\n        'h1' => 'H1',\n        'h2' => 'H2',\n        'h3' => 'H3',\n        'h4' => 'H4',\n        'h5' => 'H5',\n        'h6' => 'H6',\n      ],\n      'inline' => true,\n      'placeholder' => esc_html__( 'Select tag', 'bricks' ),\n      'multiple' => true, \n      'searchable' => true,\n      'clearable' => true,\n      'default' => 'h3',\n    ];\n\n    \/\/ Example CSS\n    $this->controls&#91;'exampleSelectTextAlign'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Text align', 'bricks' ),\n      'type' => 'select',\n      'options' => &#91;\n        'right' => esc_html__( 'Right', 'bricks' ),\n        'center' => esc_html__( 'Center', 'bricks' ),\n        'left' => esc_html__( 'Left', 'bricks' ),\n      ],\n      'inline' => true,\n      'css' => &#91;\n        &#91;\n          'property' => 'text-align',\n          'selector' => '.prefix-title',\n        ],\n      ],\n      'placeholder' => esc_html__( 'Select', 'bricks' ),\n      'default' => 'center', \/\/ Option key\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    $title_tag = isset( $this->settings&#91;'exampleSelectTitleTag'] ) ? $this->settings&#91;'exampleSelectTitleTag'] : 'h5';\n    echo '&lt;' . $title_tag . ' class=\"prefix-title\">' . get_bloginfo( 'name' ) . '&lt;\/' . $title_tag . '>';\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The select control lets you select an option from a dropdown. It can be used to render content or CSS styling. Use the options array to populate the dropdown with your own options. The option key should be all lowercase, with no spaces.<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":151,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/287"}],"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":1,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/287\/revisions"}],"predecessor-version":[{"id":2736,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/287\/revisions\/2736"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}