@aurodesignsystem-dev/auro-accordion 0.0.0-pr214.0 → 0.0.0-pr215.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -59
- package/custom-elements.json +637 -995
- package/demo/api.md +760 -112
- package/demo/auro-accordion.min.js +6 -11
- package/demo/index.md +81 -84
- package/dist/{auro-accordion-B5LyAZiI.js → auro-accordion-Dlfg1ee3.js} +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +7 -7
package/demo/api.md
CHANGED
|
@@ -8,67 +8,49 @@ Use auro-accordion-group if you want to have auto closing accordion components w
|
|
|
8
8
|
|
|
9
9
|
### Properties & Attributes
|
|
10
10
|
|
|
11
|
-
| Properties | Attributes |
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
|
18
|
-
|
|
19
|
-
|
|
|
20
|
-
|
|
11
|
+
| Properties | Attributes | Type | Default | Description |
|
|
12
|
+
| --- | --- | --- | --- | --- |
|
|
13
|
+
expanded | expanded | boolean | false | If set, the accordion is expanded.
|
|
14
|
+
alignRight | alignRight | boolean | | If set, the trigger content will align right.
|
|
15
|
+
emphasis | emphasis | boolean | | If set, emphasis styles will be applied to the auro-accordions.
|
|
16
|
+
grouped | grouped | boolean | | Attribute will be set on accordion when it appears in an accordion group.
|
|
17
|
+
chevron | chevron | string | | Sets chevron variant option. Possible values are: `none`, `right`.
|
|
18
|
+
variant | variant | string | | Sets accordion variant option. Possible values are: `sm`, `lg`.
|
|
19
|
+
disabled | disabled | boolean | | If set, the accordion is disabled and have reduced opacity.
|
|
20
|
+
|
|
21
21
|
### Methods
|
|
22
22
|
|
|
23
|
-
| Name
|
|
24
|
-
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
23
|
+
| Name | Parameters | Return | Description |
|
|
24
|
+
| --- | --- | --- | --- |
|
|
25
|
+
register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser.
|
|
26
|
+
toggle | None | | Toggles the visibility of the accordion content.
|
|
27
|
+
|
|
28
28
|
### Events
|
|
29
29
|
|
|
30
|
-
| Name
|
|
31
|
-
|
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
| Name | Description |
|
|
31
|
+
| --- | --- |
|
|
32
|
+
toggleExpanded | Notifies that the accordion has been expanded or closed.
|
|
33
|
+
|
|
34
34
|
### Slots
|
|
35
35
|
|
|
36
|
-
| Name
|
|
37
|
-
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
### CSS Shadow Parts
|
|
42
|
-
|
|
43
|
-
| Name | Description |
|
|
44
|
-
| --------- | ----------------------------------- |
|
|
45
|
-
| accordion | Apply CSS to Accordion wrapper. |
|
|
46
|
-
| chevron | Apply CSS to chevron icon. |
|
|
47
|
-
| content | Apply CSS to the accordion content. |
|
|
48
|
-
| trigger | Apply CSS to trigger element. |
|
|
49
|
-
|
|
50
|
-
# auro-accordion-group
|
|
51
|
-
|
|
52
|
-
Auro-accordion provides users a way to have collapsible content on a page.
|
|
53
|
-
Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
|
|
36
|
+
| Name | Description |
|
|
37
|
+
| --- | --- |
|
|
38
|
+
(default) | Default slot for the accordion content.
|
|
39
|
+
trigger | Defines the content of the trigger element.
|
|
54
40
|
|
|
55
|
-
###
|
|
56
|
-
|
|
57
|
-
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
58
|
-
| ---------- | ---------- | --------- | ------------ | ------- | ----------------------------------------------------------------------------------- |
|
|
59
|
-
| disabled | disabled | | boolean | | If set, the whole accordion inside the group are disabled and have reduced opacity. |
|
|
60
|
-
| emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
|
|
61
|
-
| variant | variant | | 'sm' \| 'lg' | | Sets accordion variant option. |
|
|
62
|
-
|
|
63
|
-
### Methods
|
|
41
|
+
### CSS Shadow Parts
|
|
64
42
|
|
|
65
|
-
| Name
|
|
66
|
-
|
|
|
67
|
-
|
|
68
|
-
|
|
43
|
+
| Name | Description |
|
|
44
|
+
| --- | --- |
|
|
45
|
+
accordion | Apply CSS to Accordion wrapper.
|
|
46
|
+
trigger | Apply CSS to trigger element.
|
|
47
|
+
chevron | Apply CSS to chevron icon.
|
|
48
|
+
content | Apply CSS to the accordion content.
|
|
69
49
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
70
50
|
|
|
71
|
-
##
|
|
51
|
+
## Accordion API Examples
|
|
52
|
+
|
|
53
|
+
### Basic
|
|
72
54
|
|
|
73
55
|
<div class="exampleWrapper">
|
|
74
56
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
@@ -89,11 +71,90 @@ Use auro-accordion-group if you want to have auto closing accordion components w
|
|
|
89
71
|
</p>
|
|
90
72
|
</auro-accordion>
|
|
91
73
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
92
|
-
</div>
|
|
74
|
+
</div>
|
|
93
75
|
<auro-accordion alignRight>
|
|
94
76
|
<span slot="trigger">See code</span>
|
|
95
|
-
|
|
96
|
-
|
|
77
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
78
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<auro-accordion>
|
|
82
|
+
<span slot="trigger">Trigger</span>
|
|
83
|
+
<p>
|
|
84
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
85
|
+
</p>
|
|
86
|
+
<p>
|
|
87
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
88
|
+
</p>
|
|
89
|
+
<p>
|
|
90
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
91
|
+
</p>
|
|
92
|
+
<p>
|
|
93
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
94
|
+
</p>
|
|
95
|
+
</auro-accordion>
|
|
96
|
+
```
|
|
97
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
98
|
+
</auro-accordion>
|
|
99
|
+
<div class="exampleWrapper">
|
|
100
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroup.html) -->
|
|
101
|
+
<!-- The below content is automatically added from ./../apiExamples/accordionGroup.html -->
|
|
102
|
+
<auro-accordion-group>
|
|
103
|
+
<auro-accordion>
|
|
104
|
+
<span slot="trigger">Trigger</span>
|
|
105
|
+
<p>
|
|
106
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
107
|
+
</p>
|
|
108
|
+
<p>
|
|
109
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
110
|
+
</p>
|
|
111
|
+
<p>
|
|
112
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
113
|
+
</p>
|
|
114
|
+
<p>
|
|
115
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
116
|
+
</p>
|
|
117
|
+
</auro-accordion>
|
|
118
|
+
<auro-accordion>
|
|
119
|
+
<span slot="trigger">Trigger</span>
|
|
120
|
+
<p>
|
|
121
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
122
|
+
</p>
|
|
123
|
+
<p>
|
|
124
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
125
|
+
</p>
|
|
126
|
+
<p>
|
|
127
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
128
|
+
</p>
|
|
129
|
+
<p>
|
|
130
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
131
|
+
</p>
|
|
132
|
+
</auro-accordion>
|
|
133
|
+
<auro-accordion>
|
|
134
|
+
<span slot="trigger">Trigger</span>
|
|
135
|
+
<p>
|
|
136
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
137
|
+
</p>
|
|
138
|
+
<p>
|
|
139
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
140
|
+
</p>
|
|
141
|
+
<p>
|
|
142
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
143
|
+
</p>
|
|
144
|
+
<p>
|
|
145
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
146
|
+
</p>
|
|
147
|
+
</auro-accordion>
|
|
148
|
+
</auro-accordion-group>
|
|
149
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
|
+
</div>
|
|
151
|
+
<auro-accordion alignRight>
|
|
152
|
+
<span slot="trigger">See code</span>
|
|
153
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroup.html) -->
|
|
154
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/accordionGroup.html -->
|
|
155
|
+
|
|
156
|
+
```html
|
|
157
|
+
<auro-accordion-group>
|
|
97
158
|
<auro-accordion>
|
|
98
159
|
<span slot="trigger">Trigger</span>
|
|
99
160
|
<p>
|
|
@@ -109,19 +170,51 @@ Use auro-accordion-group if you want to have auto closing accordion components w
|
|
|
109
170
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
110
171
|
</p>
|
|
111
172
|
</auro-accordion>
|
|
112
|
-
|
|
173
|
+
<auro-accordion>
|
|
174
|
+
<span slot="trigger">Trigger</span>
|
|
175
|
+
<p>
|
|
176
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
177
|
+
</p>
|
|
178
|
+
<p>
|
|
179
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
180
|
+
</p>
|
|
181
|
+
<p>
|
|
182
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
183
|
+
</p>
|
|
184
|
+
<p>
|
|
185
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
186
|
+
</p>
|
|
187
|
+
</auro-accordion>
|
|
188
|
+
<auro-accordion>
|
|
189
|
+
<span slot="trigger">Trigger</span>
|
|
190
|
+
<p>
|
|
191
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
192
|
+
</p>
|
|
193
|
+
<p>
|
|
194
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
195
|
+
</p>
|
|
196
|
+
<p>
|
|
197
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
198
|
+
</p>
|
|
199
|
+
<p>
|
|
200
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
201
|
+
</p>
|
|
202
|
+
</auro-accordion>
|
|
203
|
+
</auro-accordion-group>
|
|
204
|
+
```
|
|
205
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
113
206
|
</auro-accordion>
|
|
114
207
|
|
|
115
|
-
|
|
208
|
+
### Accordion Attribute Examples
|
|
116
209
|
|
|
117
|
-
|
|
210
|
+
#### No Chevron
|
|
118
211
|
|
|
119
|
-
|
|
212
|
+
The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
|
|
120
213
|
|
|
121
214
|
<div class="exampleWrapper">
|
|
122
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
123
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
124
|
-
<auro-accordion
|
|
215
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
|
|
216
|
+
<!-- The below content is automatically added from ./../apiExamples/chevronNone.html -->
|
|
217
|
+
<auro-accordion chevron="none">
|
|
125
218
|
<span slot="trigger">Trigger</span>
|
|
126
219
|
<p>
|
|
127
220
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -140,11 +233,11 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
|
|
|
140
233
|
</div>
|
|
141
234
|
<auro-accordion alignRight>
|
|
142
235
|
<span slot="trigger">See code</span>
|
|
143
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
144
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
236
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
|
|
237
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/chevronNone.html -->
|
|
145
238
|
|
|
146
239
|
```html
|
|
147
|
-
<auro-accordion
|
|
240
|
+
<auro-accordion chevron="none">
|
|
148
241
|
<span slot="trigger">Trigger</span>
|
|
149
242
|
<p>
|
|
150
243
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -163,7 +256,7 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
|
|
|
163
256
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
164
257
|
</auro-accordion>
|
|
165
258
|
|
|
166
|
-
|
|
259
|
+
#### Chevron Right
|
|
167
260
|
|
|
168
261
|
Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
|
|
169
262
|
|
|
@@ -186,8 +279,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
|
|
|
186
279
|
</p>
|
|
187
280
|
</auro-accordion>
|
|
188
281
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
189
|
-
</div>
|
|
190
|
-
<auro-accordion alignRight>
|
|
282
|
+
</div>
|
|
283
|
+
<auro-accordion alignRight chevron>
|
|
191
284
|
<span slot="trigger">See code</span>
|
|
192
285
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
|
|
193
286
|
<!-- The below code snippet is automatically added from ./../apiExamples/chevronRight.html -->
|
|
@@ -212,14 +305,14 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
|
|
|
212
305
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
213
306
|
</auro-accordion>
|
|
214
307
|
|
|
215
|
-
|
|
308
|
+
#### alignRight
|
|
216
309
|
|
|
217
|
-
|
|
310
|
+
Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
|
|
218
311
|
|
|
219
312
|
<div class="exampleWrapper">
|
|
220
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
221
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
222
|
-
<auro-accordion
|
|
313
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
|
|
314
|
+
<!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
|
|
315
|
+
<auro-accordion alignRight>
|
|
223
316
|
<span slot="trigger">Trigger</span>
|
|
224
317
|
<p>
|
|
225
318
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -235,14 +328,14 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
|
|
|
235
328
|
</p>
|
|
236
329
|
</auro-accordion>
|
|
237
330
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
238
|
-
</div>
|
|
331
|
+
</div>
|
|
239
332
|
<auro-accordion alignRight>
|
|
240
333
|
<span slot="trigger">See code</span>
|
|
241
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
242
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
334
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
|
|
335
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
|
|
243
336
|
|
|
244
337
|
```html
|
|
245
|
-
<auro-accordion
|
|
338
|
+
<auro-accordion alignRight>
|
|
246
339
|
<span slot="trigger">Trigger</span>
|
|
247
340
|
<p>
|
|
248
341
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -261,7 +354,56 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
|
|
|
261
354
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
262
355
|
</auro-accordion>
|
|
263
356
|
|
|
264
|
-
|
|
357
|
+
#### align chevron right
|
|
358
|
+
|
|
359
|
+
Using the `alignRight` attribute in conjuction with the `chevron="right"` attribute will cause the trigger to align to the right edge of the accordion, with the chevron appearing on the right side of the trigger.
|
|
360
|
+
|
|
361
|
+
<div class="exampleWrapper">
|
|
362
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
|
|
363
|
+
<!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
|
|
364
|
+
<auro-accordion chevron="right" alignRight>
|
|
365
|
+
<span slot="trigger">Trigger</span>
|
|
366
|
+
<p>
|
|
367
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
368
|
+
</p>
|
|
369
|
+
<p>
|
|
370
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
371
|
+
</p>
|
|
372
|
+
<p>
|
|
373
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
374
|
+
</p>
|
|
375
|
+
<p>
|
|
376
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
377
|
+
</p>
|
|
378
|
+
</auro-accordion>
|
|
379
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
380
|
+
</div>
|
|
381
|
+
<auro-accordion alignRight>
|
|
382
|
+
<span slot="trigger">See code</span>
|
|
383
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
|
|
384
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/alignChevronRight.html -->
|
|
385
|
+
|
|
386
|
+
```html
|
|
387
|
+
<auro-accordion chevron="right" alignRight>
|
|
388
|
+
<span slot="trigger">Trigger</span>
|
|
389
|
+
<p>
|
|
390
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
391
|
+
</p>
|
|
392
|
+
<p>
|
|
393
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
394
|
+
</p>
|
|
395
|
+
<p>
|
|
396
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
397
|
+
</p>
|
|
398
|
+
<p>
|
|
399
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
400
|
+
</p>
|
|
401
|
+
</auro-accordion>
|
|
402
|
+
```
|
|
403
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
404
|
+
</auro-accordion>
|
|
405
|
+
|
|
406
|
+
#### disabled
|
|
265
407
|
|
|
266
408
|
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
|
|
267
409
|
|
|
@@ -284,7 +426,7 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
284
426
|
</p>
|
|
285
427
|
</auro-accordion>
|
|
286
428
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
287
|
-
</div>
|
|
429
|
+
</div>
|
|
288
430
|
<auro-accordion alignRight>
|
|
289
431
|
<span slot="trigger">See code</span>
|
|
290
432
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
@@ -310,7 +452,7 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
310
452
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
311
453
|
</auro-accordion>
|
|
312
454
|
|
|
313
|
-
|
|
455
|
+
#### expanded
|
|
314
456
|
|
|
315
457
|
The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
|
|
316
458
|
|
|
@@ -335,7 +477,7 @@ The accordion can be programatically expanded or collapsed by setting the `expan
|
|
|
335
477
|
</p>
|
|
336
478
|
</auro-accordion>
|
|
337
479
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
338
|
-
</div>
|
|
480
|
+
</div>
|
|
339
481
|
<auro-accordion alignRight>
|
|
340
482
|
<span slot="trigger">See code</span>
|
|
341
483
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
|
|
@@ -360,7 +502,7 @@ The accordion can be programatically expanded or collapsed by setting the `expan
|
|
|
360
502
|
</p>
|
|
361
503
|
</auro-accordion>
|
|
362
504
|
```
|
|
363
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
505
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
364
506
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
|
|
365
507
|
<!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
|
|
366
508
|
|
|
@@ -386,26 +528,313 @@ export function expandedExample() {
|
|
|
386
528
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
387
529
|
</auro-accordion>
|
|
388
530
|
|
|
389
|
-
##
|
|
390
|
-
|
|
391
|
-
<!-- Add all method examples here, remove section if none exist -->
|
|
531
|
+
## Accordion Group Attribute Examples
|
|
392
532
|
|
|
393
|
-
|
|
533
|
+
### Small
|
|
394
534
|
|
|
395
|
-
|
|
535
|
+
Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
|
|
536
|
+
|
|
537
|
+
<div class="exampleWrapper">
|
|
538
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupSm.html) -->
|
|
539
|
+
<!-- The below content is automatically added from ./../apiExamples/accordionGroupSm.html -->
|
|
540
|
+
<auro-accordion-group variant="sm">
|
|
541
|
+
<auro-accordion>
|
|
542
|
+
<span slot="trigger">Trigger</span>
|
|
543
|
+
<p>
|
|
544
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
545
|
+
</p>
|
|
546
|
+
<p>
|
|
547
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
548
|
+
</p>
|
|
549
|
+
<p>
|
|
550
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
551
|
+
</p>
|
|
552
|
+
<p>
|
|
553
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
554
|
+
</p>
|
|
555
|
+
</auro-accordion>
|
|
556
|
+
<auro-accordion>
|
|
557
|
+
<span slot="trigger">Trigger</span>
|
|
558
|
+
<p>
|
|
559
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
560
|
+
</p>
|
|
561
|
+
<p>
|
|
562
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
563
|
+
</p>
|
|
564
|
+
<p>
|
|
565
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
566
|
+
</p>
|
|
567
|
+
<p>
|
|
568
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
569
|
+
</p>
|
|
570
|
+
</auro-accordion>
|
|
571
|
+
<auro-accordion>
|
|
572
|
+
<span slot="trigger">Trigger</span>
|
|
573
|
+
<p>
|
|
574
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
575
|
+
</p>
|
|
576
|
+
<p>
|
|
577
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
578
|
+
</p>
|
|
579
|
+
<p>
|
|
580
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
581
|
+
</p>
|
|
582
|
+
<p>
|
|
583
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
584
|
+
</p>
|
|
585
|
+
</auro-accordion>
|
|
586
|
+
</auro-accordion-group>
|
|
587
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
588
|
+
</div>
|
|
589
|
+
<auro-accordion alignRight>
|
|
590
|
+
<span slot="trigger">See code</span>
|
|
591
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupSm.html) -->
|
|
592
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupSm.html -->
|
|
396
593
|
|
|
397
|
-
|
|
594
|
+
```html
|
|
595
|
+
<auro-accordion-group variant="sm">
|
|
596
|
+
<auro-accordion>
|
|
597
|
+
<span slot="trigger">Trigger</span>
|
|
598
|
+
<p>
|
|
599
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
600
|
+
</p>
|
|
601
|
+
<p>
|
|
602
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
603
|
+
</p>
|
|
604
|
+
<p>
|
|
605
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
606
|
+
</p>
|
|
607
|
+
<p>
|
|
608
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
609
|
+
</p>
|
|
610
|
+
</auro-accordion>
|
|
611
|
+
<auro-accordion>
|
|
612
|
+
<span slot="trigger">Trigger</span>
|
|
613
|
+
<p>
|
|
614
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
615
|
+
</p>
|
|
616
|
+
<p>
|
|
617
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
618
|
+
</p>
|
|
619
|
+
<p>
|
|
620
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
621
|
+
</p>
|
|
622
|
+
<p>
|
|
623
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
624
|
+
</p>
|
|
625
|
+
</auro-accordion>
|
|
626
|
+
<auro-accordion>
|
|
627
|
+
<span slot="trigger">Trigger</span>
|
|
628
|
+
<p>
|
|
629
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
630
|
+
</p>
|
|
631
|
+
<p>
|
|
632
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
633
|
+
</p>
|
|
634
|
+
<p>
|
|
635
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
636
|
+
</p>
|
|
637
|
+
<p>
|
|
638
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
639
|
+
</p>
|
|
640
|
+
</auro-accordion>
|
|
641
|
+
</auro-accordion-group>
|
|
642
|
+
```
|
|
643
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
644
|
+
</auro-accordion>
|
|
645
|
+
|
|
646
|
+
### Large
|
|
647
|
+
|
|
648
|
+
Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
|
|
398
649
|
|
|
399
|
-
|
|
650
|
+
<div class="exampleWrapper">
|
|
651
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accordionGroupLg.html) -->
|
|
652
|
+
<!-- The below content is automatically added from ./../apiExamples/accordionGroupLg.html -->
|
|
653
|
+
<auro-accordion-group variant="lg">
|
|
654
|
+
<auro-accordion>
|
|
655
|
+
<span slot="trigger">Trigger</span>
|
|
656
|
+
<p>
|
|
657
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
658
|
+
</p>
|
|
659
|
+
<p>
|
|
660
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
661
|
+
</p>
|
|
662
|
+
<p>
|
|
663
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
664
|
+
</p>
|
|
665
|
+
<p>
|
|
666
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
667
|
+
</p>
|
|
668
|
+
</auro-accordion>
|
|
669
|
+
<auro-accordion>
|
|
670
|
+
<span slot="trigger">Trigger</span>
|
|
671
|
+
<p>
|
|
672
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
673
|
+
</p>
|
|
674
|
+
<p>
|
|
675
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
676
|
+
</p>
|
|
677
|
+
<p>
|
|
678
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
679
|
+
</p>
|
|
680
|
+
<p>
|
|
681
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
682
|
+
</p>
|
|
683
|
+
</auro-accordion>
|
|
684
|
+
<auro-accordion>
|
|
685
|
+
<span slot="trigger">Trigger</span>
|
|
686
|
+
<p>
|
|
687
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
688
|
+
</p>
|
|
689
|
+
<p>
|
|
690
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
691
|
+
</p>
|
|
692
|
+
<p>
|
|
693
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
694
|
+
</p>
|
|
695
|
+
<p>
|
|
696
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
697
|
+
</p>
|
|
698
|
+
</auro-accordion>
|
|
699
|
+
</auro-accordion-group>
|
|
700
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
701
|
+
</div>
|
|
702
|
+
<auro-accordion alignRight>
|
|
703
|
+
<span slot="trigger">See code</span>
|
|
704
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accordionGroupLg.html) -->
|
|
705
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/accordionGroupLg.html -->
|
|
706
|
+
|
|
707
|
+
```html
|
|
708
|
+
<auro-accordion-group variant="lg">
|
|
709
|
+
<auro-accordion>
|
|
710
|
+
<span slot="trigger">Trigger</span>
|
|
711
|
+
<p>
|
|
712
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
713
|
+
</p>
|
|
714
|
+
<p>
|
|
715
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
716
|
+
</p>
|
|
717
|
+
<p>
|
|
718
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
719
|
+
</p>
|
|
720
|
+
<p>
|
|
721
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
722
|
+
</p>
|
|
723
|
+
</auro-accordion>
|
|
724
|
+
<auro-accordion>
|
|
725
|
+
<span slot="trigger">Trigger</span>
|
|
726
|
+
<p>
|
|
727
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
728
|
+
</p>
|
|
729
|
+
<p>
|
|
730
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
731
|
+
</p>
|
|
732
|
+
<p>
|
|
733
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
734
|
+
</p>
|
|
735
|
+
<p>
|
|
736
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
737
|
+
</p>
|
|
738
|
+
</auro-accordion>
|
|
739
|
+
<auro-accordion>
|
|
740
|
+
<span slot="trigger">Trigger</span>
|
|
741
|
+
<p>
|
|
742
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
743
|
+
</p>
|
|
744
|
+
<p>
|
|
745
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
746
|
+
</p>
|
|
747
|
+
<p>
|
|
748
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
749
|
+
</p>
|
|
750
|
+
<p>
|
|
751
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
752
|
+
</p>
|
|
753
|
+
</auro-accordion>
|
|
754
|
+
</auro-accordion-group>
|
|
755
|
+
```
|
|
756
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
757
|
+
</auro-accordion>
|
|
400
758
|
|
|
401
|
-
|
|
759
|
+
#### disabled
|
|
402
760
|
|
|
403
|
-
|
|
761
|
+
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for the whole accordion inside of the group.
|
|
404
762
|
|
|
405
763
|
<div class="exampleWrapper">
|
|
406
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
407
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
408
|
-
<auro-accordion
|
|
764
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabledGroup.html) -->
|
|
765
|
+
<!-- The below content is automatically added from ./../apiExamples/disabledGroup.html -->
|
|
766
|
+
<auro-accordion-group disabled>
|
|
767
|
+
<auro-accordion>
|
|
768
|
+
<span slot="trigger">Trigger</span>
|
|
769
|
+
<p>
|
|
770
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
771
|
+
</p>
|
|
772
|
+
<p>
|
|
773
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
774
|
+
</p>
|
|
775
|
+
<p>
|
|
776
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
777
|
+
</p>
|
|
778
|
+
<p>
|
|
779
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
780
|
+
</p>
|
|
781
|
+
</auro-accordion>
|
|
782
|
+
<auro-accordion>
|
|
783
|
+
<span slot="trigger">Trigger</span>
|
|
784
|
+
<p>
|
|
785
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
786
|
+
</p>
|
|
787
|
+
<p>
|
|
788
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
789
|
+
</p>
|
|
790
|
+
<p>
|
|
791
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
792
|
+
</p>
|
|
793
|
+
<p>
|
|
794
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
795
|
+
</p>
|
|
796
|
+
</auro-accordion>
|
|
797
|
+
<auro-accordion>
|
|
798
|
+
<span slot="trigger">Trigger</span>
|
|
799
|
+
<p>
|
|
800
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
801
|
+
</p>
|
|
802
|
+
<p>
|
|
803
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
804
|
+
</p>
|
|
805
|
+
<p>
|
|
806
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
807
|
+
</p>
|
|
808
|
+
<p>
|
|
809
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
810
|
+
</p>
|
|
811
|
+
</auro-accordion>
|
|
812
|
+
</auro-accordion-group>
|
|
813
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
814
|
+
</div>
|
|
815
|
+
<auro-accordion alignRight>
|
|
816
|
+
<span slot="trigger">See code</span>
|
|
817
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabledGroup.html) -->
|
|
818
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/disabledGroup.html -->
|
|
819
|
+
|
|
820
|
+
```html
|
|
821
|
+
<auro-accordion-group disabled>
|
|
822
|
+
<auro-accordion>
|
|
823
|
+
<span slot="trigger">Trigger</span>
|
|
824
|
+
<p>
|
|
825
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
826
|
+
</p>
|
|
827
|
+
<p>
|
|
828
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
829
|
+
</p>
|
|
830
|
+
<p>
|
|
831
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
832
|
+
</p>
|
|
833
|
+
<p>
|
|
834
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
835
|
+
</p>
|
|
836
|
+
</auro-accordion>
|
|
837
|
+
<auro-accordion>
|
|
409
838
|
<span slot="trigger">Trigger</span>
|
|
410
839
|
<p>
|
|
411
840
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -420,36 +849,255 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
|
|
|
420
849
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
421
850
|
</p>
|
|
422
851
|
</auro-accordion>
|
|
852
|
+
<auro-accordion>
|
|
853
|
+
<span slot="trigger">Trigger</span>
|
|
854
|
+
<p>
|
|
855
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
856
|
+
</p>
|
|
857
|
+
<p>
|
|
858
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
859
|
+
</p>
|
|
860
|
+
<p>
|
|
861
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
862
|
+
</p>
|
|
863
|
+
<p>
|
|
864
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
865
|
+
</p>
|
|
866
|
+
</auro-accordion>
|
|
867
|
+
</auro-accordion-group>
|
|
868
|
+
```
|
|
869
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
870
|
+
</auro-accordion>
|
|
871
|
+
|
|
872
|
+
### emphasis
|
|
873
|
+
|
|
874
|
+
Use the `emphasis` attribute to apply border highlights to the `auro-accordion` on hover and move the chevron to the right side of the trigger.
|
|
875
|
+
|
|
876
|
+
<div class="exampleWrapper">
|
|
877
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis.html) -->
|
|
878
|
+
<!-- The below content is automatically added from ./../apiExamples/emphasis.html -->
|
|
879
|
+
<auro-accordion-group emphasis>
|
|
880
|
+
<auro-accordion>
|
|
881
|
+
<span slot="trigger">Trigger</span>
|
|
882
|
+
<p>
|
|
883
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
884
|
+
</p>
|
|
885
|
+
<p>
|
|
886
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
887
|
+
</p>
|
|
888
|
+
<p>
|
|
889
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
890
|
+
</p>
|
|
891
|
+
<p>
|
|
892
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
893
|
+
</p>
|
|
894
|
+
</auro-accordion>
|
|
895
|
+
<auro-accordion>
|
|
896
|
+
<span slot="trigger">Trigger</span>
|
|
897
|
+
<p>
|
|
898
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
899
|
+
</p>
|
|
900
|
+
<p>
|
|
901
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
902
|
+
</p>
|
|
903
|
+
<p>
|
|
904
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
905
|
+
</p>
|
|
906
|
+
<p>
|
|
907
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
908
|
+
</p>
|
|
909
|
+
</auro-accordion>
|
|
910
|
+
<auro-accordion>
|
|
911
|
+
<span slot="trigger">Trigger</span>
|
|
912
|
+
<p>
|
|
913
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
914
|
+
</p>
|
|
915
|
+
<p>
|
|
916
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
917
|
+
</p>
|
|
918
|
+
<p>
|
|
919
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
920
|
+
</p>
|
|
921
|
+
<p>
|
|
922
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
923
|
+
</p>
|
|
924
|
+
</auro-accordion>
|
|
925
|
+
</auro-accordion-group>
|
|
423
926
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
424
|
-
</div>
|
|
927
|
+
</div>
|
|
425
928
|
<auro-accordion alignRight>
|
|
426
929
|
<span slot="trigger">See code</span>
|
|
427
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
428
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
930
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis.html) -->
|
|
931
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/emphasis.html -->
|
|
429
932
|
|
|
430
933
|
```html
|
|
431
|
-
<auro-accordion
|
|
432
|
-
<
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
934
|
+
<auro-accordion-group emphasis>
|
|
935
|
+
<auro-accordion>
|
|
936
|
+
<span slot="trigger">Trigger</span>
|
|
937
|
+
<p>
|
|
938
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
939
|
+
</p>
|
|
940
|
+
<p>
|
|
941
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
942
|
+
</p>
|
|
943
|
+
<p>
|
|
944
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
945
|
+
</p>
|
|
946
|
+
<p>
|
|
947
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
948
|
+
</p>
|
|
949
|
+
</auro-accordion>
|
|
950
|
+
<auro-accordion>
|
|
951
|
+
<span slot="trigger">Trigger</span>
|
|
952
|
+
<p>
|
|
953
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
954
|
+
</p>
|
|
955
|
+
<p>
|
|
956
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
957
|
+
</p>
|
|
958
|
+
<p>
|
|
959
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
960
|
+
</p>
|
|
961
|
+
<p>
|
|
962
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
963
|
+
</p>
|
|
964
|
+
</auro-accordion>
|
|
965
|
+
<auro-accordion>
|
|
966
|
+
<span slot="trigger">Trigger</span>
|
|
967
|
+
<p>
|
|
968
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
969
|
+
</p>
|
|
970
|
+
<p>
|
|
971
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
972
|
+
</p>
|
|
973
|
+
<p>
|
|
974
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
975
|
+
</p>
|
|
976
|
+
<p>
|
|
977
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
978
|
+
</p>
|
|
979
|
+
</auro-accordion>
|
|
980
|
+
</auro-accordion-group>
|
|
981
|
+
```
|
|
982
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
445
983
|
</auro-accordion>
|
|
984
|
+
|
|
985
|
+
### noToggleExpanded
|
|
986
|
+
|
|
987
|
+
Using the `noToggleExpanded` attribute will allow for multiple `auro-accordion`'s in an `auro-accordion-group` to be open at the same time.
|
|
988
|
+
|
|
989
|
+
<div class="exampleWrapper">
|
|
990
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/noToggleExpanded.html) -->
|
|
991
|
+
<!-- The below content is automatically added from ./../apiExamples/noToggleExpanded.html -->
|
|
992
|
+
<auro-accordion-group noToggleExpanded>
|
|
993
|
+
<auro-accordion>
|
|
994
|
+
<span slot="trigger">Trigger</span>
|
|
995
|
+
<p>
|
|
996
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
997
|
+
</p>
|
|
998
|
+
<p>
|
|
999
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1000
|
+
</p>
|
|
1001
|
+
<p>
|
|
1002
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1003
|
+
</p>
|
|
1004
|
+
<p>
|
|
1005
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1006
|
+
</p>
|
|
1007
|
+
</auro-accordion>
|
|
1008
|
+
<auro-accordion>
|
|
1009
|
+
<span slot="trigger">Trigger</span>
|
|
1010
|
+
<p>
|
|
1011
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1012
|
+
</p>
|
|
1013
|
+
<p>
|
|
1014
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1015
|
+
</p>
|
|
1016
|
+
<p>
|
|
1017
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1018
|
+
</p>
|
|
1019
|
+
<p>
|
|
1020
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1021
|
+
</p>
|
|
1022
|
+
</auro-accordion>
|
|
1023
|
+
<auro-accordion>
|
|
1024
|
+
<span slot="trigger">Trigger</span>
|
|
1025
|
+
<p>
|
|
1026
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1027
|
+
</p>
|
|
1028
|
+
<p>
|
|
1029
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1030
|
+
</p>
|
|
1031
|
+
<p>
|
|
1032
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1033
|
+
</p>
|
|
1034
|
+
<p>
|
|
1035
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1036
|
+
</p>
|
|
1037
|
+
</auro-accordion>
|
|
1038
|
+
</auro-accordion-group>
|
|
1039
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1040
|
+
</div>
|
|
1041
|
+
<auro-accordion alignRight>
|
|
1042
|
+
<span slot="trigger">See code</span>
|
|
1043
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/noToggleExpanded.html) -->
|
|
1044
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/noToggleExpanded.html -->
|
|
1045
|
+
|
|
1046
|
+
```html
|
|
1047
|
+
<auro-accordion-group noToggleExpanded>
|
|
1048
|
+
<auro-accordion>
|
|
1049
|
+
<span slot="trigger">Trigger</span>
|
|
1050
|
+
<p>
|
|
1051
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1052
|
+
</p>
|
|
1053
|
+
<p>
|
|
1054
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1055
|
+
</p>
|
|
1056
|
+
<p>
|
|
1057
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1058
|
+
</p>
|
|
1059
|
+
<p>
|
|
1060
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1061
|
+
</p>
|
|
1062
|
+
</auro-accordion>
|
|
1063
|
+
<auro-accordion>
|
|
1064
|
+
<span slot="trigger">Trigger</span>
|
|
1065
|
+
<p>
|
|
1066
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1067
|
+
</p>
|
|
1068
|
+
<p>
|
|
1069
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1070
|
+
</p>
|
|
1071
|
+
<p>
|
|
1072
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1073
|
+
</p>
|
|
1074
|
+
<p>
|
|
1075
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1076
|
+
</p>
|
|
1077
|
+
</auro-accordion>
|
|
1078
|
+
<auro-accordion>
|
|
1079
|
+
<span slot="trigger">Trigger</span>
|
|
1080
|
+
<p>
|
|
1081
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1082
|
+
</p>
|
|
1083
|
+
<p>
|
|
1084
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1085
|
+
</p>
|
|
1086
|
+
<p>
|
|
1087
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1088
|
+
</p>
|
|
1089
|
+
<p>
|
|
1090
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1091
|
+
</p>
|
|
1092
|
+
</auro-accordion>
|
|
1093
|
+
</auro-accordion-group>
|
|
446
1094
|
```
|
|
447
1095
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
448
1096
|
</auro-accordion>
|
|
449
1097
|
|
|
450
|
-
|
|
1098
|
+
### Theme Support
|
|
451
1099
|
|
|
452
|
-
The component may be restyled
|
|
1100
|
+
The component may be restyled using the following code sample and changing the values of the following token(s).
|
|
453
1101
|
|
|
454
1102
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
455
1103
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|