视觉选择控件

Elementor 视觉选择控件将单选按钮显示为带图像的按钮组。

该控件定义在继承 Base_Data_Control 类的 Control_Visual_Choice 类中。

使用此控件时，type 应设置为 \Elementor\Controls_Manager::VISUAL_CHOICE 常量。

参数

Return Value

(string) The selected option value.

Usage

<?php
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_control(
			'structure',
			[
				'label' => esc_html__( 'Structure', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::VISUAL_CHOICE,
				'label_block' => true,
				'options' => [
					'grid-3' => [
						'title' => esc_attr__( 'Grid: 3 columns.', 'textdomain' ),
						'image' => plugins_url( 'assets/img/grid-3.svg', __FILE__ ),
					],
					'masonry' => [
						'title' => esc_attr__( 'Masonry: arbitrary order', 'textdomain' ),
						'image' => plugins_url( 'assets/img/masonry.svg', __FILE__ ),
					],
					'stacked' => [
						'title' => esc_attr__( 'Stacked: Single column.', 'textdomain' ),
						'image' => plugins_url( 'assets/img/stacked.svg', __FILE__ ),
					],
					'focus' => [
						'title' => esc_attr__( 'Focus: Text only.', 'textdomain' ),
						'image' => plugins_url( 'assets/img/focus.svg', __FILE__ ),
					],
					'grid-2' => [
						'title' => esc_attr__( 'Grid: 2 columns.', 'textdomain' ),
						'image' => plugins_url( 'assets/img/grid2.svg', __FILE__ ),
					],
					'stretch' => [
						'title' => esc_attr__( 'Stretch: fit available width.', 'textdomain' ),
						'image' => plugins_url( 'assets/img/stretch.svg', __FILE__ ),
					]
				],
				'default' => 'masonry',
				'columns' => 2,
				'prefix_class' => 'some-layout-',
			]
		);

		$this->end_controls_section();

	}

	protected function render(): void {
		$settings = $this->get_settings_for_display();
		?>
		<div class="your-class">
			...
		</div>
		<?php
	}

	protected function content_template(): void {
		?>
		<div class="your-class">
			...
		</div>
		<?php
	}

}