组合控制

组合控制是一组具有相似功能的常规控件和响应式控件，它们被组合成一个单一控件（例如：排版控制、文本阴影控制、盒阴影控制）。要添加组合控件，我们使用 add_group_control() 方法。

分组控件结构

使用以下代码添加分组控件：

$this->add_group_control(
	Group_Control_Class::get_type(),
	[
		'name' => 'control_name',
		'label' => esc_html__( '内容', 'textdomain' ),
	]
);

控制参数

每个控件包含以下关键参数：

• 组控件类型 (string) – 组控件的唯一名称。
• 组控件设置 (array) – 额外的控制参数。除基于控件类型的默认设置外，每个控件还有其专属的自定义设置。例如，"exclude" 设置可用于从组中排除某些内部控件。

示例

版式控制

当向 Elementor 小部件添加标题和自定义内容时，我们需要允许用户设计文本样式。我们可以使用 Group_Control_Typography 类中定义的版式控制来设置字体大小、字体系列、字体粗细、文本转换、字体样式、行高和字母间距。

class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Typography::get_type(),
			[
				'name' => 'title_typography',
				'selector' => '{{WRAPPER}} .title',
			]
		);

		$this->end_controls_section();

	}

}

边框控制

边框控制与排版控制略有不同。它通过 Group_Control_Border 类来定义，用于设置边框类型、边框宽度和边框颜色：

class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls(): void {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'border',
				'selector' => '{{WRAPPER}} .wrapper',
			]
		);

		$this->end_controls_section();

	}

}

Group Control Fields Options

Here's an advanced setup for changing inner controls inside the group control using fields_options:

class Elementor_Test_Widget extends \Elementor\Widget_Base {

	protected function register_controls() {

		$this->start_controls_section(
			'style_section',
			[
				'label' => esc_html__( 'Style', 'textdomain' ),
				'tab' => \Elementor\Controls_Manager::TAB_STYLE,
			]
		);

		$this->add_group_control(
			\Elementor\Group_Control_Border::get_type(),
			[
				'name' => 'box_border',
				'label' => esc_html__( 'Box Border', 'textdomain' ),
				'fields_options' => [
					'border' => [
						'label' => esc_html__( 'Box Border Type', 'textdomain' ),
						'default' => 'solid',
					],
					'width' => [
						'label' => esc_html__( 'Box Border Width', 'textdomain' ),
						'default' => [
							'top' => '1',
							'right' => '2',
							'bottom' => '3',
							'left' => '4',
							'isLinked' => false,
						],
					],
					'color' => [
						'label' => esc_html__( 'Box Border Color', 'textdomain' ),
						'default' => '#D4D4D4',
					],
				],
				'selector' => '{{WRAPPER}} .some-box',
			]
		);

		$this->end_controls_section();

	}

}