{"id":259,"date":"2020-04-22T06:24:32","date_gmt":"2020-04-22T06:24:32","guid":{"rendered":"https:\/\/localhost\/bricksacademy\/?post_type=bricks_article&#038;p=259"},"modified":"2022-07-27T15:56:04","modified_gmt":"2022-07-27T15:56:04","slug":"number-control","status":"publish","type":"bricks_article","link":"https:\/\/academy.bricksbuilder.io\/article\/number-control\/","title":{"rendered":"Number Control"},"content":{"rendered":"\n<p>The number control represents a simple number input field. It has the following custom properties:<\/p>\n\n\n\n<ul><li>units (optional: boolean or array)<\/li><li>unit (string: <code>px<\/code>, <code>em<\/code>, <code>rem<\/code> etc.)<\/li><li>min (number)<\/li><li>step (Default: 1) (Custom: &#8216;0.1&#8217; etc.)<\/li><\/ul>\n\n\n\n<p>Use it to render a number to the page or set the <code>css<\/code> control property to target a specific CSS style.<\/p>\n\n\n\n<pre class=\"wp-block-code prettyprint\"><code>class Prefix_Element_Number extends \\Bricks\\Element {\n  \/\/ Set builder controls\n  public function set_controls() {\n    $this->controls&#91;'exampleNumber'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Number', 'bricks' ),\n      'type' => 'number',\n      'min' => 0,\n      'step' => '0.1', \/\/ Default: 1\n      'inline' => true,\n      'default' => 123,\n    ];\n\n    $this->controls&#91;'examplePadding'] = &#91;\n      'tab' => 'content',\n      'label' => esc_html__( 'Padding in px', 'bricks' ),\n      'type' => 'number',\n      'unit' => 'px',\n      'inline' => true,\n      'css' => &#91;\n        &#91;\n          'property' => 'padding',\n        ],\n      ],\n      'default' => 33,\n    ];\n  }\n\n  \/\/ Render element HTML\n  public function render() {\n    if ( isset( $this->settings&#91;'exampleNumber'] ) ) {\n      echo esc_html__( 'Number: ', 'bricks' ) . $this->settings&#91;'exampleNumber'];\n    } else {\n      esc_html_e( 'No number provided.', 'bricks' );\n    }\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>The number control represents a simple number input field. It has the following custom properties: units (optional: boolean or array) unit (string: px, em, rem etc.) min (number) step (Default: 1) (Custom: &#8216;0.1&#8217; etc.) Use it to render a number to the page or set the css control property to target a specific CSS style.<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":154,"template":"","format":"standard","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/259"}],"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":3,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/259\/revisions"}],"predecessor-version":[{"id":2852,"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/bricks_article\/259\/revisions\/2852"}],"wp:attachment":[{"href":"https:\/\/academy.bricksbuilder.io\/api\/wp\/v2\/media?parent=259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}