@aurodesignsystem-dev/auro-accordion 0.0.0-pr211.0 → 0.0.0-pr214.0
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 +59 -66
- package/custom-elements.json +1000 -642
- package/demo/api.md +112 -760
- package/demo/auro-accordion.min.js +11 -6
- package/demo/index.md +84 -81
- package/dist/{auro-accordion-Dlfg1ee3.js → auro-accordion-B5LyAZiI.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,49 +8,67 @@ 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 | Modifiers | Type | Default | Description |
|
|
12
|
+
| ---------- | ---------- | --------- | ----------------- | ------- | ------------------------------------------------------------------------- |
|
|
13
|
+
| alignRight | alignRight | | boolean | | If set, the trigger content will align right. |
|
|
14
|
+
| chevron | chevron | | 'none' \| 'right' | | Sets chevron variant option. |
|
|
15
|
+
| disabled | disabled | | boolean | | If set, the accordion is disabled and have reduced opacity. |
|
|
16
|
+
| emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
|
|
17
|
+
| expanded | expanded | | boolean | false | If set, the accordion is expanded. |
|
|
18
|
+
| grouped | grouped | | boolean | | Attribute will be set on accordion when it appears in an accordion group. |
|
|
19
|
+
| variant | variant | | 'sm' \| 'lg' | | Sets accordion variant option. |
|
|
20
|
+
|
|
21
21
|
### Methods
|
|
22
22
|
|
|
23
|
-
| Name
|
|
24
|
-
|
|
|
25
|
-
register | `name` (string) - The name of element that you want to register to. |
|
|
26
|
-
toggle
|
|
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
|
-
toggleExpanded | Notifies that the accordion has been expanded or closed.
|
|
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
|
-
(default) | Default slot for the accordion content.
|
|
39
|
-
trigger
|
|
40
|
-
|
|
36
|
+
| Name | Description |
|
|
37
|
+
| --------- | ------------------------------------------- |
|
|
38
|
+
| (default) | Default slot for the accordion content. |
|
|
39
|
+
| trigger | Defines the content of the trigger element. |
|
|
40
|
+
|
|
41
41
|
### CSS Shadow Parts
|
|
42
42
|
|
|
43
|
-
| Name
|
|
44
|
-
|
|
|
45
|
-
accordion | Apply CSS to Accordion wrapper.
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
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.
|
|
50
54
|
|
|
51
|
-
|
|
55
|
+
### Properties & Attributes
|
|
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
|
|
64
|
+
|
|
65
|
+
| Name | Parameters | Return | Description |
|
|
66
|
+
| ------------------- | ------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
|
+
| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. |
|
|
68
|
+
| updateDisabledState | None | | Updates the disabled state of all child <auro-accordion> elements<br>to match the disabled state of the <auro-accordion-group> element. |
|
|
69
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
52
70
|
|
|
53
|
-
|
|
71
|
+
## Basic
|
|
54
72
|
|
|
55
73
|
<div class="exampleWrapper">
|
|
56
74
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
@@ -71,120 +89,11 @@ content | Apply CSS to the accordion content.
|
|
|
71
89
|
</p>
|
|
72
90
|
</auro-accordion>
|
|
73
91
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
74
|
-
</div>
|
|
75
|
-
<auro-accordion alignRight>
|
|
76
|
-
<span slot="trigger">See code</span>
|
|
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>
|
|
92
|
+
</div>
|
|
151
93
|
<auro-accordion alignRight>
|
|
152
94
|
<span slot="trigger">See code</span>
|
|
153
|
-
<!-- AURO-GENERATED-CONTENT:START (
|
|
154
|
-
<!-- The below
|
|
155
|
-
|
|
156
|
-
```html
|
|
157
|
-
<auro-accordion-group>
|
|
158
|
-
<auro-accordion>
|
|
159
|
-
<span slot="trigger">Trigger</span>
|
|
160
|
-
<p>
|
|
161
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
162
|
-
</p>
|
|
163
|
-
<p>
|
|
164
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
165
|
-
</p>
|
|
166
|
-
<p>
|
|
167
|
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
168
|
-
</p>
|
|
169
|
-
<p>
|
|
170
|
-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
171
|
-
</p>
|
|
172
|
-
</auro-accordion>
|
|
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>
|
|
95
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
96
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
188
97
|
<auro-accordion>
|
|
189
98
|
<span slot="trigger">Trigger</span>
|
|
190
99
|
<p>
|
|
@@ -200,21 +109,19 @@ content | Apply CSS to the accordion content.
|
|
|
200
109
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
201
110
|
</p>
|
|
202
111
|
</auro-accordion>
|
|
203
|
-
|
|
204
|
-
```
|
|
205
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
206
113
|
</auro-accordion>
|
|
207
114
|
|
|
208
|
-
|
|
115
|
+
## Property & Attribute Examples
|
|
209
116
|
|
|
210
|
-
|
|
117
|
+
### Align Trigger Right
|
|
211
118
|
|
|
212
|
-
|
|
119
|
+
Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
|
|
213
120
|
|
|
214
121
|
<div class="exampleWrapper">
|
|
215
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
216
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
217
|
-
<auro-accordion
|
|
122
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignRight.html) -->
|
|
123
|
+
<!-- The below content is automatically added from ./../apiExamples/alignRight.html -->
|
|
124
|
+
<auro-accordion alignRight>
|
|
218
125
|
<span slot="trigger">Trigger</span>
|
|
219
126
|
<p>
|
|
220
127
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -233,11 +140,11 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
|
|
|
233
140
|
</div>
|
|
234
141
|
<auro-accordion alignRight>
|
|
235
142
|
<span slot="trigger">See code</span>
|
|
236
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
237
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
143
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
|
|
144
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
|
|
238
145
|
|
|
239
146
|
```html
|
|
240
|
-
<auro-accordion
|
|
147
|
+
<auro-accordion alignRight>
|
|
241
148
|
<span slot="trigger">Trigger</span>
|
|
242
149
|
<p>
|
|
243
150
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -256,7 +163,7 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
|
|
|
256
163
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
257
164
|
</auro-accordion>
|
|
258
165
|
|
|
259
|
-
|
|
166
|
+
### Chevron Right
|
|
260
167
|
|
|
261
168
|
Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
|
|
262
169
|
|
|
@@ -279,8 +186,8 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
|
|
|
279
186
|
</p>
|
|
280
187
|
</auro-accordion>
|
|
281
188
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
282
|
-
</div>
|
|
283
|
-
<auro-accordion alignRight
|
|
189
|
+
</div>
|
|
190
|
+
<auro-accordion alignRight>
|
|
284
191
|
<span slot="trigger">See code</span>
|
|
285
192
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronRight.html) -->
|
|
286
193
|
<!-- The below code snippet is automatically added from ./../apiExamples/chevronRight.html -->
|
|
@@ -305,63 +212,14 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
|
|
|
305
212
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
306
213
|
</auro-accordion>
|
|
307
214
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion.
|
|
311
|
-
|
|
312
|
-
<div class="exampleWrapper">
|
|
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>
|
|
316
|
-
<span slot="trigger">Trigger</span>
|
|
317
|
-
<p>
|
|
318
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
319
|
-
</p>
|
|
320
|
-
<p>
|
|
321
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
322
|
-
</p>
|
|
323
|
-
<p>
|
|
324
|
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
325
|
-
</p>
|
|
326
|
-
<p>
|
|
327
|
-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
328
|
-
</p>
|
|
329
|
-
</auro-accordion>
|
|
330
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
331
|
-
</div>
|
|
332
|
-
<auro-accordion alignRight>
|
|
333
|
-
<span slot="trigger">See code</span>
|
|
334
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignRight.html) -->
|
|
335
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/alignRight.html -->
|
|
336
|
-
|
|
337
|
-
```html
|
|
338
|
-
<auro-accordion alignRight>
|
|
339
|
-
<span slot="trigger">Trigger</span>
|
|
340
|
-
<p>
|
|
341
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
342
|
-
</p>
|
|
343
|
-
<p>
|
|
344
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
345
|
-
</p>
|
|
346
|
-
<p>
|
|
347
|
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
348
|
-
</p>
|
|
349
|
-
<p>
|
|
350
|
-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
351
|
-
</p>
|
|
352
|
-
</auro-accordion>
|
|
353
|
-
```
|
|
354
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
355
|
-
</auro-accordion>
|
|
356
|
-
|
|
357
|
-
#### align chevron right
|
|
215
|
+
### No Chevron
|
|
358
216
|
|
|
359
|
-
|
|
217
|
+
The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
|
|
360
218
|
|
|
361
219
|
<div class="exampleWrapper">
|
|
362
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
363
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
364
|
-
<auro-accordion chevron="
|
|
220
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevronNone.html) -->
|
|
221
|
+
<!-- The below content is automatically added from ./../apiExamples/chevronNone.html -->
|
|
222
|
+
<auro-accordion chevron="none">
|
|
365
223
|
<span slot="trigger">Trigger</span>
|
|
366
224
|
<p>
|
|
367
225
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -377,14 +235,14 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
|
|
|
377
235
|
</p>
|
|
378
236
|
</auro-accordion>
|
|
379
237
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
380
|
-
</div>
|
|
238
|
+
</div>
|
|
381
239
|
<auro-accordion alignRight>
|
|
382
240
|
<span slot="trigger">See code</span>
|
|
383
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
384
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevronNone.html) -->
|
|
242
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/chevronNone.html -->
|
|
385
243
|
|
|
386
244
|
```html
|
|
387
|
-
<auro-accordion chevron="
|
|
245
|
+
<auro-accordion chevron="none">
|
|
388
246
|
<span slot="trigger">Trigger</span>
|
|
389
247
|
<p>
|
|
390
248
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -403,7 +261,7 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
|
|
|
403
261
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
404
262
|
</auro-accordion>
|
|
405
263
|
|
|
406
|
-
|
|
264
|
+
### Disabled
|
|
407
265
|
|
|
408
266
|
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
|
|
409
267
|
|
|
@@ -426,7 +284,7 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
426
284
|
</p>
|
|
427
285
|
</auro-accordion>
|
|
428
286
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
429
|
-
</div>
|
|
287
|
+
</div>
|
|
430
288
|
<auro-accordion alignRight>
|
|
431
289
|
<span slot="trigger">See code</span>
|
|
432
290
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
@@ -452,7 +310,7 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
452
310
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
453
311
|
</auro-accordion>
|
|
454
312
|
|
|
455
|
-
|
|
313
|
+
### Expanded
|
|
456
314
|
|
|
457
315
|
The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
|
|
458
316
|
|
|
@@ -477,7 +335,7 @@ The accordion can be programatically expanded or collapsed by setting the `expan
|
|
|
477
335
|
</p>
|
|
478
336
|
</auro-accordion>
|
|
479
337
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
480
|
-
</div>
|
|
338
|
+
</div>
|
|
481
339
|
<auro-accordion alignRight>
|
|
482
340
|
<span slot="trigger">See code</span>
|
|
483
341
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
|
|
@@ -502,7 +360,7 @@ The accordion can be programatically expanded or collapsed by setting the `expan
|
|
|
502
360
|
</p>
|
|
503
361
|
</auro-accordion>
|
|
504
362
|
```
|
|
505
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
363
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
506
364
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
|
|
507
365
|
<!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
|
|
508
366
|
|
|
@@ -528,441 +386,26 @@ export function expandedExample() {
|
|
|
528
386
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
529
387
|
</auro-accordion>
|
|
530
388
|
|
|
531
|
-
##
|
|
532
|
-
|
|
533
|
-
### Small
|
|
389
|
+
## Method Examples
|
|
534
390
|
|
|
535
|
-
|
|
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 -->
|
|
391
|
+
<!-- Add all method examples here, remove section if none exist -->
|
|
593
392
|
|
|
594
|
-
|
|
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.
|
|
393
|
+
## CSS Shadow Part Examples
|
|
649
394
|
|
|
650
|
-
|
|
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>
|
|
395
|
+
<!-- Add all CSS Shadow Part examples here, remove section if none exist -->
|
|
758
396
|
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for the whole accordion inside of the group.
|
|
397
|
+
## Common Usage Patterns & Functional Examples
|
|
762
398
|
|
|
763
|
-
|
|
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 -->
|
|
399
|
+
<!-- Add any common usage patterns or functional examples here, remove section if none exist -->
|
|
819
400
|
|
|
820
|
-
|
|
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>
|
|
838
|
-
<span slot="trigger">Trigger</span>
|
|
839
|
-
<p>
|
|
840
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
841
|
-
</p>
|
|
842
|
-
<p>
|
|
843
|
-
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
844
|
-
</p>
|
|
845
|
-
<p>
|
|
846
|
-
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
847
|
-
</p>
|
|
848
|
-
<p>
|
|
849
|
-
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
850
|
-
</p>
|
|
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
|
|
401
|
+
### Align Chevron & Trigger Right
|
|
873
402
|
|
|
874
|
-
|
|
403
|
+
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.
|
|
875
404
|
|
|
876
405
|
<div class="exampleWrapper">
|
|
877
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/
|
|
878
|
-
<!-- The below content is automatically added from ./../apiExamples/
|
|
879
|
-
<auro-accordion
|
|
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>
|
|
926
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
927
|
-
</div>
|
|
928
|
-
<auro-accordion alignRight>
|
|
929
|
-
<span slot="trigger">See code</span>
|
|
930
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis.html) -->
|
|
931
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/emphasis.html -->
|
|
932
|
-
|
|
933
|
-
```html
|
|
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>
|
|
406
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/alignChevronRight.html) -->
|
|
407
|
+
<!-- The below content is automatically added from ./../apiExamples/alignChevronRight.html -->
|
|
408
|
+
<auro-accordion chevron="right" alignRight>
|
|
966
409
|
<span slot="trigger">Trigger</span>
|
|
967
410
|
<p>
|
|
968
411
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
@@ -977,127 +420,36 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
|
|
|
977
420
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
978
421
|
</p>
|
|
979
422
|
</auro-accordion>
|
|
980
|
-
</auro-accordion-group>
|
|
981
|
-
```
|
|
982
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
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
423
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1040
|
-
</div>
|
|
424
|
+
</div>
|
|
1041
425
|
<auro-accordion alignRight>
|
|
1042
426
|
<span slot="trigger">See code</span>
|
|
1043
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/
|
|
1044
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/
|
|
427
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/alignChevronRight.html) -->
|
|
428
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/alignChevronRight.html -->
|
|
1045
429
|
|
|
1046
430
|
```html
|
|
1047
|
-
<auro-accordion
|
|
1048
|
-
<
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
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>
|
|
431
|
+
<auro-accordion chevron="right" alignRight>
|
|
432
|
+
<span slot="trigger">Trigger</span>
|
|
433
|
+
<p>
|
|
434
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
435
|
+
</p>
|
|
436
|
+
<p>
|
|
437
|
+
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
438
|
+
</p>
|
|
439
|
+
<p>
|
|
440
|
+
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
441
|
+
</p>
|
|
442
|
+
<p>
|
|
443
|
+
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
444
|
+
</p>
|
|
445
|
+
</auro-accordion>
|
|
1094
446
|
```
|
|
1095
447
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1096
448
|
</auro-accordion>
|
|
1097
449
|
|
|
1098
|
-
|
|
450
|
+
## Restyle Component with CSS Variables
|
|
1099
451
|
|
|
1100
|
-
The component may be restyled
|
|
452
|
+
The component may be restyled by changing the values of the following token(s).
|
|
1101
453
|
|
|
1102
454
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
1103
455
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|