@aurodesignsystem-dev/auro-sidenav 0.0.0-pr84.1 → 0.0.0-pr87.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -63
- package/custom-elements.json +505 -1841
- package/demo/api.md +300 -97
- package/demo/auro-sidenavsection.min.js +203 -85
- package/demo/index.md +20 -258
- package/dist/{auro-sidenavsection-C7L7K2Ru.js → auro-sidenavsection-BlshtGvd.js} +133 -17
- package/dist/index.d.ts +329 -262
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +14 -8
package/demo/api.md
CHANGED
|
@@ -1,122 +1,320 @@
|
|
|
1
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
2
|
-
<!-- The below content is automatically added from
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
3
|
|
|
4
4
|
# auro-sidenav
|
|
5
5
|
|
|
6
|
-
The auro-sidenav element provides users a way to create navigational interfaces on the left-hand
|
|
6
|
+
The `auro-sidenav` element provides users a way to create navigational interfaces on the left-hand
|
|
7
7
|
side of a page to navigate to separate pages or different sections within the same page.
|
|
8
8
|
|
|
9
9
|
### Properties & Attributes
|
|
10
10
|
|
|
11
|
-
| Properties | Attributes |
|
|
12
|
-
|
|
|
13
|
-
static
|
|
14
|
-
|
|
11
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
12
|
+
| ---------- | ---------- | --------- | ------- | ------- | ------------------------------------------------------------------------------ |
|
|
13
|
+
| static | static | | boolean | | When applied, the sidenav will expand to an open state and can't be collapsed. |
|
|
14
|
+
|
|
15
15
|
### Methods
|
|
16
16
|
|
|
17
|
-
| Name
|
|
18
|
-
|
|
|
19
|
-
register | `name` (string) - The name of element that you want to register
|
|
20
|
-
|
|
17
|
+
| Name | Parameters | Return | Description |
|
|
18
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
19
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
20
|
+
|
|
21
21
|
### Slots
|
|
22
22
|
|
|
23
|
-
| Name
|
|
24
|
-
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
---
|
|
30
|
-
|
|
23
|
+
| Name | Description |
|
|
24
|
+
| --------- | --------------------------------------------------------------------------------------------------- |
|
|
25
|
+
| (default) | Default slot of the sidenav. Please construct using `auro-sidenavitems` and `auro-sidenavsections`. |
|
|
26
|
+
| ariaLabel | Defines what to use as the `aria-label` of the sidenav. |
|
|
27
|
+
| heading | Defines what to use as the header of the sidenav. |
|
|
28
|
+
|
|
31
29
|
# auro-sidenavitem
|
|
32
30
|
|
|
33
|
-
The auro-sidenavitem element
|
|
31
|
+
The `auro-sidenavitem` element can be used to create a link within the `auro-sidenav`.
|
|
34
32
|
|
|
35
33
|
### Properties & Attributes
|
|
36
34
|
|
|
37
|
-
| Properties
|
|
38
|
-
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
target
|
|
50
|
-
type
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
35
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
36
|
+
| -------------- | -------------- | --------- | ----------------------------------------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
37
|
+
| appearance | appearance | | string | `default` | Defines whether the component will be on lighter or darker backgrounds. |
|
|
38
|
+
| download | download | | boolean | | If true, the linked resource will be downloaded when the hyperlink is clicked. |
|
|
39
|
+
| fluid | fluid | | boolean | | If true and `type="cta"`, the hyperlink will have a fluid-width UI. |
|
|
40
|
+
| href | href | | string | | Defines the URL of the linked page. |
|
|
41
|
+
| layout | layout | | string | `{'default'}` | Defines the language of an element. |
|
|
42
|
+
| ondark | ondark | | boolean | | DEPRECATED - use `appearance="inverse"` instead. |
|
|
43
|
+
| referrerpolicy | referrerpolicy | | boolean | | If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests. |
|
|
44
|
+
| rel | rel | | string | | Defines the relationship between the current document and the linked document. Visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/rel) for more information. |
|
|
45
|
+
| role | | | string | | Defines ARIA roles; currently supports `button` for extended experiences. |
|
|
46
|
+
| safeUri | | readonly | string | | Returns a safe URI based on the provided `href`.<br>If `href` is truthy, it generates a safe URL using the `safeUrl` function.<br>Otherwise, it returns an empty string. |
|
|
47
|
+
| target | target | | string | | Defines where to open the linked document. |
|
|
48
|
+
| type | type | | `nav` \| `cta` | | Defines the type of hyperlink. |
|
|
49
|
+
| variant | variant | | `primary` \| `secondary` \| `tertiary` \| `ghost` \| `flat` | `primary` | Sets button variant option when using `type="cta"`. |
|
|
50
|
+
|
|
54
51
|
### Methods
|
|
55
52
|
|
|
56
|
-
| Name
|
|
57
|
-
|
|
|
58
|
-
register | `name` (string) - The name of element that you want to register
|
|
59
|
-
|
|
53
|
+
| Name | Parameters | Return | Description |
|
|
54
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
55
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
56
|
+
|
|
60
57
|
### CSS Shadow Parts
|
|
61
58
|
|
|
62
|
-
| Name
|
|
63
|
-
|
|
|
64
|
-
link
|
|
65
|
-
targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink.
|
|
66
|
-
|
|
67
|
-
---
|
|
68
|
-
|
|
59
|
+
| Name | Description |
|
|
60
|
+
| ---------- | ---------------------------------------------------------------------------- |
|
|
61
|
+
| link | Allows styling to be applied to the `a` element. |
|
|
62
|
+
| targetIcon | Allows styling to be applied to the icon that appears next to the hyperlink. |
|
|
63
|
+
|
|
69
64
|
# auro-sidenavsection
|
|
70
65
|
|
|
71
|
-
The auro-sidenavsection element can be used to create an accordion of auro-sidenavitems within the auro-sidenav
|
|
66
|
+
The `auro-sidenavsection` element can be used to create an accordion of `auro-sidenavitems` within the `auro-sidenav`.
|
|
72
67
|
|
|
73
68
|
### Properties & Attributes
|
|
74
69
|
|
|
75
|
-
| Properties | Attributes |
|
|
76
|
-
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
70
|
+
| Properties | Attributes | Modifiers | Type | Default | Description |
|
|
71
|
+
| ---------- | ---------- | --------- | ------- | ------- | ------------------------------------------------------------------------- |
|
|
72
|
+
| alignRight | alignRight | | boolean | | If set, the trigger content will align right. |
|
|
73
|
+
| chevron | chevron | | string | | Sets chevron variant option. Possible values are: `none`, `right`. |
|
|
74
|
+
| disabled | disabled | | boolean | | If set, the accordion is disabled and have reduced opacity. |
|
|
75
|
+
| emphasis | emphasis | | boolean | | If set, emphasis styles will be applied to the auro-accordions. |
|
|
76
|
+
| expanded | expanded | | boolean | `false` | If set, the accordion is expanded. |
|
|
77
|
+
| grouped | grouped | | boolean | | Attribute will be set on accordion when it appears in an accordion group. |
|
|
78
|
+
| variant | variant | | string | | Sets accordion variant option. Possible values are: `sm`, `lg`. |
|
|
79
|
+
|
|
85
80
|
### Methods
|
|
86
81
|
|
|
87
|
-
| Name
|
|
88
|
-
|
|
|
89
|
-
register | `name` (string) - The name of element that you want to register
|
|
90
|
-
toggle
|
|
91
|
-
|
|
82
|
+
| Name | Parameters | Return | Description |
|
|
83
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------- |
|
|
84
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
85
|
+
| toggle | None | | Toggles the visibility of the accordion content. |
|
|
86
|
+
|
|
92
87
|
### Events
|
|
93
88
|
|
|
94
|
-
| Name
|
|
95
|
-
|
|
|
96
|
-
toggleExpanded | Notifies that the accordion has been expanded or closed.
|
|
97
|
-
|
|
89
|
+
| Name | Description |
|
|
90
|
+
| -------------- | -------------------------------------------------------- |
|
|
91
|
+
| toggleExpanded | Notifies that the accordion has been expanded or closed. |
|
|
92
|
+
|
|
98
93
|
### Slots
|
|
99
94
|
|
|
100
|
-
| Name
|
|
101
|
-
|
|
|
102
|
-
(default) | Default slot for the accordion content.
|
|
103
|
-
trigger
|
|
104
|
-
|
|
95
|
+
| Name | Description |
|
|
96
|
+
| --------- | ------------------------------------------- |
|
|
97
|
+
| (default) | Default slot for the accordion content. |
|
|
98
|
+
| trigger | Defines the content of the trigger element. |
|
|
99
|
+
|
|
105
100
|
### CSS Shadow Parts
|
|
106
101
|
|
|
107
|
-
| Name
|
|
108
|
-
|
|
|
109
|
-
accordion | Apply CSS to Accordion wrapper.
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
102
|
+
| Name | Description |
|
|
103
|
+
| --------- | ----------------------------------- |
|
|
104
|
+
| accordion | Apply CSS to Accordion wrapper. |
|
|
105
|
+
| chevron | Apply CSS to chevron icon. |
|
|
106
|
+
| content | Apply CSS to the accordion content. |
|
|
107
|
+
| trigger | Apply CSS to trigger element. |
|
|
113
108
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
114
109
|
|
|
115
|
-
##
|
|
110
|
+
## Basic Sidenav Item
|
|
111
|
+
|
|
112
|
+
The `<auro-sidenavitem>` element is an [extension](https://lit.dev/docs/components/defining/) of `<auro-hyperlink>` element. All of the [auro-hyperlink API](https://auro.alaskaair.com/components/auro/hyperlink/api) are therefore exposed through the `auro-sidenavitem`.
|
|
113
|
+
|
|
114
|
+
<div class="exampleWrapper">
|
|
115
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sidenavitem.html) -->
|
|
116
|
+
<!-- The below content is automatically added from ../apiExamples/sidenavitem.html -->
|
|
117
|
+
<auro-sidenav static>
|
|
118
|
+
<span slot="heading">Airlines</span>
|
|
119
|
+
<auro-sidenavitem href="/" target="_blank">Alaska Airlines</auro-sidenavitem>
|
|
120
|
+
<auro-sidenavitem href="https://www.aa.com/" target="_blank">American Airlines</auro-sidenavitem>
|
|
121
|
+
<auro-sidenavitem href="https://www.britishairways.com/" target="_blank">British Airways</auro-sidenavitem>
|
|
122
|
+
<auro-sidenavitem href="https://www.jal.co.jp/" target="_blank">Japan Airlines</auro-sidenavitem>
|
|
123
|
+
</auro-sidenav>
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
125
|
+
</div>
|
|
126
|
+
<auro-accordion alignRight>
|
|
127
|
+
<span slot="trigger">See code</span>
|
|
128
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sidenavitem.html) -->
|
|
129
|
+
<!-- The below code snippet is automatically added from ../apiExamples/sidenavitem.html -->
|
|
130
|
+
|
|
131
|
+
```html
|
|
132
|
+
<auro-sidenav static>
|
|
133
|
+
<span slot="heading">Airlines</span>
|
|
134
|
+
<auro-sidenavitem href="/" target="_blank">Alaska Airlines</auro-sidenavitem>
|
|
135
|
+
<auro-sidenavitem href="https://www.aa.com/" target="_blank">American Airlines</auro-sidenavitem>
|
|
136
|
+
<auro-sidenavitem href="https://www.britishairways.com/" target="_blank">British Airways</auro-sidenavitem>
|
|
137
|
+
<auro-sidenavitem href="https://www.jal.co.jp/" target="_blank">Japan Airlines</auro-sidenavitem>
|
|
138
|
+
</auro-sidenav>
|
|
139
|
+
```
|
|
140
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
141
|
+
</auro-accordion>
|
|
142
|
+
|
|
143
|
+
## Basic Sidenav Section
|
|
144
|
+
|
|
145
|
+
The `<auro-sidenav>` element uses `<auro-sidenavsection>` elements to create sections and layers in the navigation. The `<auro-sidenavsection>` element is an extension of the `<auro-accordion>` element, you will need to supply a `trigger` slot for its children as well as the `<auro-sidenavitem>` elements. The `<auro-sidenav>` element will automatically apply the `chevron` and `fluid` attributes to the `<auro-sidenavsection>` elements.
|
|
146
|
+
|
|
147
|
+
The `<auro-sidenavitem>` elements will automatically be styled as tiered children in the `<auro-sidenav>` element.
|
|
148
|
+
|
|
149
|
+
Please [refer to the auro-accordion documentation](https://auro.alaskaair.com/components/auro/accordion/api) if you wish to use any of its additional attributes or functionality.
|
|
150
|
+
|
|
151
|
+
<div class="exampleWrapper">
|
|
152
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/sidenavsection.html) -->
|
|
153
|
+
<!-- The below content is automatically added from ../apiExamples/sidenavsection.html -->
|
|
154
|
+
<auro-sidenav static>
|
|
155
|
+
<span slot="heading">Helpful links</span>
|
|
156
|
+
<auro-sidenavsection>
|
|
157
|
+
<span slot="trigger">Reservations</span>
|
|
158
|
+
<auro-sidenavitem href="/content/travel-info/accessible-services/airport-accessibility">Is it safe to fly with my pet?</auro-sidenavitem>
|
|
159
|
+
<auro-sidenavitem href="/booking/reservation-lookup">Why are certain breeds prohibited from flying in the cargo compartment?</auro-sidenavitem>
|
|
160
|
+
</auro-sidenavsection>
|
|
161
|
+
<auro-sidenavsection>
|
|
162
|
+
<span slot="trigger">Hotels, cars, and rides</span>
|
|
163
|
+
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/hotels/user/reservations">Hotel reservations</auro-sidenavitem>
|
|
164
|
+
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/car-rental/manage">Car reservations</auro-sidenavitem>
|
|
165
|
+
</auro-sidenavsection>
|
|
166
|
+
<auro-sidenavsection>
|
|
167
|
+
<span slot="trigger">Animals</span>
|
|
168
|
+
<auro-sidenavitem href="/content/travel-info/pets">Booking pet travel</auro-sidenavitem>
|
|
169
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa">Pet travel FAQ</auro-sidenavitem>
|
|
170
|
+
</auro-sidenavsection>
|
|
171
|
+
</auro-sidenav>
|
|
172
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
173
|
+
</div>
|
|
174
|
+
<auro-accordion alignRight>
|
|
175
|
+
<span slot="trigger">See code</span>
|
|
176
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/sidenavsection.html) -->
|
|
177
|
+
<!-- The below code snippet is automatically added from ../apiExamples/sidenavsection.html -->
|
|
178
|
+
|
|
179
|
+
```html
|
|
180
|
+
<auro-sidenav static>
|
|
181
|
+
<span slot="heading">Helpful links</span>
|
|
182
|
+
<auro-sidenavsection>
|
|
183
|
+
<span slot="trigger">Reservations</span>
|
|
184
|
+
<auro-sidenavitem href="/content/travel-info/accessible-services/airport-accessibility">Is it safe to fly with my pet?</auro-sidenavitem>
|
|
185
|
+
<auro-sidenavitem href="/booking/reservation-lookup">Why are certain breeds prohibited from flying in the cargo compartment?</auro-sidenavitem>
|
|
186
|
+
</auro-sidenavsection>
|
|
187
|
+
<auro-sidenavsection>
|
|
188
|
+
<span slot="trigger">Hotels, cars, and rides</span>
|
|
189
|
+
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/hotels/user/reservations">Hotel reservations</auro-sidenavitem>
|
|
190
|
+
<auro-sidenavitem target="_blank" href="https://www.alaskaair.com/car-rental/manage">Car reservations</auro-sidenavitem>
|
|
191
|
+
</auro-sidenavsection>
|
|
192
|
+
<auro-sidenavsection>
|
|
193
|
+
<span slot="trigger">Animals</span>
|
|
194
|
+
<auro-sidenavitem href="/content/travel-info/pets">Booking pet travel</auro-sidenavitem>
|
|
195
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/banfield-qa">Pet travel FAQ</auro-sidenavitem>
|
|
196
|
+
</auro-sidenavsection>
|
|
197
|
+
</auro-sidenav>
|
|
198
|
+
```
|
|
199
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
200
|
+
</auro-accordion>
|
|
201
|
+
|
|
202
|
+
## Property & Attribute Examples
|
|
203
|
+
|
|
204
|
+
### Selected
|
|
205
|
+
|
|
206
|
+
The `<auro-sidenav>` element supports using the `selected` attribute on `<auro-sidenavitem>` element to designate an item as active.
|
|
207
|
+
|
|
208
|
+
<div class="exampleWrapper">
|
|
209
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/selected.html) -->
|
|
210
|
+
<!-- The below content is automatically added from ../apiExamples/selected.html -->
|
|
211
|
+
<auro-sidenav static>
|
|
212
|
+
<span slot="heading">Favorite In-Flight Meal</span>
|
|
213
|
+
<auro-sidenavitem>Signature Fruit & Cheese Platter</auro-sidenavitem>
|
|
214
|
+
<auro-sidenavitem selected>The Jetsetter's Jam Sandwich</auro-sidenavitem>
|
|
215
|
+
<auro-sidenavitem>Northwest Deli Picnic Pack</auro-sidenavitem>
|
|
216
|
+
<auro-sidenavitem>Mediterranean Tapas Picnic Pack</auro-sidenavitem>
|
|
217
|
+
<auro-sidenavitem>Kid's Choice Picnic Pack</auro-sidenavitem>
|
|
218
|
+
</auro-sidenav>
|
|
219
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
220
|
+
</div>
|
|
221
|
+
<auro-accordion alignRight>
|
|
222
|
+
<span slot="trigger">See code</span>
|
|
223
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/selected.html) -->
|
|
224
|
+
<!-- The below code snippet is automatically added from ../apiExamples/selected.html -->
|
|
225
|
+
|
|
226
|
+
```html
|
|
227
|
+
<auro-sidenav static>
|
|
228
|
+
<span slot="heading">Favorite In-Flight Meal</span>
|
|
229
|
+
<auro-sidenavitem>Signature Fruit & Cheese Platter</auro-sidenavitem>
|
|
230
|
+
<auro-sidenavitem selected>The Jetsetter's Jam Sandwich</auro-sidenavitem>
|
|
231
|
+
<auro-sidenavitem>Northwest Deli Picnic Pack</auro-sidenavitem>
|
|
232
|
+
<auro-sidenavitem>Mediterranean Tapas Picnic Pack</auro-sidenavitem>
|
|
233
|
+
<auro-sidenavitem>Kid's Choice Picnic Pack</auro-sidenavitem>
|
|
234
|
+
</auro-sidenav>
|
|
235
|
+
```
|
|
236
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
237
|
+
</auro-accordion>
|
|
238
|
+
|
|
239
|
+
### Static
|
|
240
|
+
|
|
241
|
+
The `<auro-sidenav>` element uses the attribute `static` to toggle on/off accordion functionality with the navigation header. This can be both static and dynamic. Look at the "Set Up" section on the component landing page for more information on dynamic usage.
|
|
242
|
+
|
|
243
|
+
<div class="exampleWrapper">
|
|
244
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/static.html) -->
|
|
245
|
+
<!-- The below content is automatically added from ../apiExamples/static.html -->
|
|
246
|
+
<auro-sidenav>
|
|
247
|
+
<span slot="heading">Collapsible side navigation (click to toggle)</span>
|
|
248
|
+
<auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
|
|
249
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-cabin">Pets in cabin</auro-sidenavitem>
|
|
250
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
|
|
251
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
|
|
252
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
|
|
253
|
+
</auro-sidenav>
|
|
254
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
255
|
+
</div>
|
|
256
|
+
<auro-accordion alignRight>
|
|
257
|
+
<span slot="trigger">See code</span>
|
|
258
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/static.html) -->
|
|
259
|
+
<!-- The below code snippet is automatically added from ../apiExamples/static.html -->
|
|
260
|
+
|
|
261
|
+
```html
|
|
262
|
+
<auro-sidenav>
|
|
263
|
+
<span slot="heading">Collapsible side navigation (click to toggle)</span>
|
|
264
|
+
<auro-sidenavitem href="/content/travel-info/pets">Pet travel overview</auro-sidenavitem>
|
|
265
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-cabin">Pets in cabin</auro-sidenavitem>
|
|
266
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-with-pets/pets-in-baggage-compartment">Pets in baggage compartment</auro-sidenavitem>
|
|
267
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-hawaii">Traveling to Hawaii</auro-sidenavitem>
|
|
268
|
+
<auro-sidenavitem href="/content/travel-info/policies/pets-traveling-international" target="_blank">International travel with pets</auro-sidenavitem>
|
|
269
|
+
</auro-sidenav>
|
|
270
|
+
```
|
|
271
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
272
|
+
</auro-accordion>
|
|
273
|
+
|
|
274
|
+
## Method Examples
|
|
275
|
+
|
|
276
|
+
<!-- Add all method examples here, remove section if none exist -->
|
|
277
|
+
|
|
278
|
+
## Event Examples
|
|
279
|
+
|
|
280
|
+
<!-- Add all event examples here, remove section if none exist -->
|
|
116
281
|
|
|
117
282
|
### Slot Examples
|
|
118
283
|
|
|
119
|
-
|
|
284
|
+
### Aria Label
|
|
285
|
+
|
|
286
|
+
The `ariaLabel` slot defines what to use as the aria-label of the sidenav.
|
|
287
|
+
|
|
288
|
+
**Note:** Do not use the `aria-label` attribute on the `auro-sidenav` element itself. This will be ignored in favor of the `ariaLabel` slot.
|
|
289
|
+
|
|
290
|
+
<div class="exampleWrapper">
|
|
291
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/aria-label.html) -->
|
|
292
|
+
<!-- The below content is automatically added from ../apiExamples/aria-label.html -->
|
|
293
|
+
<auro-sidenav static>
|
|
294
|
+
<span slot="ariaLabel">History of Alaska Airlines</span>
|
|
295
|
+
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
296
|
+
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
297
|
+
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
298
|
+
</auro-sidenav>
|
|
299
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
300
|
+
</div>
|
|
301
|
+
<auro-accordion alignRight>
|
|
302
|
+
<span slot="trigger">See code</span>
|
|
303
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/aria-label.html) -->
|
|
304
|
+
<!-- The below code snippet is automatically added from ../apiExamples/aria-label.html -->
|
|
305
|
+
|
|
306
|
+
```html
|
|
307
|
+
<auro-sidenav static>
|
|
308
|
+
<span slot="ariaLabel">History of Alaska Airlines</span>
|
|
309
|
+
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
310
|
+
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
311
|
+
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
312
|
+
</auro-sidenav>
|
|
313
|
+
```
|
|
314
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
315
|
+
</auro-accordion>
|
|
316
|
+
|
|
317
|
+
### Heading
|
|
120
318
|
|
|
121
319
|
The `heading` slot defines what to use as the header of the sidenav.
|
|
122
320
|
|
|
@@ -147,31 +345,35 @@ The `heading` slot defines what to use as the header of the sidenav.
|
|
|
147
345
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
148
346
|
</auro-accordion>
|
|
149
347
|
|
|
150
|
-
|
|
348
|
+
## CSS Shadow Part Examples
|
|
151
349
|
|
|
152
|
-
|
|
350
|
+
<!-- Add all CSS Shadow Part examples here, remove section if none exist -->
|
|
351
|
+
|
|
352
|
+
## Common Usage Patterns & Functional Examples
|
|
353
|
+
|
|
354
|
+
### Responsive
|
|
153
355
|
|
|
154
|
-
|
|
356
|
+
The following example is a responsive sidenav that will trigger the `static` attribute on window resize.
|
|
155
357
|
|
|
156
358
|
<div class="exampleWrapper">
|
|
157
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src
|
|
158
|
-
<!-- The below content is automatically added from
|
|
159
|
-
<auro-sidenav
|
|
160
|
-
<span slot="
|
|
359
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/responsive.html) -->
|
|
360
|
+
<!-- The below content is automatically added from ./../apiExamples/responsive.html -->
|
|
361
|
+
<auro-sidenav id="collapsible-example">
|
|
362
|
+
<span slot="heading">Responsive Sidenav</span>
|
|
161
363
|
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
162
364
|
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
163
365
|
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
164
366
|
</auro-sidenav>
|
|
165
367
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
166
|
-
</div>
|
|
368
|
+
</div>
|
|
167
369
|
<auro-accordion alignRight>
|
|
168
370
|
<span slot="trigger">See code</span>
|
|
169
|
-
<!-- AURO-GENERATED-CONTENT:START (CODE:src
|
|
170
|
-
<!-- The below code snippet is automatically added from
|
|
371
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/responsive.html) -->
|
|
372
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/responsive.html -->
|
|
171
373
|
|
|
172
374
|
```html
|
|
173
|
-
<auro-sidenav
|
|
174
|
-
<span slot="
|
|
375
|
+
<auro-sidenav id="collapsible-example">
|
|
376
|
+
<span slot="heading">Responsive Sidenav</span>
|
|
175
377
|
<auro-sidenavitem href="/content/about-us/history">Historical overview</auro-sidenavitem>
|
|
176
378
|
<auro-sidenavitem href="/content/about-us/history/history-by-decade">History by decade</auro-sidenavitem>
|
|
177
379
|
<auro-sidenavitem href="/content/about-us/history/pioneers">Alaska Airlines pioneers</auro-sidenavitem>
|
|
@@ -180,12 +382,13 @@ The `ariaLabel` slot defines what to use as the aria-label of the sidenav.
|
|
|
180
382
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
181
383
|
</auro-accordion>
|
|
182
384
|
|
|
183
|
-
|
|
385
|
+
## Restyle Component with CSS Variables
|
|
184
386
|
|
|
185
|
-
The component may be restyled
|
|
387
|
+
The component may be restyled by changing the values of the following token(s).
|
|
186
388
|
|
|
187
|
-
<!--
|
|
188
|
-
<!--
|
|
389
|
+
<!-- Remove section if component does not have any component specific tokens -->
|
|
390
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../src/styles/tokens.scss) -->
|
|
391
|
+
<!-- The below code snippet is automatically added from ./../src/styles/tokens.scss -->
|
|
189
392
|
|
|
190
393
|
```scss
|
|
191
394
|
@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
|