title: "响应式控件" post_status: publish comment_status: open taxonomy: category: - elementor-developers-docs post_tag: - Editor Controls - Src - Repos
响应式控件
响应式控件本质上是具备特殊功能的常规控件，允许用户为不同设备和屏幕尺寸设置不同的值。我们使用 add_responsive_control() 方法来添加响应式控件。
响应式控制结构
以下代码将添加一个新的响应式控制：
$this->add_responsive_control(
'control-name',
[
'label' => esc_html__( '间距', 'textdomain' ),
'type' => \Elementor\Controls_Manager::SLIDER,
]
);
控制参数
每个控件包含以下关键参数：
- 控件名称
(string)– 代码中使用的唯一标识符。 - 控件设置
(array)– 额外的控制参数。每个控件除了基于控件类型的默认设置外，还有其自身的自定义设置。响应式控件还包含基于设备的额外设置，例如根据屏幕尺寸设置不同的默认值。
Examples
Responsive Slider
The regular slider control defined in Control_Slider adds a draggable range slider. To make it responsive, and allow the user to set different values based on the device, use the following code:
```php {13-41} class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function register_controls(): void {
$this->start_controls_section(
'style_section',
[
'label' => esc_html__( 'Style Section', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'space_between',
[
'type' => \Elementor\Controls_Manager::SLIDER,
'label' => esc_html__( 'Spacing', 'textdomain' ),
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'devices' => [ 'desktop', 'tablet', 'mobile' ],
'default' => [
'size' => 30,
'unit' => 'px',
],
'tablet_default' => [
'size' => 20,
'unit' => 'px',
],
'mobile_default' => [
'size' => 10,
'unit' => 'px',
],
'selectors' => [
'{{WRAPPER}} .widget-image' => 'margin-bottom: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
}
### Responsive Dimensions
Another handy control is the dimensions control, defined in `Control_Dimensions`. It adds input fields for top, right, bottom, left and includes the option to link the fields together. It’s usually used for margins, paddings and borders. With responsive dimensions, we can set different values based on the device:
```php {13-23}
class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function register_controls(): void {
$this->start_controls_section(
'style_section',
[
'label' => esc_html__( 'Style Section', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'title_padding',
[
'type' => \Elementor\Controls_Manager::DIMENSIONS,
'label' => esc_html__( 'Padding', 'textdomain' ),
'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
'selectors' => [
'{{WRAPPER}} .widget-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
],
]
);
$this->end_controls_section();
}
}
Responsive Choose
Finally, we are going to use the select/choose control, which is defined in Control_Choose. This will allow us to set custom alignments with responsive values, allowing users to set different alignments for different screen sizes.
```php {13-35} class Elementor_Test_Widget extends \Elementor\Widget_Base {
protected function register_controls(): void {
$this->start_controls_section(
'style_section',
[
'label' => esc_html__( 'Style Section', 'textdomain' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
]
);
$this->add_responsive_control(
'content_align',
[
'type' => \Elementor\Controls_Manager::CHOOSE,
'label' => esc_html__( 'Alignment', 'textdomain' ),
'options' => [
'left' => [
'title' => esc_html__( 'Left', 'textdomain' ),
'icon' => 'eicon-text-align-left',
],
'center' => [
'title' => esc_html__( 'Center', 'textdomain' ),
'icon' => 'eicon-text-align-center',
],
'right' => [
'title' => esc_html__( 'Right', 'textdomain' ),
'icon' => 'eicon-text-align-right',
],
],
'devices' => [ 'desktop', 'tablet' ],
'prefix_class' => 'content-align-%s',
]
);
$this->end_controls_section();
}
} ```