@aurodesignsystem-dev/auro-accordion 0.0.0-pr229.0 → 0.0.0-pr233.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/demo/api.md +652 -686
- package/demo/api.min.js +779 -2
- package/demo/index.md +100 -104
- package/demo/index.min.js +778 -1
- package/demo/readme.md +223 -0
- package/package.json +1 -1
- package/demo/auro-accordion.min.js +0 -780
package/demo/api.md
CHANGED
|
@@ -70,45 +70,45 @@ The `auro-accordion-group` element allows users to group accordions together and
|
|
|
70
70
|
## Basic
|
|
71
71
|
|
|
72
72
|
<div class="exampleWrapper">
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
73
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
74
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
75
|
+
<auro-accordion>
|
|
76
|
+
<span slot="trigger">Trigger</span>
|
|
77
|
+
<p>
|
|
78
78
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
79
|
-
|
|
80
|
-
|
|
79
|
+
</p>
|
|
80
|
+
<p>
|
|
81
81
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
</p>
|
|
83
|
+
<p>
|
|
84
84
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
85
|
-
|
|
86
|
-
|
|
85
|
+
</p>
|
|
86
|
+
<p>
|
|
87
87
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
88
|
+
</p>
|
|
89
|
+
</auro-accordion>
|
|
90
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
91
91
|
</div>
|
|
92
92
|
<auro-accordion alignRight>
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
93
|
+
<span slot="trigger">See code</span>
|
|
94
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
95
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
96
|
+
<auro-accordion>
|
|
97
|
+
<span slot="trigger">Trigger</span>
|
|
98
|
+
<p>
|
|
99
99
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
100
|
-
|
|
101
|
-
|
|
100
|
+
</p>
|
|
101
|
+
<p>
|
|
102
102
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
103
|
-
|
|
104
|
-
|
|
103
|
+
</p>
|
|
104
|
+
<p>
|
|
105
105
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
106
|
-
|
|
107
|
-
|
|
106
|
+
</p>
|
|
107
|
+
<p>
|
|
108
108
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
109
|
+
</p>
|
|
110
|
+
</auro-accordion>
|
|
111
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
112
112
|
</auro-accordion>
|
|
113
113
|
|
|
114
114
|
## Property & Attribute Examples
|
|
@@ -118,47 +118,45 @@ The `auro-accordion-group` element allows users to group accordions together and
|
|
|
118
118
|
Using the `alignRight` attribute will cause the trigger to align to the right edge of the accordion container.
|
|
119
119
|
|
|
120
120
|
<div class="exampleWrapper">
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/align-right.html) -->
|
|
122
|
+
<!-- The below content is automatically added from ./../apiExamples/align-right.html -->
|
|
123
|
+
<auro-accordion alignRight>
|
|
124
|
+
<span slot="trigger">Trigger</span>
|
|
125
|
+
<p>
|
|
126
126
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
127
|
-
|
|
128
|
-
|
|
127
|
+
</p>
|
|
128
|
+
<p>
|
|
129
129
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
130
|
-
|
|
131
|
-
|
|
130
|
+
</p>
|
|
131
|
+
<p>
|
|
132
132
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
133
|
-
|
|
134
|
-
|
|
133
|
+
</p>
|
|
134
|
+
<p>
|
|
135
135
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
136
|
+
</p>
|
|
137
|
+
</auro-accordion>
|
|
138
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
139
139
|
</div>
|
|
140
140
|
<auro-accordion alignRight>
|
|
141
|
-
|
|
141
|
+
<span slot="trigger">See code</span>
|
|
142
142
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/align-right.html) -->
|
|
143
143
|
<!-- The below code snippet is automatically added from ./../apiExamples/align-right.html -->
|
|
144
144
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
<p>
|
|
145
|
+
<pre class="language-html"><code class="language-html"><auro-accordion alignRight>
|
|
146
|
+
<span slot="trigger">Trigger</span>
|
|
147
|
+
<p>
|
|
149
148
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
150
|
-
|
|
151
|
-
|
|
149
|
+
</p>
|
|
150
|
+
<p>
|
|
152
151
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
153
|
-
|
|
154
|
-
|
|
152
|
+
</p>
|
|
153
|
+
<p>
|
|
155
154
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
</p>
|
|
156
|
+
<p>
|
|
158
157
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
```
|
|
158
|
+
</p>
|
|
159
|
+
</auro-accordion></code></pre>
|
|
162
160
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
163
161
|
</auro-accordion>
|
|
164
162
|
|
|
@@ -167,47 +165,45 @@ Using the `alignRight` attribute will cause the trigger to align to the right ed
|
|
|
167
165
|
Using the `chevron="right"` will cause the chevron to appear on the right side of the accordion label.
|
|
168
166
|
|
|
169
167
|
<div class="exampleWrapper">
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
168
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron-right.html) -->
|
|
169
|
+
<!-- The below content is automatically added from ./../apiExamples/chevron-right.html -->
|
|
170
|
+
<auro-accordion chevron="right">
|
|
171
|
+
<span slot="trigger">Trigger</span>
|
|
172
|
+
<p>
|
|
175
173
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
176
|
-
|
|
177
|
-
|
|
174
|
+
</p>
|
|
175
|
+
<p>
|
|
178
176
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
179
|
-
|
|
180
|
-
|
|
177
|
+
</p>
|
|
178
|
+
<p>
|
|
181
179
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
182
|
-
|
|
183
|
-
|
|
180
|
+
</p>
|
|
181
|
+
<p>
|
|
184
182
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
183
|
+
</p>
|
|
184
|
+
</auro-accordion>
|
|
185
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
188
186
|
</div>
|
|
189
187
|
<auro-accordion alignRight>
|
|
190
|
-
|
|
188
|
+
<span slot="trigger">See code</span>
|
|
191
189
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevron-right.html) -->
|
|
192
190
|
<!-- The below code snippet is automatically added from ./../apiExamples/chevron-right.html -->
|
|
193
191
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
<p>
|
|
192
|
+
<pre class="language-html"><code class="language-html"><auro-accordion chevron="right">
|
|
193
|
+
<span slot="trigger">Trigger</span>
|
|
194
|
+
<p>
|
|
198
195
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
199
|
-
|
|
200
|
-
|
|
196
|
+
</p>
|
|
197
|
+
<p>
|
|
201
198
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
202
|
-
|
|
203
|
-
|
|
199
|
+
</p>
|
|
200
|
+
<p>
|
|
204
201
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
205
|
-
|
|
206
|
-
|
|
202
|
+
</p>
|
|
203
|
+
<p>
|
|
207
204
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
```
|
|
205
|
+
</p>
|
|
206
|
+
</auro-accordion></code></pre>
|
|
211
207
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
212
208
|
</auro-accordion>
|
|
213
209
|
|
|
@@ -216,47 +212,45 @@ Using the `chevron="right"` will cause the chevron to appear on the right side o
|
|
|
216
212
|
The chevron icon within the trigger of the `auro-accordion` will not render when `chevron="none"` is present on the element.
|
|
217
213
|
|
|
218
214
|
<div class="exampleWrapper">
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
215
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/chevron-none.html) -->
|
|
216
|
+
<!-- The below content is automatically added from ./../apiExamples/chevron-none.html -->
|
|
217
|
+
<auro-accordion chevron="none">
|
|
218
|
+
<span slot="trigger">Trigger</span>
|
|
219
|
+
<p>
|
|
224
220
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
225
|
-
|
|
226
|
-
|
|
221
|
+
</p>
|
|
222
|
+
<p>
|
|
227
223
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
228
|
-
|
|
229
|
-
|
|
224
|
+
</p>
|
|
225
|
+
<p>
|
|
230
226
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
231
|
-
|
|
232
|
-
|
|
227
|
+
</p>
|
|
228
|
+
<p>
|
|
233
229
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
230
|
+
</p>
|
|
231
|
+
</auro-accordion>
|
|
232
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
237
233
|
</div>
|
|
238
234
|
<auro-accordion alignRight>
|
|
239
|
-
|
|
235
|
+
<span slot="trigger">See code</span>
|
|
240
236
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/chevron-none.html) -->
|
|
241
237
|
<!-- The below code snippet is automatically added from ./../apiExamples/chevron-none.html -->
|
|
242
238
|
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
<p>
|
|
239
|
+
<pre class="language-html"><code class="language-html"><auro-accordion chevron="none">
|
|
240
|
+
<span slot="trigger">Trigger</span>
|
|
241
|
+
<p>
|
|
247
242
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
248
|
-
|
|
249
|
-
|
|
243
|
+
</p>
|
|
244
|
+
<p>
|
|
250
245
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
251
|
-
|
|
252
|
-
|
|
246
|
+
</p>
|
|
247
|
+
<p>
|
|
253
248
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
254
|
-
|
|
255
|
-
|
|
249
|
+
</p>
|
|
250
|
+
<p>
|
|
256
251
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
```
|
|
252
|
+
</p>
|
|
253
|
+
</auro-accordion></code></pre>
|
|
260
254
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
261
255
|
</auro-accordion>
|
|
262
256
|
|
|
@@ -265,47 +259,45 @@ The chevron icon within the trigger of the `auro-accordion` will not render when
|
|
|
265
259
|
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity of the element.
|
|
266
260
|
|
|
267
261
|
<div class="exampleWrapper">
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
262
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled.html) -->
|
|
263
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled.html -->
|
|
264
|
+
<auro-accordion disabled>
|
|
265
|
+
<span slot="trigger">Trigger</span>
|
|
266
|
+
<p>
|
|
273
267
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
274
|
-
|
|
275
|
-
|
|
268
|
+
</p>
|
|
269
|
+
<p>
|
|
276
270
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
277
|
-
|
|
278
|
-
|
|
271
|
+
</p>
|
|
272
|
+
<p>
|
|
279
273
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
280
|
-
|
|
281
|
-
|
|
274
|
+
</p>
|
|
275
|
+
<p>
|
|
282
276
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
277
|
+
</p>
|
|
278
|
+
</auro-accordion>
|
|
279
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
286
280
|
</div>
|
|
287
281
|
<auro-accordion alignRight>
|
|
288
|
-
|
|
282
|
+
<span slot="trigger">See code</span>
|
|
289
283
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled.html) -->
|
|
290
284
|
<!-- The below code snippet is automatically added from ./../apiExamples/disabled.html -->
|
|
291
285
|
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
<p>
|
|
286
|
+
<pre class="language-html"><code class="language-html"><auro-accordion disabled>
|
|
287
|
+
<span slot="trigger">Trigger</span>
|
|
288
|
+
<p>
|
|
296
289
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
297
|
-
|
|
298
|
-
|
|
290
|
+
</p>
|
|
291
|
+
<p>
|
|
299
292
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
300
|
-
|
|
301
|
-
|
|
293
|
+
</p>
|
|
294
|
+
<p>
|
|
302
295
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
303
|
-
|
|
304
|
-
|
|
296
|
+
</p>
|
|
297
|
+
<p>
|
|
305
298
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
```
|
|
299
|
+
</p>
|
|
300
|
+
</auro-accordion></code></pre>
|
|
309
301
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
310
302
|
</auro-accordion>
|
|
311
303
|
|
|
@@ -314,74 +306,70 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
314
306
|
The accordion can be programatically expanded or collapsed by setting the `expanded` attribute to `true` or `false`.
|
|
315
307
|
|
|
316
308
|
<div class="exampleWrapper">
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
309
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/expanded.html) -->
|
|
310
|
+
<!-- The below content is automatically added from ./../apiExamples/expanded.html -->
|
|
311
|
+
<auro-button id="accordionExpandedExampleBtnTrue">Set expanded = "true"</auro-button>
|
|
312
|
+
<auro-button id="accordionExpandedExampleBtnFalse">Set expanded = "false"</auro-button>
|
|
313
|
+
<auro-accordion id="accordionExpandedExample">
|
|
314
|
+
<span slot="trigger">Trigger</span>
|
|
315
|
+
<p>
|
|
324
316
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
325
|
-
|
|
326
|
-
|
|
317
|
+
</p>
|
|
318
|
+
<p>
|
|
327
319
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
328
|
-
|
|
329
|
-
|
|
320
|
+
</p>
|
|
321
|
+
<p>
|
|
330
322
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
331
|
-
|
|
332
|
-
|
|
323
|
+
</p>
|
|
324
|
+
<p>
|
|
333
325
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
326
|
+
</p>
|
|
327
|
+
</auro-accordion>
|
|
328
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
337
329
|
</div>
|
|
338
330
|
<auro-accordion alignRight>
|
|
339
|
-
|
|
331
|
+
<span slot="trigger">See code</span>
|
|
340
332
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.html) -->
|
|
341
333
|
<!-- The below code snippet is automatically added from ./../apiExamples/expanded.html -->
|
|
342
334
|
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
<p>
|
|
335
|
+
<pre class="language-html"><code class="language-html"><auro-button id="accordionExpandedExampleBtnTrue">Set expanded = "true"</auro-button>
|
|
336
|
+
<auro-button id="accordionExpandedExampleBtnFalse">Set expanded = "false"</auro-button>
|
|
337
|
+
<auro-accordion id="accordionExpandedExample">
|
|
338
|
+
<span slot="trigger">Trigger</span>
|
|
339
|
+
<p>
|
|
349
340
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
350
|
-
|
|
351
|
-
|
|
341
|
+
</p>
|
|
342
|
+
<p>
|
|
352
343
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
353
|
-
|
|
354
|
-
|
|
344
|
+
</p>
|
|
345
|
+
<p>
|
|
355
346
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
356
|
-
|
|
357
|
-
|
|
347
|
+
</p>
|
|
348
|
+
<p>
|
|
358
349
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
```
|
|
350
|
+
</p>
|
|
351
|
+
</auro-accordion></code></pre>
|
|
362
352
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
363
353
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/expanded.js) -->
|
|
364
354
|
<!-- The below code snippet is automatically added from ./../apiExamples/expanded.js -->
|
|
365
355
|
|
|
366
|
-
|
|
367
|
-
export function expandedExample() {
|
|
356
|
+
<pre class="language-js"><code class="language-js">export function expandedExample() {
|
|
368
357
|
const expandedExampleElem = document.querySelector(
|
|
369
358
|
"#accordionExpandedExample",
|
|
370
359
|
);
|
|
371
|
-
|
|
360
|
+
|
|
372
361
|
document
|
|
373
362
|
.querySelector("#accordionExpandedExampleBtnTrue")
|
|
374
|
-
.addEventListener("click", ()
|
|
363
|
+
.addEventListener("click", () => {
|
|
375
364
|
expandedExampleElem.expanded = true;
|
|
376
365
|
});
|
|
377
|
-
|
|
366
|
+
|
|
378
367
|
document
|
|
379
368
|
.querySelector("#accordionExpandedExampleBtnFalse")
|
|
380
|
-
.addEventListener("click", ()
|
|
369
|
+
.addEventListener("click", () => {
|
|
381
370
|
expandedExampleElem.expanded = false;
|
|
382
371
|
});
|
|
383
|
-
}
|
|
384
|
-
```
|
|
372
|
+
}</code></pre>
|
|
385
373
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
386
374
|
</auro-accordion>
|
|
387
375
|
|
|
@@ -390,47 +378,45 @@ export function expandedExample() {
|
|
|
390
378
|
Using the `variant="lg"` attribute will cause the size of the accordion trigger to render larger.
|
|
391
379
|
|
|
392
380
|
<div class="exampleWrapper">
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
381
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-lg.html) -->
|
|
382
|
+
<!-- The below content is automatically added from ./../apiExamples/variant-lg.html -->
|
|
383
|
+
<auro-accordion variant="lg">
|
|
384
|
+
<span slot="trigger">Trigger</span>
|
|
385
|
+
<p>
|
|
398
386
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
399
|
-
|
|
400
|
-
|
|
387
|
+
</p>
|
|
388
|
+
<p>
|
|
401
389
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
402
|
-
|
|
403
|
-
|
|
390
|
+
</p>
|
|
391
|
+
<p>
|
|
404
392
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
405
|
-
|
|
406
|
-
|
|
393
|
+
</p>
|
|
394
|
+
<p>
|
|
407
395
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
396
|
+
</p>
|
|
397
|
+
</auro-accordion>
|
|
398
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
411
399
|
</div>
|
|
412
400
|
<auro-accordion alignRight>
|
|
413
|
-
|
|
401
|
+
<span slot="trigger">See code</span>
|
|
414
402
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-lg.html) -->
|
|
415
403
|
<!-- The below code snippet is automatically added from ./../apiExamples/variant-lg.html -->
|
|
416
404
|
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
<p>
|
|
405
|
+
<pre class="language-html"><code class="language-html"><auro-accordion variant="lg">
|
|
406
|
+
<span slot="trigger">Trigger</span>
|
|
407
|
+
<p>
|
|
421
408
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
422
|
-
|
|
423
|
-
|
|
409
|
+
</p>
|
|
410
|
+
<p>
|
|
424
411
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
425
|
-
|
|
426
|
-
|
|
412
|
+
</p>
|
|
413
|
+
<p>
|
|
427
414
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
428
|
-
|
|
429
|
-
|
|
415
|
+
</p>
|
|
416
|
+
<p>
|
|
430
417
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
```
|
|
418
|
+
</p>
|
|
419
|
+
</auro-accordion></code></pre>
|
|
434
420
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
435
421
|
</auro-accordion>
|
|
436
422
|
|
|
@@ -439,47 +425,45 @@ Using the `variant="lg"` attribute will cause the size of the accordion trigger
|
|
|
439
425
|
Using the `variant="sm"` attribute will cause the size of the accordion trigger to render smaller.
|
|
440
426
|
|
|
441
427
|
<div class="exampleWrapper">
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
428
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-sm.html) -->
|
|
429
|
+
<!-- The below content is automatically added from ./../apiExamples/variant-sm.html -->
|
|
430
|
+
<auro-accordion variant="sm">
|
|
431
|
+
<span slot="trigger">Trigger</span>
|
|
432
|
+
<p>
|
|
447
433
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
448
|
-
|
|
449
|
-
|
|
434
|
+
</p>
|
|
435
|
+
<p>
|
|
450
436
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
451
|
-
|
|
452
|
-
|
|
437
|
+
</p>
|
|
438
|
+
<p>
|
|
453
439
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
454
|
-
|
|
455
|
-
|
|
440
|
+
</p>
|
|
441
|
+
<p>
|
|
456
442
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
443
|
+
</p>
|
|
444
|
+
</auro-accordion>
|
|
445
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
460
446
|
</div>
|
|
461
447
|
<auro-accordion alignRight>
|
|
462
|
-
|
|
448
|
+
<span slot="trigger">See code</span>
|
|
463
449
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-sm.html) -->
|
|
464
450
|
<!-- The below code snippet is automatically added from ./../apiExamples/variant-sm.html -->
|
|
465
451
|
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
<p>
|
|
452
|
+
<pre class="language-html"><code class="language-html"><auro-accordion variant="sm">
|
|
453
|
+
<span slot="trigger">Trigger</span>
|
|
454
|
+
<p>
|
|
470
455
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
471
|
-
|
|
472
|
-
|
|
456
|
+
</p>
|
|
457
|
+
<p>
|
|
473
458
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
474
|
-
|
|
475
|
-
|
|
459
|
+
</p>
|
|
460
|
+
<p>
|
|
476
461
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
477
|
-
|
|
478
|
-
|
|
462
|
+
</p>
|
|
463
|
+
<p>
|
|
479
464
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
```
|
|
465
|
+
</p>
|
|
466
|
+
</auro-accordion></code></pre>
|
|
483
467
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
484
468
|
</auro-accordion>
|
|
485
469
|
|
|
@@ -490,66 +474,62 @@ Using the `variant="sm"` attribute will cause the size of the accordion trigger
|
|
|
490
474
|
Using the `toggle()` method will change the state of the accordion from expanded to collapsed, or from collapsed to expanded.
|
|
491
475
|
|
|
492
476
|
<div class="exampleWrapper">
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
477
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/toggle.html) -->
|
|
478
|
+
<!-- The below content is automatically added from ./../apiExamples/toggle.html -->
|
|
479
|
+
<auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
|
|
480
|
+
<auro-accordion id="accordionToggleExample">
|
|
481
|
+
<span slot="trigger">Trigger</span>
|
|
482
|
+
<p>
|
|
499
483
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
500
|
-
|
|
501
|
-
|
|
484
|
+
</p>
|
|
485
|
+
<p>
|
|
502
486
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
503
|
-
|
|
504
|
-
|
|
487
|
+
</p>
|
|
488
|
+
<p>
|
|
505
489
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
506
|
-
|
|
507
|
-
|
|
490
|
+
</p>
|
|
491
|
+
<p>
|
|
508
492
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
493
|
+
</p>
|
|
494
|
+
</auro-accordion>
|
|
495
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
512
496
|
</div>
|
|
513
497
|
<auro-accordion alignRight>
|
|
514
|
-
|
|
498
|
+
<span slot="trigger">See code</span>
|
|
515
499
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggle.html) -->
|
|
516
500
|
<!-- The below code snippet is automatically added from ./../apiExamples/toggle.html -->
|
|
517
501
|
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
<p>
|
|
502
|
+
<pre class="language-html"><code class="language-html"><auro-button id="accordionToggleExampleBtn">Toggle Accordion</auro-button>
|
|
503
|
+
<auro-accordion id="accordionToggleExample">
|
|
504
|
+
<span slot="trigger">Trigger</span>
|
|
505
|
+
<p>
|
|
523
506
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
524
|
-
|
|
525
|
-
|
|
507
|
+
</p>
|
|
508
|
+
<p>
|
|
526
509
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
527
|
-
|
|
528
|
-
|
|
510
|
+
</p>
|
|
511
|
+
<p>
|
|
529
512
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
530
|
-
|
|
531
|
-
|
|
513
|
+
</p>
|
|
514
|
+
<p>
|
|
532
515
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
```
|
|
516
|
+
</p>
|
|
517
|
+
</auro-accordion></code></pre>
|
|
536
518
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
537
519
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/toggle.js) -->
|
|
538
520
|
<!-- The below code snippet is automatically added from ./../apiExamples/toggle.js -->
|
|
539
521
|
|
|
540
|
-
|
|
541
|
-
export function toggleExample() {
|
|
522
|
+
<pre class="language-js"><code class="language-js">export function toggleExample() {
|
|
542
523
|
const expandedExampleElem = document.querySelector(
|
|
543
524
|
"#accordionToggleExample",
|
|
544
525
|
);
|
|
545
|
-
|
|
526
|
+
|
|
546
527
|
document
|
|
547
528
|
.querySelector("#accordionToggleExampleBtn")
|
|
548
|
-
.addEventListener("click", ()
|
|
529
|
+
.addEventListener("click", () => {
|
|
549
530
|
expandedExampleElem.toggle();
|
|
550
531
|
});
|
|
551
|
-
}
|
|
552
|
-
```
|
|
532
|
+
}</code></pre>
|
|
553
533
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
554
534
|
</auro-accordion>
|
|
555
535
|
|
|
@@ -560,47 +540,45 @@ export function toggleExample() {
|
|
|
560
540
|
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.
|
|
561
541
|
|
|
562
542
|
<div class="exampleWrapper">
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
543
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/align-chevron-right.html) -->
|
|
544
|
+
<!-- The below content is automatically added from ./../apiExamples/align-chevron-right.html -->
|
|
545
|
+
<auro-accordion chevron="right" alignRight>
|
|
546
|
+
<span slot="trigger">Trigger</span>
|
|
547
|
+
<p>
|
|
568
548
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
569
|
-
|
|
570
|
-
|
|
549
|
+
</p>
|
|
550
|
+
<p>
|
|
571
551
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
572
|
-
|
|
573
|
-
|
|
552
|
+
</p>
|
|
553
|
+
<p>
|
|
574
554
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
575
|
-
|
|
576
|
-
|
|
555
|
+
</p>
|
|
556
|
+
<p>
|
|
577
557
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
558
|
+
</p>
|
|
559
|
+
</auro-accordion>
|
|
560
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
581
561
|
</div>
|
|
582
562
|
<auro-accordion alignRight>
|
|
583
|
-
|
|
563
|
+
<span slot="trigger">See code</span>
|
|
584
564
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/align-chevron-right.html) -->
|
|
585
565
|
<!-- The below code snippet is automatically added from ./../apiExamples/align-chevron-right.html -->
|
|
586
566
|
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
<p>
|
|
567
|
+
<pre class="language-html"><code class="language-html"><auro-accordion chevron="right" alignRight>
|
|
568
|
+
<span slot="trigger">Trigger</span>
|
|
569
|
+
<p>
|
|
591
570
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
592
|
-
|
|
593
|
-
|
|
571
|
+
</p>
|
|
572
|
+
<p>
|
|
594
573
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
595
|
-
|
|
596
|
-
|
|
574
|
+
</p>
|
|
575
|
+
<p>
|
|
597
576
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
598
|
-
|
|
599
|
-
|
|
577
|
+
</p>
|
|
578
|
+
<p>
|
|
600
579
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
```
|
|
580
|
+
</p>
|
|
581
|
+
</auro-accordion></code></pre>
|
|
604
582
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
605
583
|
</auro-accordion>
|
|
606
584
|
|
|
@@ -613,111 +591,109 @@ Using the `alignRight` attribute in conjuction with the `chevron="right"` attrib
|
|
|
613
591
|
Use the `disabled` attribute to disable the expand/collapse function and reduce the opacity for all accordions inside of the group.
|
|
614
592
|
|
|
615
593
|
<div class="exampleWrapper">
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
594
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/disabled-group.html) -->
|
|
595
|
+
<!-- The below content is automatically added from ./../apiExamples/disabled-group.html -->
|
|
596
|
+
<auro-accordion-group disabled>
|
|
597
|
+
<auro-accordion>
|
|
598
|
+
<span slot="trigger">Trigger</span>
|
|
599
|
+
<p>
|
|
622
600
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
623
|
-
|
|
624
|
-
|
|
601
|
+
</p>
|
|
602
|
+
<p>
|
|
625
603
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
626
|
-
|
|
627
|
-
|
|
604
|
+
</p>
|
|
605
|
+
<p>
|
|
628
606
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
629
|
-
|
|
630
|
-
|
|
607
|
+
</p>
|
|
608
|
+
<p>
|
|
631
609
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
610
|
+
</p>
|
|
611
|
+
</auro-accordion>
|
|
612
|
+
<auro-accordion>
|
|
613
|
+
<span slot="trigger">Trigger</span>
|
|
614
|
+
<p>
|
|
637
615
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
638
|
-
|
|
639
|
-
|
|
616
|
+
</p>
|
|
617
|
+
<p>
|
|
640
618
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
641
|
-
|
|
642
|
-
|
|
619
|
+
</p>
|
|
620
|
+
<p>
|
|
643
621
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
644
|
-
|
|
645
|
-
|
|
622
|
+
</p>
|
|
623
|
+
<p>
|
|
646
624
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
625
|
+
</p>
|
|
626
|
+
</auro-accordion>
|
|
627
|
+
<auro-accordion>
|
|
628
|
+
<span slot="trigger">Trigger</span>
|
|
629
|
+
<p>
|
|
652
630
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
653
|
-
|
|
654
|
-
|
|
631
|
+
</p>
|
|
632
|
+
<p>
|
|
655
633
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
656
|
-
|
|
657
|
-
|
|
634
|
+
</p>
|
|
635
|
+
<p>
|
|
658
636
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
659
|
-
|
|
660
|
-
|
|
637
|
+
</p>
|
|
638
|
+
<p>
|
|
661
639
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
640
|
+
</p>
|
|
641
|
+
</auro-accordion>
|
|
642
|
+
</auro-accordion-group>
|
|
643
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
666
644
|
</div>
|
|
667
645
|
<auro-accordion alignRight>
|
|
668
|
-
|
|
646
|
+
<span slot="trigger">See code</span>
|
|
669
647
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/disabled-group.html) -->
|
|
670
648
|
<!-- The below code snippet is automatically added from ./../apiExamples/disabled-group.html -->
|
|
671
649
|
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
<p>
|
|
650
|
+
<pre class="language-html"><code class="language-html"><auro-accordion-group disabled>
|
|
651
|
+
<auro-accordion>
|
|
652
|
+
<span slot="trigger">Trigger</span>
|
|
653
|
+
<p>
|
|
677
654
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
678
|
-
|
|
679
|
-
|
|
655
|
+
</p>
|
|
656
|
+
<p>
|
|
680
657
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
681
|
-
|
|
682
|
-
|
|
658
|
+
</p>
|
|
659
|
+
<p>
|
|
683
660
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
684
|
-
|
|
685
|
-
|
|
661
|
+
</p>
|
|
662
|
+
<p>
|
|
686
663
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
664
|
+
</p>
|
|
665
|
+
</auro-accordion>
|
|
666
|
+
<auro-accordion>
|
|
667
|
+
<span slot="trigger">Trigger</span>
|
|
668
|
+
<p>
|
|
692
669
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
693
|
-
|
|
694
|
-
|
|
670
|
+
</p>
|
|
671
|
+
<p>
|
|
695
672
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
696
|
-
|
|
697
|
-
|
|
673
|
+
</p>
|
|
674
|
+
<p>
|
|
698
675
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
699
|
-
|
|
700
|
-
|
|
676
|
+
</p>
|
|
677
|
+
<p>
|
|
701
678
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
679
|
+
</p>
|
|
680
|
+
</auro-accordion>
|
|
681
|
+
<auro-accordion>
|
|
682
|
+
<span slot="trigger">Trigger</span>
|
|
683
|
+
<p>
|
|
707
684
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
708
|
-
|
|
709
|
-
|
|
685
|
+
</p>
|
|
686
|
+
<p>
|
|
710
687
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
711
|
-
|
|
712
|
-
|
|
688
|
+
</p>
|
|
689
|
+
<p>
|
|
713
690
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
714
|
-
|
|
715
|
-
|
|
691
|
+
</p>
|
|
692
|
+
<p>
|
|
716
693
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
```
|
|
694
|
+
</p>
|
|
695
|
+
</auro-accordion>
|
|
696
|
+
</auro-accordion-group></code></pre>
|
|
721
697
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
722
698
|
</auro-accordion>
|
|
723
699
|
|
|
@@ -726,111 +702,109 @@ Use the `disabled` attribute to disable the expand/collapse function and reduce
|
|
|
726
702
|
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.
|
|
727
703
|
|
|
728
704
|
<div class="exampleWrapper">
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
705
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasis-group.html) -->
|
|
706
|
+
<!-- The below content is automatically added from ./../apiExamples/emphasis-group.html -->
|
|
707
|
+
<auro-accordion-group emphasis>
|
|
708
|
+
<auro-accordion>
|
|
709
|
+
<span slot="trigger">Trigger</span>
|
|
710
|
+
<p>
|
|
735
711
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
736
|
-
|
|
737
|
-
|
|
712
|
+
</p>
|
|
713
|
+
<p>
|
|
738
714
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
739
|
-
|
|
740
|
-
|
|
715
|
+
</p>
|
|
716
|
+
<p>
|
|
741
717
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
742
|
-
|
|
743
|
-
|
|
718
|
+
</p>
|
|
719
|
+
<p>
|
|
744
720
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
721
|
+
</p>
|
|
722
|
+
</auro-accordion>
|
|
723
|
+
<auro-accordion>
|
|
724
|
+
<span slot="trigger">Trigger</span>
|
|
725
|
+
<p>
|
|
750
726
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
751
|
-
|
|
752
|
-
|
|
727
|
+
</p>
|
|
728
|
+
<p>
|
|
753
729
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
754
|
-
|
|
755
|
-
|
|
730
|
+
</p>
|
|
731
|
+
<p>
|
|
756
732
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
757
|
-
|
|
758
|
-
|
|
733
|
+
</p>
|
|
734
|
+
<p>
|
|
759
735
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
736
|
+
</p>
|
|
737
|
+
</auro-accordion>
|
|
738
|
+
<auro-accordion>
|
|
739
|
+
<span slot="trigger">Trigger</span>
|
|
740
|
+
<p>
|
|
765
741
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
766
|
-
|
|
767
|
-
|
|
742
|
+
</p>
|
|
743
|
+
<p>
|
|
768
744
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
769
|
-
|
|
770
|
-
|
|
745
|
+
</p>
|
|
746
|
+
<p>
|
|
771
747
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
772
|
-
|
|
773
|
-
|
|
748
|
+
</p>
|
|
749
|
+
<p>
|
|
774
750
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
751
|
+
</p>
|
|
752
|
+
</auro-accordion>
|
|
753
|
+
</auro-accordion-group>
|
|
754
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
779
755
|
</div>
|
|
780
756
|
<auro-accordion alignRight>
|
|
781
|
-
|
|
757
|
+
<span slot="trigger">See code</span>
|
|
782
758
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasis-group.html) -->
|
|
783
759
|
<!-- The below code snippet is automatically added from ./../apiExamples/emphasis-group.html -->
|
|
784
760
|
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
<p>
|
|
761
|
+
<pre class="language-html"><code class="language-html"><auro-accordion-group emphasis>
|
|
762
|
+
<auro-accordion>
|
|
763
|
+
<span slot="trigger">Trigger</span>
|
|
764
|
+
<p>
|
|
790
765
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
791
|
-
|
|
792
|
-
|
|
766
|
+
</p>
|
|
767
|
+
<p>
|
|
793
768
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
794
|
-
|
|
795
|
-
|
|
769
|
+
</p>
|
|
770
|
+
<p>
|
|
796
771
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
797
|
-
|
|
798
|
-
|
|
772
|
+
</p>
|
|
773
|
+
<p>
|
|
799
774
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
775
|
+
</p>
|
|
776
|
+
</auro-accordion>
|
|
777
|
+
<auro-accordion>
|
|
778
|
+
<span slot="trigger">Trigger</span>
|
|
779
|
+
<p>
|
|
805
780
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
806
|
-
|
|
807
|
-
|
|
781
|
+
</p>
|
|
782
|
+
<p>
|
|
808
783
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
809
|
-
|
|
810
|
-
|
|
784
|
+
</p>
|
|
785
|
+
<p>
|
|
811
786
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
812
|
-
|
|
813
|
-
|
|
787
|
+
</p>
|
|
788
|
+
<p>
|
|
814
789
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
790
|
+
</p>
|
|
791
|
+
</auro-accordion>
|
|
792
|
+
<auro-accordion>
|
|
793
|
+
<span slot="trigger">Trigger</span>
|
|
794
|
+
<p>
|
|
820
795
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
821
|
-
|
|
822
|
-
|
|
796
|
+
</p>
|
|
797
|
+
<p>
|
|
823
798
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
824
|
-
|
|
825
|
-
|
|
799
|
+
</p>
|
|
800
|
+
<p>
|
|
826
801
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
827
|
-
|
|
828
|
-
|
|
802
|
+
</p>
|
|
803
|
+
<p>
|
|
829
804
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
```
|
|
805
|
+
</p>
|
|
806
|
+
</auro-accordion>
|
|
807
|
+
</auro-accordion-group></code></pre>
|
|
834
808
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
835
809
|
</auro-accordion>
|
|
836
810
|
|
|
@@ -839,111 +813,109 @@ Use the `emphasis` attribute to apply border highlights to the `auro-accordion`
|
|
|
839
813
|
Using the `noToggleExpanded` attribute will allow for multiple accordions in an group to be open at the same time.
|
|
840
814
|
|
|
841
815
|
<div class="exampleWrapper">
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
816
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/no-toggle-expanded.html) -->
|
|
817
|
+
<!-- The below content is automatically added from ./../apiExamples/no-toggle-expanded.html -->
|
|
818
|
+
<auro-accordion-group noToggleExpanded>
|
|
819
|
+
<auro-accordion>
|
|
820
|
+
<span slot="trigger">Trigger</span>
|
|
821
|
+
<p>
|
|
848
822
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
849
|
-
|
|
850
|
-
|
|
823
|
+
</p>
|
|
824
|
+
<p>
|
|
851
825
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
852
|
-
|
|
853
|
-
|
|
826
|
+
</p>
|
|
827
|
+
<p>
|
|
854
828
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
855
|
-
|
|
856
|
-
|
|
829
|
+
</p>
|
|
830
|
+
<p>
|
|
857
831
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
832
|
+
</p>
|
|
833
|
+
</auro-accordion>
|
|
834
|
+
<auro-accordion>
|
|
835
|
+
<span slot="trigger">Trigger</span>
|
|
836
|
+
<p>
|
|
863
837
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
864
|
-
|
|
865
|
-
|
|
838
|
+
</p>
|
|
839
|
+
<p>
|
|
866
840
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
867
|
-
|
|
868
|
-
|
|
841
|
+
</p>
|
|
842
|
+
<p>
|
|
869
843
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
870
|
-
|
|
871
|
-
|
|
844
|
+
</p>
|
|
845
|
+
<p>
|
|
872
846
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
847
|
+
</p>
|
|
848
|
+
</auro-accordion>
|
|
849
|
+
<auro-accordion>
|
|
850
|
+
<span slot="trigger">Trigger</span>
|
|
851
|
+
<p>
|
|
878
852
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
879
|
-
|
|
880
|
-
|
|
853
|
+
</p>
|
|
854
|
+
<p>
|
|
881
855
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
882
|
-
|
|
883
|
-
|
|
856
|
+
</p>
|
|
857
|
+
<p>
|
|
884
858
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
885
|
-
|
|
886
|
-
|
|
859
|
+
</p>
|
|
860
|
+
<p>
|
|
887
861
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
862
|
+
</p>
|
|
863
|
+
</auro-accordion>
|
|
864
|
+
</auro-accordion-group>
|
|
865
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
892
866
|
</div>
|
|
893
867
|
<auro-accordion alignRight>
|
|
894
|
-
|
|
868
|
+
<span slot="trigger">See code</span>
|
|
895
869
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/no-toggle-expanded.html) -->
|
|
896
870
|
<!-- The below code snippet is automatically added from ./../apiExamples/no-toggle-expanded.html -->
|
|
897
871
|
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
<p>
|
|
872
|
+
<pre class="language-html"><code class="language-html"><auro-accordion-group noToggleExpanded>
|
|
873
|
+
<auro-accordion>
|
|
874
|
+
<span slot="trigger">Trigger</span>
|
|
875
|
+
<p>
|
|
903
876
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
904
|
-
|
|
905
|
-
|
|
877
|
+
</p>
|
|
878
|
+
<p>
|
|
906
879
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
907
|
-
|
|
908
|
-
|
|
880
|
+
</p>
|
|
881
|
+
<p>
|
|
909
882
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
910
|
-
|
|
911
|
-
|
|
883
|
+
</p>
|
|
884
|
+
<p>
|
|
912
885
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
886
|
+
</p>
|
|
887
|
+
</auro-accordion>
|
|
888
|
+
<auro-accordion>
|
|
889
|
+
<span slot="trigger">Trigger</span>
|
|
890
|
+
<p>
|
|
918
891
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
919
|
-
|
|
920
|
-
|
|
892
|
+
</p>
|
|
893
|
+
<p>
|
|
921
894
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
922
|
-
|
|
923
|
-
|
|
895
|
+
</p>
|
|
896
|
+
<p>
|
|
924
897
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
925
|
-
|
|
926
|
-
|
|
898
|
+
</p>
|
|
899
|
+
<p>
|
|
927
900
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
901
|
+
</p>
|
|
902
|
+
</auro-accordion>
|
|
903
|
+
<auro-accordion>
|
|
904
|
+
<span slot="trigger">Trigger</span>
|
|
905
|
+
<p>
|
|
933
906
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
934
|
-
|
|
935
|
-
|
|
907
|
+
</p>
|
|
908
|
+
<p>
|
|
936
909
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
937
|
-
|
|
938
|
-
|
|
910
|
+
</p>
|
|
911
|
+
<p>
|
|
939
912
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
940
|
-
|
|
941
|
-
|
|
913
|
+
</p>
|
|
914
|
+
<p>
|
|
942
915
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
```
|
|
916
|
+
</p>
|
|
917
|
+
</auro-accordion>
|
|
918
|
+
</auro-accordion-group></code></pre>
|
|
947
919
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
948
920
|
</auro-accordion>
|
|
949
921
|
|
|
@@ -952,111 +924,109 @@ Using the `noToggleExpanded` attribute will allow for multiple accordions in an
|
|
|
952
924
|
Using the `variant="lg"` attribute will cause the size of all accordion triggers within the group to render larger.
|
|
953
925
|
|
|
954
926
|
<div class="exampleWrapper">
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
927
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-lg-group.html) -->
|
|
928
|
+
<!-- The below content is automatically added from ./../apiExamples/variant-lg-group.html -->
|
|
929
|
+
<auro-accordion-group variant="lg">
|
|
930
|
+
<auro-accordion>
|
|
931
|
+
<span slot="trigger">Trigger</span>
|
|
932
|
+
<p>
|
|
961
933
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
962
|
-
|
|
963
|
-
|
|
934
|
+
</p>
|
|
935
|
+
<p>
|
|
964
936
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
965
|
-
|
|
966
|
-
|
|
937
|
+
</p>
|
|
938
|
+
<p>
|
|
967
939
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
968
|
-
|
|
969
|
-
|
|
940
|
+
</p>
|
|
941
|
+
<p>
|
|
970
942
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
943
|
+
</p>
|
|
944
|
+
</auro-accordion>
|
|
945
|
+
<auro-accordion>
|
|
946
|
+
<span slot="trigger">Trigger</span>
|
|
947
|
+
<p>
|
|
976
948
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
977
|
-
|
|
978
|
-
|
|
949
|
+
</p>
|
|
950
|
+
<p>
|
|
979
951
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
980
|
-
|
|
981
|
-
|
|
952
|
+
</p>
|
|
953
|
+
<p>
|
|
982
954
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
983
|
-
|
|
984
|
-
|
|
955
|
+
</p>
|
|
956
|
+
<p>
|
|
985
957
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
958
|
+
</p>
|
|
959
|
+
</auro-accordion>
|
|
960
|
+
<auro-accordion>
|
|
961
|
+
<span slot="trigger">Trigger</span>
|
|
962
|
+
<p>
|
|
991
963
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
992
|
-
|
|
993
|
-
|
|
964
|
+
</p>
|
|
965
|
+
<p>
|
|
994
966
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
995
|
-
|
|
996
|
-
|
|
967
|
+
</p>
|
|
968
|
+
<p>
|
|
997
969
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
998
|
-
|
|
999
|
-
|
|
970
|
+
</p>
|
|
971
|
+
<p>
|
|
1000
972
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
973
|
+
</p>
|
|
974
|
+
</auro-accordion>
|
|
975
|
+
</auro-accordion-group>
|
|
976
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1005
977
|
</div>
|
|
1006
978
|
<auro-accordion alignRight>
|
|
1007
|
-
|
|
979
|
+
<span slot="trigger">See code</span>
|
|
1008
980
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-lg-group.html) -->
|
|
1009
981
|
<!-- The below code snippet is automatically added from ./../apiExamples/variant-lg-group.html -->
|
|
1010
982
|
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
<p>
|
|
983
|
+
<pre class="language-html"><code class="language-html"><auro-accordion-group variant="lg">
|
|
984
|
+
<auro-accordion>
|
|
985
|
+
<span slot="trigger">Trigger</span>
|
|
986
|
+
<p>
|
|
1016
987
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1017
|
-
|
|
1018
|
-
|
|
988
|
+
</p>
|
|
989
|
+
<p>
|
|
1019
990
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1020
|
-
|
|
1021
|
-
|
|
991
|
+
</p>
|
|
992
|
+
<p>
|
|
1022
993
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1023
|
-
|
|
1024
|
-
|
|
994
|
+
</p>
|
|
995
|
+
<p>
|
|
1025
996
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
997
|
+
</p>
|
|
998
|
+
</auro-accordion>
|
|
999
|
+
<auro-accordion>
|
|
1000
|
+
<span slot="trigger">Trigger</span>
|
|
1001
|
+
<p>
|
|
1031
1002
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1032
|
-
|
|
1033
|
-
|
|
1003
|
+
</p>
|
|
1004
|
+
<p>
|
|
1034
1005
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1035
|
-
|
|
1036
|
-
|
|
1006
|
+
</p>
|
|
1007
|
+
<p>
|
|
1037
1008
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1038
|
-
|
|
1039
|
-
|
|
1009
|
+
</p>
|
|
1010
|
+
<p>
|
|
1040
1011
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1012
|
+
</p>
|
|
1013
|
+
</auro-accordion>
|
|
1014
|
+
<auro-accordion>
|
|
1015
|
+
<span slot="trigger">Trigger</span>
|
|
1016
|
+
<p>
|
|
1046
1017
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1047
|
-
|
|
1048
|
-
|
|
1018
|
+
</p>
|
|
1019
|
+
<p>
|
|
1049
1020
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1050
|
-
|
|
1051
|
-
|
|
1021
|
+
</p>
|
|
1022
|
+
<p>
|
|
1052
1023
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1053
|
-
|
|
1054
|
-
|
|
1024
|
+
</p>
|
|
1025
|
+
<p>
|
|
1055
1026
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1056
|
-
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
```
|
|
1027
|
+
</p>
|
|
1028
|
+
</auro-accordion>
|
|
1029
|
+
</auro-accordion-group></code></pre>
|
|
1060
1030
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1061
1031
|
</auro-accordion>
|
|
1062
1032
|
|
|
@@ -1065,111 +1035,109 @@ Using the `variant="lg"` attribute will cause the size of all accordion triggers
|
|
|
1065
1035
|
Using the `variant="sm"` attribute will cause the size of all accordion triggers in the group to render smaller.
|
|
1066
1036
|
|
|
1067
1037
|
<div class="exampleWrapper">
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1038
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/variant-sm-group.html) -->
|
|
1039
|
+
<!-- The below content is automatically added from ./../apiExamples/variant-sm-group.html -->
|
|
1040
|
+
<auro-accordion-group variant="sm">
|
|
1041
|
+
<auro-accordion>
|
|
1042
|
+
<span slot="trigger">Trigger</span>
|
|
1043
|
+
<p>
|
|
1074
1044
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1075
|
-
|
|
1076
|
-
|
|
1045
|
+
</p>
|
|
1046
|
+
<p>
|
|
1077
1047
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1078
|
-
|
|
1079
|
-
|
|
1048
|
+
</p>
|
|
1049
|
+
<p>
|
|
1080
1050
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1081
|
-
|
|
1082
|
-
|
|
1051
|
+
</p>
|
|
1052
|
+
<p>
|
|
1083
1053
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1054
|
+
</p>
|
|
1055
|
+
</auro-accordion>
|
|
1056
|
+
<auro-accordion>
|
|
1057
|
+
<span slot="trigger">Trigger</span>
|
|
1058
|
+
<p>
|
|
1089
1059
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1090
|
-
|
|
1091
|
-
|
|
1060
|
+
</p>
|
|
1061
|
+
<p>
|
|
1092
1062
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1093
|
-
|
|
1094
|
-
|
|
1063
|
+
</p>
|
|
1064
|
+
<p>
|
|
1095
1065
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1096
|
-
|
|
1097
|
-
|
|
1066
|
+
</p>
|
|
1067
|
+
<p>
|
|
1098
1068
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1069
|
+
</p>
|
|
1070
|
+
</auro-accordion>
|
|
1071
|
+
<auro-accordion>
|
|
1072
|
+
<span slot="trigger">Trigger</span>
|
|
1073
|
+
<p>
|
|
1104
1074
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1105
|
-
|
|
1106
|
-
|
|
1075
|
+
</p>
|
|
1076
|
+
<p>
|
|
1107
1077
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1108
|
-
|
|
1109
|
-
|
|
1078
|
+
</p>
|
|
1079
|
+
<p>
|
|
1110
1080
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1111
|
-
|
|
1112
|
-
|
|
1081
|
+
</p>
|
|
1082
|
+
<p>
|
|
1113
1083
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1084
|
+
</p>
|
|
1085
|
+
</auro-accordion>
|
|
1086
|
+
</auro-accordion-group>
|
|
1087
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1118
1088
|
</div>
|
|
1119
1089
|
<auro-accordion alignRight>
|
|
1120
|
-
|
|
1090
|
+
<span slot="trigger">See code</span>
|
|
1121
1091
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/variant-sm-group.html) -->
|
|
1122
1092
|
<!-- The below code snippet is automatically added from ./../apiExamples/variant-sm-group.html -->
|
|
1123
1093
|
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
<p>
|
|
1094
|
+
<pre class="language-html"><code class="language-html"><auro-accordion-group variant="sm">
|
|
1095
|
+
<auro-accordion>
|
|
1096
|
+
<span slot="trigger">Trigger</span>
|
|
1097
|
+
<p>
|
|
1129
1098
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1130
|
-
|
|
1131
|
-
|
|
1099
|
+
</p>
|
|
1100
|
+
<p>
|
|
1132
1101
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1133
|
-
|
|
1134
|
-
|
|
1102
|
+
</p>
|
|
1103
|
+
<p>
|
|
1135
1104
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1136
|
-
|
|
1137
|
-
|
|
1105
|
+
</p>
|
|
1106
|
+
<p>
|
|
1138
1107
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1108
|
+
</p>
|
|
1109
|
+
</auro-accordion>
|
|
1110
|
+
<auro-accordion>
|
|
1111
|
+
<span slot="trigger">Trigger</span>
|
|
1112
|
+
<p>
|
|
1144
1113
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1145
|
-
|
|
1146
|
-
|
|
1114
|
+
</p>
|
|
1115
|
+
<p>
|
|
1147
1116
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1148
|
-
|
|
1149
|
-
|
|
1117
|
+
</p>
|
|
1118
|
+
<p>
|
|
1150
1119
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1151
|
-
|
|
1152
|
-
|
|
1120
|
+
</p>
|
|
1121
|
+
<p>
|
|
1153
1122
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1123
|
+
</p>
|
|
1124
|
+
</auro-accordion>
|
|
1125
|
+
<auro-accordion>
|
|
1126
|
+
<span slot="trigger">Trigger</span>
|
|
1127
|
+
<p>
|
|
1159
1128
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
|
1160
|
-
|
|
1161
|
-
|
|
1129
|
+
</p>
|
|
1130
|
+
<p>
|
|
1162
1131
|
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
|
1163
|
-
|
|
1164
|
-
|
|
1132
|
+
</p>
|
|
1133
|
+
<p>
|
|
1165
1134
|
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
|
1166
|
-
|
|
1167
|
-
|
|
1135
|
+
</p>
|
|
1136
|
+
<p>
|
|
1168
1137
|
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
```
|
|
1138
|
+
</p>
|
|
1139
|
+
</auro-accordion>
|
|
1140
|
+
</auro-accordion-group></code></pre>
|
|
1173
1141
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1174
1142
|
</auro-accordion>
|
|
1175
1143
|
|
|
@@ -1180,15 +1148,13 @@ The component may be restyled by changing the values of the following token(s).
|
|
|
1180
1148
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
1181
1149
|
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
1182
1150
|
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1151
|
+
<pre class="language-scss"><code class="language-scss">@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|
|
1152
|
+
|
|
1186
1153
|
:host {
|
|
1187
1154
|
--ds-auro-accordion-content-border-color: transparent;
|
|
1188
1155
|
--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
|
|
1189
1156
|
--ds-auro-accordion-trigger-border-color: transparent;
|
|
1190
1157
|
--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
1191
1158
|
--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
|
|
1192
|
-
}
|
|
1193
|
-
```
|
|
1159
|
+
}</code></pre>
|
|
1194
1160
|
<!-- AURO-GENERATED-CONTENT:END -->
|