选择控件

Elementor 选择控件显示一个简单的下拉选择框。它接受一个数组，其中 key 是选项的 value，而值则是选项名称。

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

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

参数

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(
			'border_style',
			[
				'label' => esc_html__( 'Border Style', 'textdomain' ),
				'type' => \Elementor\Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => [
					'' => esc_html__( 'Default', 'textdomain' ),
					'none' => esc_html__( 'None', 'textdomain' ),
					'solid'  => esc_html__( 'Solid', 'textdomain' ),
					'dashed' => esc_html__( 'Dashed', 'textdomain' ),
					'dotted' => esc_html__( 'Dotted', 'textdomain' ),
					'double' => esc_html__( 'Double', 'textdomain' ),
				],
				'selectors' => [
					'{{WRAPPER}} .your-class' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'custom_animation',
			[
				'label' => esc_html__( 'Animation', 'textdomain' ),
				'type' => Controls_Manager::SELECT,
				'groups' => [
					[
						'label' => esc_html__( 'None', 'textdomain' ),
						'options' => [
							'' => esc_html__( 'None', 'textdomain' ),
						],
					],
					[
						'label' => esc_html__( 'Slide', 'textdomain' ),
						'options' => [
							'slide-from-right' => esc_html__( 'Slide In Right', 'textdomain' ),
							'slide-from-left' => esc_html__( 'Slide In Left', 'textdomain' ),
							'slide-from-top' => esc_html__( 'Slide In Up', 'textdomain' ),
							'slide-from-bottom' => esc_html__( 'Slide In Down', 'textdomain' ),
						],
					],
					[
						'label' => esc_html__( 'Zoom', 'textdomain' ),
						'options' => [
							'grow' => esc_html__( 'Grow', 'textdomain' ),
							'shrink' => esc_html__( 'Shrink', 'textdomain' ),
							'zoom-in' => esc_html__( 'Zoom In', 'textdomain' ),
							'zoom-out' => esc_html__( 'Zoom Out', 'textdomain' ),
						],
					],
				],
				'prefix_class' => 'custom-animation-',
			]
		);

		$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
	}

}