@@ -9,21 +9,20 @@ functional_areas:
9
9
10
10
## Overview
11
11
12
- Widget source file is [ lib/web/mage/dropdowns.js ] .
12
+ Use the dropdown widget to display custom content on the storefront .
13
13
14
- The dropdown widget allows to show on storefront a select box with custom
15
- content for each of available options.
14
+ Widget source file is [ lib/web/mage/dropdowns.js] .
16
15
17
16
18
17
** Usages:**
19
18
- [ Shipping policy]
20
19
- [ Customer menu]
21
- - [ UI Tooltip ]
20
+ - [ UI tooltip ]
22
21
23
22
[ lib/web/mage/dropdowns.js] : {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/dropdowns.js
24
23
[ Shipping policy] : {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Shipping/view/frontend/web/template/checkout/shipping/shipping-policy.html
25
24
[ Customer menu] : {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Customer/view/frontend/templates/account/customer.phtml
26
- [ UI Tooltip ] : {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html
25
+ [ UI tooltip ] : {{ site.mage2bloburl }}/{{ page.guide_version }}/app/code/Magento/Ui/view/frontend/web/templates/form/element/helper/tooltip.html
27
26
28
27
### HTML markup
29
28
@@ -48,8 +47,7 @@ content for each of available options.
48
47
49
48
### Styles
50
49
51
- The dropdown widget is not styled out of the box.
52
- Use [ LESS mixin ` .lib-dropdown() ` ] to customize it.
50
+ Because the dropdown widget is not formatted by default, use [ LESS mixin ` .lib-dropdown() ` ] to customize it.
53
51
54
52
``` less
55
53
//
@@ -105,7 +103,7 @@ Use [LESS mixin `.lib-dropdown()`] to customize it.
105
103
106
104
## Initialize the dropdown widget {#dropdown_init}
107
105
108
- The loader widget is initialized as described in [ JavaScript initialization] .
106
+ The dropdown widget is initialized as described in [ JavaScript initialization] ({{ page.baseurl }}/javascript-dev-guide/javascript/js_init.html) .
109
107
110
108
### Initialize with ` data-mage-init ` attribute
111
109
@@ -136,10 +134,9 @@ $('.magento__dropdown-widget').dropdown();
136
134
- [ activeClass] ( #d_activeClass )
137
135
138
136
139
- ### ` parent ` {#d_parent}
137
+ ### ` parent ` {#d_parent}
140
138
141
- The parent of element on which the widget was initialized. If not specified,
142
- the widget finds it himself with jQuery method ` .parent() ` .
139
+ The parent element that initialized the widget. If not specified, the widget locates the element using the ` .parent() ` jQuery method.
143
140
144
141
** Type** :
145
142
@@ -150,38 +147,34 @@ the widget finds it himself with jQuery method `.parent()`.
150
147
** Default value** : ` null `
151
148
152
149
153
- ### ` autoclose ` {#d_autoclose}
150
+ ### ` autoclose ` {#d_autoclose}
154
151
155
- Whenever to close or not the dropdown menu when the click is performed outside of dropdown scope.
152
+ Determines whether to close the dropdown menu when the user clicks outside of the dropdown scope.
156
153
157
154
** Type** : Boolean
158
155
159
156
** Default value** : ` true `
160
157
161
158
162
- ### ` btnArrow ` {#d_btnArrow}
159
+ ### ` btnArrow ` {#d_btnArrow}
163
160
164
- A jQuery selector for the arrow that expresses the state of the dropdown.
165
- The widget changes given element's text to '+' or '-", depending on the dropdown state.
166
- It's not required the element to be present in the dropdown HTML markup. It works
167
- just fine without it as well.
161
+ (Optional) A jQuery selector that updates the arrow to ` + ` or ` - ` based on the state of the dropdown.
168
162
169
163
** Type** : String
170
164
171
165
** Default value** : ` .arrow `
172
166
173
167
174
- ### ` menu ` {#d_menu}
168
+ ### ` menu ` {#d_menu}
175
169
176
- A jQuery selector that represents the dropdown's menu element.
177
- Looking at the HTML markup, given element has to be inside the ` parent ` option.
170
+ A jQuery selector that represents the dropdown's menu element. ` menu ` must be inside the ` parent ` element.
178
171
179
172
** Type** : String
180
173
181
174
** Default value** : ` [data-target="dropdown"] `
182
175
183
176
184
- ### ` activeClass ` {#d_activeClass}
177
+ ### ` activeClass ` {#d_activeClass}
185
178
186
179
Given class is added to the widget element when the menu is visible.
187
180
0 commit comments