Dimension.md

Dimension

A Dimension Number Input Field

Parameters

Parameter	Type	Value
type	required	Predefined String (dimension)
title	optional	String
desc	optional	String
responsive	optional	Boolean ( Default:false )
std	optional	Array
selector	optional	String / Array
tab	optional	String(style)
section	optional	String

Return

Always return object

Example

Responsive

'addon_dimension' => array(
	'type' => 'dimension',
	'title'	=> __('Dimension Field','your-textdomain'),
	'std' => array(
		'md' => array( 'top' => '10px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px' ),
		'sm' => array( 'top' => '9px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px' ),
		'xs' => array( 'top' => '7px', 'right' => '0px', 'bottom' => '0px', 'left' => '0px' ),
		),
	'unit' => array( 'px','em','%' ),
	'responsive' => true,
	'selector' => '{{SELECTOR}} .example-dimension{ margin: {{data.addon_dimension}}; }'
)

Not Responsive

'addon_dimension' => array(
	'type' => 'dimension',
	'title'	=> __('Dimension Field','your-textdomain'),
	'std' => array(
                'top' => '10px', 
                'right' => '0px', 
                'bottom' => '0px', 
                'left' => '0px'
            ),
	'unit' => array( 'px','em','%' ),
	'selector' => '{{SELECTOR}} .example-dimension{ margin: {{data.addon_dimension}}; }'
)

Not Responsive Without Unit

'addon_dimension' => array(
	'type' => 'dimension',
	'title'	=> __('Dimension Field','your-textdomain'),
	'std' => array( 
                'top' => '10',
                'right' => '0',
                'bottom' => '0',
                'left' => '0'
            ),
)

Controls

PHP

Inside the rander() method

Responsive

foreach( $value as $key => $val ){
    echo '<div>'.$val["top"].'</div>';
    echo '<div>'.$val["right"].'</div>';
    echo '<div>'.$val["bottom"].'</div>';
    echo '<div>'.$val["left"].'</div>';
}
echo '<div class="example-dimension">Example Dimension</div>';

Not Responsive

echo '<div>'.$data["settings"]["addon_dimension"]["top"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["right"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["bottom"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["left"].'</div>';
echo '<div class="example-dimension">Example Dimension</div>';

Not Responsive Without Unit

echo '<div>'.$data["settings"]["addon_dimension"]["top"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["right"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["bottom"].'</div>';
echo '<div>'.$data["settings"]["addon_dimension"]["left"].'</div>';

JS Template

Inside the getTemplate() method-

Responsive

<div>
<# _.forEach(data.addon_dimension, function(value, key) { #>
    {{value.top}}
    {{value.right}}
    {{value.bottom}}
    {{value.left}}
<# } #>
</div>
<div class="example-dimension">Example Dimension</div>

Not Responsive

<div>{{data.addon_dimension}}</div>
<div class="example-dimension">Example Dimension</div>

Not Responsive Without Unit

<div>{{data.addon_dimension}}</div>