The Dimensions
control allows you to control multiple dimensions in the same control. You can define the properties it will use in the field’s default
argument.
Examples
Controlling width
and height
:
![Controlling width and height:](https://docs.themeum.com/wp-content/uploads/2023/08/dimensions-control-1.png)
new \Kirki\Field\Dimensions(
[
'settings' => 'setting_dimensions_1',
'label' => esc_html__( 'Dimensions Control', 'kirki' ),
'description' => esc_html__( 'Description', 'kirki' ),
'section' => 'section_id',
'default' => [
'width' => '100px',
'height' => '100px',
],
]
);
Controlling padding
:
![Controlling padding:](https://docs.themeum.com/wp-content/uploads/2023/08/padding-margin-control.png)
new \Kirki\Field\Dimensions(
[
'settings' => 'setting_dimensions_2',
'label' => esc_html__( 'Dimension Control', 'kirki' ),
'description' => esc_html__( '4 fields - would typically be used for padding or margin', 'kirki' ),
'section' => 'section_id',
'default' => [
'padding-top' => '1em',
'padding-bottom' => '10rem',
'padding-left' => '1vh',
'padding-right' => '10px',
],
]
);
You can use any dimensions and define the labels using a code snippet like this:
![You can use any dimensions and define the labels](https://docs.themeum.com/wp-content/uploads/2023/08/dimensions-control-custom-labels.png)
new \Kirki\Field\Dimensions(
[
'settings' => 'setting_dimensions_3',
'label' => esc_html__( 'Dimension Control', 'kirki' ),
'section' => 'section_id',
'default' => [
'min-width' => '100px',
'max-width' => '500px',
'min-height' => '50px',
'max-height' => '10em',
],
'choices' => [
'labels' => [
'min-width' => esc_html__( 'Min Width', 'kirki' ),
'max-width' => esc_html__( 'Max Width', 'kirki' ),
'min-height' => esc_html__( 'Min Height', 'kirki' ),
'max-height' => esc_html__( 'Max Height', 'kirki' ),
],
],
]
);