Skip to content

Commit 0a54167

Browse files
rami-elementorrami-elementor
authored
Add New: Visual Choice Control (#310)
1 parent d74c4e4 commit 0a54167

File tree

3 files changed

+169
-0
lines changed

3 files changed

+169
-0
lines changed

‎src/.vuepress/public/assets/img/controls/control-visual-choice.png‎

5.66 KB
Loading

‎src/.vuepress/sidebars/editor-controls.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ module.exports = [
4343
'control-select',
4444
'control-select2',
4545
'control-choose',
46+
'control-visual-choice',
4647
'control-color',
4748
'control-icon',
4849
'control-font',

‎src/editor-controls/control-visual-choice.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
# Visual Choice Control
2+
3+
<Badge type="tip" vertical="top" text="Elementor Core" /> <Badge type="warning" vertical="top" text="Basic" />
4+
5+
<img :src="$withBase('/assets/img/controls/control-visual-choice.png')" alt="Visual Choice Control" style="float: right;">
6+
7+
Elementor visual choice control displays radio buttons styled as groups of buttons with an image for each option.
8+
9+
The control is defined in `Control_Visual_Choice` class which extends `Base_Data_Control` class.
10+
11+
When using this control, the `type` should be set to `\Elementor\Controls_Manager::VISUAL_CHOICE` constant.
12+
13+
## Arguments
14+
15+
<table>
16+
<thead>
17+
<tr>
18+
<th>Name</th>
19+
<th>Type</th>
20+
<th>Default</th>
21+
<th>Description</th>
22+
</tr>
23+
</thead>
24+
<tbody>
25+
<tr>
26+
<td><code>type</code></td>
27+
<td><code>string</code></td>
28+
<td>visual_choice</td>
29+
<td>The type of the control.</td>
30+
</tr>
31+
<tr>
32+
<td><code>label</code></td>
33+
<td><code>string</code></td>
34+
<td></td>
35+
<td>The label that appears above of the field.</td>
36+
</tr>
37+
<tr>
38+
<td><code>description</code></td>
39+
<td><code>string</code></td>
40+
<td></td>
41+
<td>The description that appears below the field.</td>
42+
</tr>
43+
<tr>
44+
<td><code>show_label</code></td>
45+
<td><code>bool</code></td>
46+
<td>true</td>
47+
<td>Whether to display the label.</td>
48+
</tr>
49+
<tr>
50+
<td><code>label_block</code></td>
51+
<td><code>bool</code></td>
52+
<td>true</td>
53+
<td>Whether to display the label in a separate line.</td>
54+
</tr>
55+
<tr>
56+
<td><code>separator</code></td>
57+
<td><code>string</code></td>
58+
<td>default</td>
59+
<td>Set the position of the control separator. Available values are <code>default</code>, <code>before</code> and <code>after</code>. <code>default</code> will hide the separator, unless the control type has specific separator settings. <code>before</code> / <code>after</code> will position the separator before/after the control.</td>
60+
</tr>
61+
<tr>
62+
<td><code>options</code></td>
63+
<td><code>array</code></td>
64+
<td>[]</td>
65+
<td>A multi dimensional array containing the <code>title</code> and the <code>icon</code> for each radio button: <code>[ [ 'title' =&gt; '', 'image' =&gt; '' ], [ 'title' =&gt; '', 'image' =&gt; '' ], ... ]</code>.</td>
66+
</tr>
67+
<tr>
68+
<td><code>columns</code></td>
69+
<td><code>number</code></td>
70+
<td>1</td>
71+
<td>Whether to allow toggle / unset the selection.</td>
72+
</tr>
73+
<tr>
74+
<td><code>toggle</code></td>
75+
<td><code>bool</code></td>
76+
<td>true</td>
77+
<td>Whether to allow toggle / unset the selection.</td>
78+
</tr>
79+
<tr>
80+
<td><code>default</code></td>
81+
<td><code>string</code></td>
82+
<td></td>
83+
<td>The field default value.</td>
84+
</tr>
85+
</tbody>
86+
</table>
87+
88+
## Return Value
89+
90+
(_`string`_) The selected option value.
91+
92+
## Usage
93+
94+
```php {14-50}
95+
<?php
96+
class Elementor_Test_Widget extends \Elementor\Widget_Base {
97+
98+
protected function register_controls(): void {
99+
100+
$this->start_controls_section(
101+
'style_section',
102+
[
103+
'label' => esc_html__( 'Style', 'textdomain' ),
104+
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
105+
]
106+
);
107+
108+
$this->add_control(
109+
'structure',
110+
[
111+
'label' => esc_html__( 'Structure', 'textdomain' ),
112+
'type' => \Elementor\Controls_Manager::VISUAL_CHOICE,
113+
'label_block' => true,
114+
'default' => 'masonry',
115+
'columns' => 3,
116+
'options' => [
117+
'grid-3' => [
118+
'title' => esc_attr__( 'Grid: 3 columns.', 'textdomain' ),
119+
'image' => plugins_url( 'assets/img/grid-3.svg', __FILE__ ),
120+
],
121+
'masonry' => [
122+
'title' => esc_attr__( 'Masonry: arbitrary order', 'textdomain' ),
123+
'image' => plugins_url( 'assets/img/masonry.svg', __FILE__ ),
124+
],
125+
'stacked' => [
126+
'title' => esc_attr__( 'Stacked: Single column.', 'textdomain' ),
127+
'image' => plugins_url( 'assets/img/stacked.svg', __FILE__ ),
128+
],
129+
'focus' => [
130+
'title' => esc_attr__( 'Focus: Text only.', 'textdomain' ),
131+
'image' => plugins_url( 'assets/img/focus.svg', __FILE__ ),
132+
],
133+
'grid-2' => [
134+
'title' => esc_attr__( 'Grid: 2 columns.', 'textdomain' ),
135+
'image' => plugins_url( 'assets/img/grid2.svg', __FILE__ ),
136+
],
137+
'stretch' => [
138+
'title' => esc_attr__( 'Stretch: fit available width.', 'textdomain' ),
139+
'image' => plugins_url( 'assets/img/stretch.svg', __FILE__ ),
140+
]
141+
],
142+
'prefix_class' => 'some-layout-',
143+
]
144+
);
145+
146+
$this->end_controls_section();
147+
148+
}
149+
150+
protected function render(): void {
151+
$settings = $this->get_settings_for_display();
152+
?>
153+
<div class="your-class">
154+
...
155+
</div>
156+
<?php
157+
}
158+
159+
protected function content_template(): void {
160+
?>
161+
<div class="your-class">
162+
...
163+
</div>
164+
<?php
165+
}
166+
167+
}
168+
```

0 commit comments

Comments
 (0)