The number control represents a simple number input field. It has the following custom properties:
- unit (string:
px
,em
,rem
etc.) - min (number)
- max (number)
- step (Default: 1) (Custom: ‘0.1’ etc.)
Use it to render a number to the page or set the css
control property to target a specific CSS style.
class Prefix_Element_Number extends BricksElement { // Set builder controls public function set_controls() { $this->controls['exampleNumber'] = [ 'tab' => 'content', 'label' => esc_html__( 'Number', 'bricks' ), 'type' => 'number', 'min' => 0, 'max' => 200, 'step' => '0.1', // Default: 1 'inline' => true, 'default' => 123, ]; $this->controls['examplePadding'] = [ 'tab' => 'content', 'label' => esc_html__( 'Padding in px', 'bricks' ), 'type' => 'number', 'unit' => 'px', 'inline' => true, 'css' => [ [ 'property' => 'padding', ], ], 'default' => 33, ]; } // Render element HTML public function render() { if ( isset( $this->settings['exampleNumber'] ) ) { echo esc_html__( 'Number: ', 'bricks' ) . $this->settings['exampleNumber']; } else { esc_html_e( 'No number provided.', 'bricks' ); } } }