@aurodesignsystem-dev/auro-drawer 0.0.0-pr100.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/CHANGELOG.md +362 -0
- package/LICENSE +201 -0
- package/NOTICE +2 -0
- package/README.md +281 -0
- package/demo/api.html +67 -0
- package/demo/api.js +37 -0
- package/demo/api.md +1224 -0
- package/demo/api.min.js +274 -0
- package/demo/auro-drawer.min.js +3321 -0
- package/demo/index.html +65 -0
- package/demo/index.js +23 -0
- package/demo/index.md +298 -0
- package/demo/index.min.js +36 -0
- package/dist/auro-drawer-BJigsnbI.js +132 -0
- package/dist/index.d.ts +139 -0
- package/dist/index.js +1 -0
- package/dist/registered.js +1 -0
- package/package.json +86 -0
package/demo/api.md
ADDED
|
@@ -0,0 +1,1224 @@
|
|
|
1
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/api.md) -->
|
|
2
|
+
<!-- The below content is automatically added from ./../docs/api.md -->
|
|
3
|
+
|
|
4
|
+
# auro-drawer
|
|
5
|
+
|
|
6
|
+
## Properties
|
|
7
|
+
|
|
8
|
+
| Property | Attribute | Type | Default | Description |
|
|
9
|
+
|------------------------|------------------------|-----------|---------|--------------------------------------------------|
|
|
10
|
+
| [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`lg`, `md`, `sm`, or `xs`) at which the drawer switches to fullscreen mode on mobile.<br />When expanded, the drawer will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint. |
|
|
11
|
+
| [isPopoverVisible](#isPopoverVisible) | `open` | `boolean` | "false" | Sets state of drawer to open. |
|
|
12
|
+
| [modal](#modal) | `modal` | `boolean` | "false" | Modal drawer restricts the user to take an action (no default close actions). |
|
|
13
|
+
| [nested](#nested) | `nested` | `boolean` | "false" | Sets the anchor placement for the bib. If true, bib will open based off its parent size and position. |
|
|
14
|
+
| [onDark](#onDark) | `onDark` | `boolean` | "false" | Sets close icon to white for dark backgrounds. |
|
|
15
|
+
| [placement](#placement) | `placement` | `string` | "right" | Sets the placement of drawer bib to `right`, `left`, `top`, `bottom`. |
|
|
16
|
+
| [size](#size) | `size` | `string` | "lg" | Sets the size of drawer bib to `sm`, `md`, `lg`. |
|
|
17
|
+
| [triggerElement](#triggerElement) | | | | The element to focus when the drawer is closed. |
|
|
18
|
+
| [unformatted](#unformatted) | `unformatted` | `boolean` | "false" | Unformatted drawer window, edge-to-edge fill for content. |
|
|
19
|
+
|
|
20
|
+
## Events
|
|
21
|
+
|
|
22
|
+
| Event | Description |
|
|
23
|
+
|----------------------|--------------------------------------------------|
|
|
24
|
+
| `auroDrawer-toggled` | Event fired when the drawer is toggled open or closed. |
|
|
25
|
+
|
|
26
|
+
## Slots
|
|
27
|
+
|
|
28
|
+
| Name | Description |
|
|
29
|
+
|-------------------------|--------------------------------------------------|
|
|
30
|
+
| | Default slot for the body content in drawer. |
|
|
31
|
+
| `ariaLabel.closeButton` | Text to describe the close button for screen readers. Default: "Close". |
|
|
32
|
+
| [close](#close) | Used to replace the close button. |
|
|
33
|
+
| [footer](#footer) | Used for action options, e.g. buttons. |
|
|
34
|
+
| [header](#header) | Text to display as the header of the modal. |
|
|
35
|
+
|
|
36
|
+
## CSS Shadow Parts
|
|
37
|
+
|
|
38
|
+
| Part | Description |
|
|
39
|
+
|-------------------|--------------------------------------------------|
|
|
40
|
+
| `close-button` | to style the close button. |
|
|
41
|
+
| `drawer-backdrop` | to style the backdrop behind the the content wrapper. |
|
|
42
|
+
| `drawer-content` | to style the container of the drawer content. |
|
|
43
|
+
| `drawer-footer` | to style the footer. |
|
|
44
|
+
| `drawer-header` | to style the header. |
|
|
45
|
+
| `drawer-wrapper` | to style the content wrapper. |
|
|
46
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
47
|
+
|
|
48
|
+
## API Examples
|
|
49
|
+
|
|
50
|
+
### Basic
|
|
51
|
+
|
|
52
|
+
<div class="exampleWrapper">
|
|
53
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
|
|
54
|
+
<!-- The below content is automatically added from ./../apiExamples/basic.html -->
|
|
55
|
+
<div>
|
|
56
|
+
<auro-button id="openBasic">Open default drawer</auro-button>
|
|
57
|
+
</div>
|
|
58
|
+
<auro-drawer id="defaultDrawer">
|
|
59
|
+
<span slot="header">Default Drawer</span>
|
|
60
|
+
<div slot="content">
|
|
61
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
62
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
63
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
64
|
+
<ul>
|
|
65
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
66
|
+
<auro-radio-group>
|
|
67
|
+
<span slot="legend">Accordion Test</span>
|
|
68
|
+
<auro-radio
|
|
69
|
+
id="basicGroupRadio1"
|
|
70
|
+
label="Credit or debit card"
|
|
71
|
+
name="creditordebit"
|
|
72
|
+
value="credit"
|
|
73
|
+
></auro-radio>
|
|
74
|
+
<auro-radio
|
|
75
|
+
id="basicGroupRadio2"
|
|
76
|
+
label="Apple Pay"
|
|
77
|
+
name="applePay"
|
|
78
|
+
value="applePay"
|
|
79
|
+
></auro-radio>
|
|
80
|
+
<auro-radio
|
|
81
|
+
id="basicGroupRadio3"
|
|
82
|
+
label="Alaska Airlines Commercial Account"
|
|
83
|
+
name="alaskaCommercial"
|
|
84
|
+
value="alaskaCommercial"
|
|
85
|
+
></auro-radio>
|
|
86
|
+
</auro-radio-group>
|
|
87
|
+
<auro-input placeholder="John Doe" bordered required>
|
|
88
|
+
<span slot="label">Full name</span>
|
|
89
|
+
<span slot="helptext">Please enter your full name.</span>
|
|
90
|
+
</auro-input>
|
|
91
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
92
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
93
|
+
<auro-checkbox-group>
|
|
94
|
+
<span slot="legend">Form label goes here</span>
|
|
95
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1"
|
|
96
|
+
>Checkbox option</auro-checkbox
|
|
97
|
+
>
|
|
98
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
|
|
99
|
+
>Checkbox option</auro-checkbox
|
|
100
|
+
>
|
|
101
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3"
|
|
102
|
+
>Checkbox option</auro-checkbox
|
|
103
|
+
>
|
|
104
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4"
|
|
105
|
+
>Checkbox option</auro-checkbox
|
|
106
|
+
>
|
|
107
|
+
</auro-checkbox-group>
|
|
108
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
109
|
+
</ul>
|
|
110
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
111
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
112
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
113
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
114
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
115
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
116
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
117
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
118
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
119
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
120
|
+
</div>
|
|
121
|
+
<div slot="footer">
|
|
122
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
123
|
+
</div>
|
|
124
|
+
</auro-drawer>
|
|
125
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
126
|
+
</div>
|
|
127
|
+
<auro-accordion alignRight>
|
|
128
|
+
<span slot="trigger">See code</span>
|
|
129
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
130
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
131
|
+
|
|
132
|
+
```html
|
|
133
|
+
<div>
|
|
134
|
+
<auro-button id="openBasic">Open default drawer</auro-button>
|
|
135
|
+
</div>
|
|
136
|
+
<auro-drawer id="defaultDrawer">
|
|
137
|
+
<span slot="header">Default Drawer</span>
|
|
138
|
+
<div slot="content">
|
|
139
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
140
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
141
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
142
|
+
<ul>
|
|
143
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
144
|
+
<auro-radio-group>
|
|
145
|
+
<span slot="legend">Accordion Test</span>
|
|
146
|
+
<auro-radio
|
|
147
|
+
id="basicGroupRadio1"
|
|
148
|
+
label="Credit or debit card"
|
|
149
|
+
name="creditordebit"
|
|
150
|
+
value="credit"
|
|
151
|
+
></auro-radio>
|
|
152
|
+
<auro-radio
|
|
153
|
+
id="basicGroupRadio2"
|
|
154
|
+
label="Apple Pay"
|
|
155
|
+
name="applePay"
|
|
156
|
+
value="applePay"
|
|
157
|
+
></auro-radio>
|
|
158
|
+
<auro-radio
|
|
159
|
+
id="basicGroupRadio3"
|
|
160
|
+
label="Alaska Airlines Commercial Account"
|
|
161
|
+
name="alaskaCommercial"
|
|
162
|
+
value="alaskaCommercial"
|
|
163
|
+
></auro-radio>
|
|
164
|
+
</auro-radio-group>
|
|
165
|
+
<auro-input placeholder="John Doe" bordered required>
|
|
166
|
+
<span slot="label">Full name</span>
|
|
167
|
+
<span slot="helptext">Please enter your full name.</span>
|
|
168
|
+
</auro-input>
|
|
169
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
170
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
171
|
+
<auro-checkbox-group>
|
|
172
|
+
<span slot="legend">Form label goes here</span>
|
|
173
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1"
|
|
174
|
+
>Checkbox option</auro-checkbox
|
|
175
|
+
>
|
|
176
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
|
|
177
|
+
>Checkbox option</auro-checkbox
|
|
178
|
+
>
|
|
179
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3"
|
|
180
|
+
>Checkbox option</auro-checkbox
|
|
181
|
+
>
|
|
182
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4"
|
|
183
|
+
>Checkbox option</auro-checkbox
|
|
184
|
+
>
|
|
185
|
+
</auro-checkbox-group>
|
|
186
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
187
|
+
</ul>
|
|
188
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
189
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
190
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
191
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
192
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
193
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
194
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
195
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
196
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
197
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
198
|
+
</div>
|
|
199
|
+
<div slot="footer">
|
|
200
|
+
<auro-button secondary id="closeBasic">Close</auro-button>
|
|
201
|
+
</div>
|
|
202
|
+
</auro-drawer>
|
|
203
|
+
```
|
|
204
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
205
|
+
</auro-accordion>
|
|
206
|
+
|
|
207
|
+
### <a name="fullscreenBreakpoint">`fullscreenBreakpoint`</a>
|
|
208
|
+
On mobile view, adding the fullscreenBreakpoint="{breakpoint-token}" will switch the drawer to fullscreen mode.
|
|
209
|
+
The default breakpoint is "sm".
|
|
210
|
+
|
|
211
|
+
<div class="exampleWrapper">
|
|
212
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreenBreakpoint.html) -->
|
|
213
|
+
<!-- The below content is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
|
|
214
|
+
<div>
|
|
215
|
+
<auro-button id="openSmLg">Open drawer</auro-button>
|
|
216
|
+
</div>
|
|
217
|
+
<auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
|
|
218
|
+
<span slot="header">Small Drawer</span>
|
|
219
|
+
<div slot="content">
|
|
220
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
221
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
222
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
223
|
+
<ul>
|
|
224
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
225
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
226
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
227
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
228
|
+
</ul>
|
|
229
|
+
</div>
|
|
230
|
+
<div slot="footer">
|
|
231
|
+
<auro-button id="closeSmLg">
|
|
232
|
+
I understand
|
|
233
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
234
|
+
</auro-button>
|
|
235
|
+
</div>
|
|
236
|
+
</auro-drawer>
|
|
237
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
238
|
+
</div>
|
|
239
|
+
<auro-accordion alignRight>
|
|
240
|
+
<span slot="trigger">See code</span>
|
|
241
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/fullscreenBreakpoint.html) -->
|
|
242
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/fullscreenBreakpoint.html -->
|
|
243
|
+
|
|
244
|
+
```html
|
|
245
|
+
<div>
|
|
246
|
+
<auro-button id="openSmLg">Open drawer</auro-button>
|
|
247
|
+
</div>
|
|
248
|
+
<auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
|
|
249
|
+
<span slot="header">Small Drawer</span>
|
|
250
|
+
<div slot="content">
|
|
251
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
252
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
253
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
254
|
+
<ul>
|
|
255
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
256
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
257
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
258
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
259
|
+
</ul>
|
|
260
|
+
</div>
|
|
261
|
+
<div slot="footer">
|
|
262
|
+
<auro-button id="closeSmLg">
|
|
263
|
+
I understand
|
|
264
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
265
|
+
</auro-button>
|
|
266
|
+
</div>
|
|
267
|
+
</auro-drawer>
|
|
268
|
+
```
|
|
269
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
270
|
+
</auro-accordion>
|
|
271
|
+
|
|
272
|
+
### <a name="modal">`modal`</a>
|
|
273
|
+
The auro-drawer supports a modal drawer state that will lock a user into interacting with the `modal` drawer. To activate, use the modal attribute.
|
|
274
|
+
|
|
275
|
+
When using this state, the modal drawer must include a button action to dismiss the modal drawer as the closing icon will not be available and the user will not be able to click outside the modal drawer to dismiss.
|
|
276
|
+
|
|
277
|
+
<div class="exampleWrapper">
|
|
278
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/modal.html) -->
|
|
279
|
+
<!-- The below content is automatically added from ./../apiExamples/modal.html -->
|
|
280
|
+
<div>
|
|
281
|
+
<auro-button id="openDefaultModal">Open default modal</auro-button>
|
|
282
|
+
<auro-button id="openMediumModal">Open medium modal</auro-button>
|
|
283
|
+
<auro-button id="openSmallModal">Open small modal</auro-button>
|
|
284
|
+
</div>
|
|
285
|
+
<auro-drawer id="defaultModalDrawer" modal>
|
|
286
|
+
<span slot="header">Default Modal Drawer</span>
|
|
287
|
+
<div slot="content">
|
|
288
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
289
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
290
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
291
|
+
<ul>
|
|
292
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
293
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
294
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
295
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
296
|
+
</ul>
|
|
297
|
+
</div>
|
|
298
|
+
<div slot="footer">
|
|
299
|
+
<auro-button id="closeDefaultModal">I understand
|
|
300
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
301
|
+
</auro-button>
|
|
302
|
+
</div>
|
|
303
|
+
</auro-drawer>
|
|
304
|
+
<auro-drawer id="mediumModalDrawer" size="md" modal>
|
|
305
|
+
<span slot="header">Medium Drawer</span>
|
|
306
|
+
<div slot="content">
|
|
307
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
308
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
309
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
310
|
+
<ul>
|
|
311
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
312
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
313
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
314
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
315
|
+
</ul>
|
|
316
|
+
</div>
|
|
317
|
+
<div slot="footer">
|
|
318
|
+
<auro-button id="closeMediumModal">I understand
|
|
319
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
320
|
+
</auro-button>
|
|
321
|
+
</div>
|
|
322
|
+
</auro-drawer>
|
|
323
|
+
<auro-drawer id="smallModalDrawer" size="sm" modal>
|
|
324
|
+
<span slot="header">Small Drawer</span>
|
|
325
|
+
<div slot="content">
|
|
326
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
327
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
328
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
329
|
+
<ul>
|
|
330
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
331
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
332
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
333
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
334
|
+
</ul>
|
|
335
|
+
</div>
|
|
336
|
+
<div slot="footer">
|
|
337
|
+
<auro-button id="closeSmallModal">I understand
|
|
338
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
339
|
+
</auro-button>
|
|
340
|
+
</div>
|
|
341
|
+
</auro-drawer>
|
|
342
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
343
|
+
</div>
|
|
344
|
+
<auro-accordion alignRight>
|
|
345
|
+
<span slot="trigger">See code</span>
|
|
346
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/modal.html) -->
|
|
347
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/modal.html -->
|
|
348
|
+
|
|
349
|
+
```html
|
|
350
|
+
<div>
|
|
351
|
+
<auro-button id="openDefaultModal">Open default modal</auro-button>
|
|
352
|
+
<auro-button id="openMediumModal">Open medium modal</auro-button>
|
|
353
|
+
<auro-button id="openSmallModal">Open small modal</auro-button>
|
|
354
|
+
</div>
|
|
355
|
+
<auro-drawer id="defaultModalDrawer" modal>
|
|
356
|
+
<span slot="header">Default Modal Drawer</span>
|
|
357
|
+
<div slot="content">
|
|
358
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
359
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
360
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
361
|
+
<ul>
|
|
362
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
363
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
364
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
365
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
366
|
+
</ul>
|
|
367
|
+
</div>
|
|
368
|
+
<div slot="footer">
|
|
369
|
+
<auro-button id="closeDefaultModal">I understand
|
|
370
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
371
|
+
</auro-button>
|
|
372
|
+
</div>
|
|
373
|
+
</auro-drawer>
|
|
374
|
+
<auro-drawer id="mediumModalDrawer" size="md" modal>
|
|
375
|
+
<span slot="header">Medium Drawer</span>
|
|
376
|
+
<div slot="content">
|
|
377
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
378
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
379
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
380
|
+
<ul>
|
|
381
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
382
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
383
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
384
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
385
|
+
</ul>
|
|
386
|
+
</div>
|
|
387
|
+
<div slot="footer">
|
|
388
|
+
<auro-button id="closeMediumModal">I understand
|
|
389
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
390
|
+
</auro-button>
|
|
391
|
+
</div>
|
|
392
|
+
</auro-drawer>
|
|
393
|
+
<auro-drawer id="smallModalDrawer" size="sm" modal>
|
|
394
|
+
<span slot="header">Small Drawer</span>
|
|
395
|
+
<div slot="content">
|
|
396
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
397
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
398
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
399
|
+
<ul>
|
|
400
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
401
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
402
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
403
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
404
|
+
</ul>
|
|
405
|
+
</div>
|
|
406
|
+
<div slot="footer">
|
|
407
|
+
<auro-button id="closeSmallModal">I understand
|
|
408
|
+
<auro-icon category="interface" name="chevron-right" emphasis onDark></auro-icon>
|
|
409
|
+
</auro-button>
|
|
410
|
+
</div>
|
|
411
|
+
</auro-drawer>
|
|
412
|
+
```
|
|
413
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
414
|
+
</auro-accordion>
|
|
415
|
+
|
|
416
|
+
### <a name="nested">`nested`</a>
|
|
417
|
+
In case the drawer should sit inside of a container, not to the body, set `nested` attribute.
|
|
418
|
+
|
|
419
|
+
<div class="exampleWrapper">
|
|
420
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/nested.html) -->
|
|
421
|
+
<!-- The below content is automatically added from ./../apiExamples/nested.html -->
|
|
422
|
+
<div>
|
|
423
|
+
<auro-button id="openNested">Open nested drawer</auro-button>
|
|
424
|
+
</div>
|
|
425
|
+
<div style="height: 400px">
|
|
426
|
+
<auro-drawer id="nestedDrawer" nested>
|
|
427
|
+
<span slot="header">Default Drawer</span>
|
|
428
|
+
<div slot="content">
|
|
429
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
430
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
431
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
432
|
+
<ul>
|
|
433
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
434
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
435
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
436
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
437
|
+
</ul>
|
|
438
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
439
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
440
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
441
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
442
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
443
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
444
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
445
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
446
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
447
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
448
|
+
</div>
|
|
449
|
+
<div slot="footer">
|
|
450
|
+
<auro-button secondary id="closeNested">Close</auro-button>
|
|
451
|
+
</div>
|
|
452
|
+
</auro-drawer>
|
|
453
|
+
</div>
|
|
454
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
455
|
+
</div>
|
|
456
|
+
<auro-accordion alignRight>
|
|
457
|
+
<span slot="trigger">See code</span>
|
|
458
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/nested.html) -->
|
|
459
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/nested.html -->
|
|
460
|
+
|
|
461
|
+
```html
|
|
462
|
+
<div>
|
|
463
|
+
<auro-button id="openNested">Open nested drawer</auro-button>
|
|
464
|
+
</div>
|
|
465
|
+
<div style="height: 400px">
|
|
466
|
+
<auro-drawer id="nestedDrawer" nested>
|
|
467
|
+
<span slot="header">Default Drawer</span>
|
|
468
|
+
<div slot="content">
|
|
469
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
470
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
471
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
472
|
+
<ul>
|
|
473
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
474
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
475
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
476
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
477
|
+
</ul>
|
|
478
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
479
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
480
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
481
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
482
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
483
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
484
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
485
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
486
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
487
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
488
|
+
</div>
|
|
489
|
+
<div slot="footer">
|
|
490
|
+
<auro-button secondary id="closeNested">Close</auro-button>
|
|
491
|
+
</div>
|
|
492
|
+
</auro-drawer>
|
|
493
|
+
</div>
|
|
494
|
+
```
|
|
495
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
496
|
+
</auro-accordion>
|
|
497
|
+
|
|
498
|
+
### <a name="placement">`placement`</a>
|
|
499
|
+
You can set the position where the drawer should sit
|
|
500
|
+
|
|
501
|
+
<div class="exampleWrapper">
|
|
502
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/placement.html) -->
|
|
503
|
+
<!-- The below content is automatically added from ./../apiExamples/placement.html -->
|
|
504
|
+
<div>
|
|
505
|
+
<auro-button id="openDefaultSlide">Open default drawer</auro-button>
|
|
506
|
+
<auro-button id="openLeftSlide">Open left drawer</auro-button>
|
|
507
|
+
<auro-button id="openTopSlide">Open top drawer</auro-button>
|
|
508
|
+
<auro-button id="openBottomSlide">Open Bottom drawer</auro-button>
|
|
509
|
+
</div>
|
|
510
|
+
<auro-drawer id="defaultSlideDrawer">
|
|
511
|
+
<span slot="header">Default Drawer</span>
|
|
512
|
+
<div slot="content">
|
|
513
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
514
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
515
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
516
|
+
<ul>
|
|
517
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
518
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
519
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
520
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
521
|
+
</ul>
|
|
522
|
+
</div>
|
|
523
|
+
<div slot="footer">
|
|
524
|
+
<auro-button secondary id="closeDefaultSlide">Close</auro-button>
|
|
525
|
+
</div>
|
|
526
|
+
</auro-drawer>
|
|
527
|
+
<auro-drawer id="leftSlideDrawer" placement="left">
|
|
528
|
+
<span slot="header">Left Drawer</span>
|
|
529
|
+
<div slot="content">
|
|
530
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
531
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
532
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
533
|
+
<ul>
|
|
534
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
535
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
536
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
537
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
538
|
+
</ul>
|
|
539
|
+
</div>
|
|
540
|
+
<div slot="footer">
|
|
541
|
+
<auro-button secondary id="closeLeftSlide">Close</auro-button>
|
|
542
|
+
</div>
|
|
543
|
+
</auro-drawer>
|
|
544
|
+
<auro-drawer id="topSlideDrawer" placement="top" size="sm">
|
|
545
|
+
<span slot="header">Top Drawer</span>
|
|
546
|
+
<div slot="content">
|
|
547
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
548
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
549
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
550
|
+
<ul>
|
|
551
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
552
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
553
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
554
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
555
|
+
</ul>
|
|
556
|
+
</div>
|
|
557
|
+
<div slot="footer">
|
|
558
|
+
<auro-button secondary id="closeTopSlide">Close</auro-button>
|
|
559
|
+
</div>
|
|
560
|
+
</auro-drawer>
|
|
561
|
+
<auro-drawer id="bottomSlideDrawer" placement="bottom" size="md">
|
|
562
|
+
<span slot="header">Bottom Drawer</span>
|
|
563
|
+
<div slot="content">
|
|
564
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
565
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
566
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
567
|
+
<ul>
|
|
568
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
569
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
570
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
571
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
572
|
+
</ul>
|
|
573
|
+
</div>
|
|
574
|
+
<div slot="footer">
|
|
575
|
+
<auro-button secondary id="closeBottomSlide">Close</auro-button>
|
|
576
|
+
</div>
|
|
577
|
+
</auro-drawer>
|
|
578
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
579
|
+
</div>
|
|
580
|
+
<auro-accordion alignRight>
|
|
581
|
+
<span slot="trigger">See code</span>
|
|
582
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/placement.html) -->
|
|
583
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/placement.html -->
|
|
584
|
+
|
|
585
|
+
```html
|
|
586
|
+
<div>
|
|
587
|
+
<auro-button id="openDefaultSlide">Open default drawer</auro-button>
|
|
588
|
+
<auro-button id="openLeftSlide">Open left drawer</auro-button>
|
|
589
|
+
<auro-button id="openTopSlide">Open top drawer</auro-button>
|
|
590
|
+
<auro-button id="openBottomSlide">Open Bottom drawer</auro-button>
|
|
591
|
+
</div>
|
|
592
|
+
<auro-drawer id="defaultSlideDrawer">
|
|
593
|
+
<span slot="header">Default Drawer</span>
|
|
594
|
+
<div slot="content">
|
|
595
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
596
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
597
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
598
|
+
<ul>
|
|
599
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
600
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
601
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
602
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
603
|
+
</ul>
|
|
604
|
+
</div>
|
|
605
|
+
<div slot="footer">
|
|
606
|
+
<auro-button secondary id="closeDefaultSlide">Close</auro-button>
|
|
607
|
+
</div>
|
|
608
|
+
</auro-drawer>
|
|
609
|
+
<auro-drawer id="leftSlideDrawer" placement="left">
|
|
610
|
+
<span slot="header">Left Drawer</span>
|
|
611
|
+
<div slot="content">
|
|
612
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
613
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
614
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
615
|
+
<ul>
|
|
616
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
617
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
618
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
619
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
620
|
+
</ul>
|
|
621
|
+
</div>
|
|
622
|
+
<div slot="footer">
|
|
623
|
+
<auro-button secondary id="closeLeftSlide">Close</auro-button>
|
|
624
|
+
</div>
|
|
625
|
+
</auro-drawer>
|
|
626
|
+
<auro-drawer id="topSlideDrawer" placement="top" size="sm">
|
|
627
|
+
<span slot="header">Top Drawer</span>
|
|
628
|
+
<div slot="content">
|
|
629
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
630
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
631
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
632
|
+
<ul>
|
|
633
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
634
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
635
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
636
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
637
|
+
</ul>
|
|
638
|
+
</div>
|
|
639
|
+
<div slot="footer">
|
|
640
|
+
<auro-button secondary id="closeTopSlide">Close</auro-button>
|
|
641
|
+
</div>
|
|
642
|
+
</auro-drawer>
|
|
643
|
+
<auro-drawer id="bottomSlideDrawer" placement="bottom" size="md">
|
|
644
|
+
<span slot="header">Bottom Drawer</span>
|
|
645
|
+
<div slot="content">
|
|
646
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
647
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
648
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
649
|
+
<ul>
|
|
650
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
651
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
652
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
653
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
654
|
+
</ul>
|
|
655
|
+
</div>
|
|
656
|
+
<div slot="footer">
|
|
657
|
+
<auro-button secondary id="closeBottomSlide">Close</auro-button>
|
|
658
|
+
</div>
|
|
659
|
+
</auro-drawer>
|
|
660
|
+
```
|
|
661
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
662
|
+
</auro-accordion>
|
|
663
|
+
|
|
664
|
+
### <a name="size">`size`</a>
|
|
665
|
+
The auro-drawer supports three different sizes. A default drawer is equal to the large size drawer.
|
|
666
|
+
|
|
667
|
+
The size attribute controls the width of left and right drawers, which always have a height of 100%.
|
|
668
|
+
For top and bottom drawers, size controls the height, and the width is always 100%.
|
|
669
|
+
|
|
670
|
+
For mobile or small screen, read <a href="#fullscreenBreakpoint">`fullscreenBreakpoint`</a>
|
|
671
|
+
<div class="exampleWrapper">
|
|
672
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/sizeOptions.html) -->
|
|
673
|
+
<!-- The below content is automatically added from ./../apiExamples/sizeOptions.html -->
|
|
674
|
+
<div>
|
|
675
|
+
<auro-button id="openDefaultSize">Open default drawer</auro-button>
|
|
676
|
+
<auro-button id="openMediumSize">Open medium drawer</auro-button>
|
|
677
|
+
<auro-button id="openSmallSize">Open small drawer</auro-button>
|
|
678
|
+
</div>
|
|
679
|
+
<auro-drawer id="defaultSizeDrawer">
|
|
680
|
+
<span slot="header">Default Drawer</span>
|
|
681
|
+
<div slot="content">
|
|
682
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
683
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
684
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
685
|
+
<ul>
|
|
686
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
687
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
688
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
689
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
690
|
+
</ul>
|
|
691
|
+
</div>
|
|
692
|
+
<div slot="footer">
|
|
693
|
+
<auro-button secondary id="closeDefaultSize">Close</auro-button>
|
|
694
|
+
</div>
|
|
695
|
+
</auro-drawer>
|
|
696
|
+
<auro-drawer id="mediumSizeDrawer" size="md">
|
|
697
|
+
<span slot="header">Medium Drawer</span>
|
|
698
|
+
<div slot="content">
|
|
699
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
700
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
701
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
702
|
+
<ul>
|
|
703
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
704
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
705
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
706
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
707
|
+
</ul>
|
|
708
|
+
</div>
|
|
709
|
+
<div slot="footer">
|
|
710
|
+
<auro-button secondary id="closeMediumSize">Close</auro-button>
|
|
711
|
+
</div>
|
|
712
|
+
</auro-drawer>
|
|
713
|
+
<auro-drawer id="smallSizeDrawer" size="sm">
|
|
714
|
+
<span slot="header">Small Drawer</span>
|
|
715
|
+
<div slot="content">
|
|
716
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
717
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
718
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
719
|
+
<ul>
|
|
720
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
721
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
722
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
723
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
724
|
+
</ul>
|
|
725
|
+
</div>
|
|
726
|
+
<div slot="footer">
|
|
727
|
+
<auro-button secondary id="closeSmallSize">Close</auro-button>
|
|
728
|
+
</div>
|
|
729
|
+
</auro-drawer>
|
|
730
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
731
|
+
</div>
|
|
732
|
+
<auro-accordion alignRight>
|
|
733
|
+
<span slot="trigger">See code</span>
|
|
734
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/sizeOptions.html) -->
|
|
735
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/sizeOptions.html -->
|
|
736
|
+
|
|
737
|
+
```html
|
|
738
|
+
<div>
|
|
739
|
+
<auro-button id="openDefaultSize">Open default drawer</auro-button>
|
|
740
|
+
<auro-button id="openMediumSize">Open medium drawer</auro-button>
|
|
741
|
+
<auro-button id="openSmallSize">Open small drawer</auro-button>
|
|
742
|
+
</div>
|
|
743
|
+
<auro-drawer id="defaultSizeDrawer">
|
|
744
|
+
<span slot="header">Default Drawer</span>
|
|
745
|
+
<div slot="content">
|
|
746
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
747
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
748
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
749
|
+
<ul>
|
|
750
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
751
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
752
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
753
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
754
|
+
</ul>
|
|
755
|
+
</div>
|
|
756
|
+
<div slot="footer">
|
|
757
|
+
<auro-button secondary id="closeDefaultSize">Close</auro-button>
|
|
758
|
+
</div>
|
|
759
|
+
</auro-drawer>
|
|
760
|
+
<auro-drawer id="mediumSizeDrawer" size="md">
|
|
761
|
+
<span slot="header">Medium Drawer</span>
|
|
762
|
+
<div slot="content">
|
|
763
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
764
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
765
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
766
|
+
<ul>
|
|
767
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
768
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
769
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
770
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
771
|
+
</ul>
|
|
772
|
+
</div>
|
|
773
|
+
<div slot="footer">
|
|
774
|
+
<auro-button secondary id="closeMediumSize">Close</auro-button>
|
|
775
|
+
</div>
|
|
776
|
+
</auro-drawer>
|
|
777
|
+
<auro-drawer id="smallSizeDrawer" size="sm">
|
|
778
|
+
<span slot="header">Small Drawer</span>
|
|
779
|
+
<div slot="content">
|
|
780
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
781
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
782
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
783
|
+
<ul>
|
|
784
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
785
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
786
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
787
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
788
|
+
</ul>
|
|
789
|
+
</div>
|
|
790
|
+
<div slot="footer">
|
|
791
|
+
<auro-button secondary id="closeSmallSize">Close</auro-button>
|
|
792
|
+
</div>
|
|
793
|
+
</auro-drawer>
|
|
794
|
+
```
|
|
795
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
796
|
+
</auro-accordion>
|
|
797
|
+
|
|
798
|
+
### Drawer with Dropdown Components
|
|
799
|
+
|
|
800
|
+
This is a use case where there is a popover and combobox component inside the drawer component, creating a stack of layered components.
|
|
801
|
+
|
|
802
|
+
<div class="exampleWrapper">
|
|
803
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/popoverAndDropdown.html) -->
|
|
804
|
+
<!-- The below content is automatically added from ./../apiExamples/popoverAndDropdown.html -->
|
|
805
|
+
<div>
|
|
806
|
+
<auro-button id="openPopAndDrop">Open drawer with popover</auro-button>
|
|
807
|
+
</div>
|
|
808
|
+
<auro-drawer id="popover-drawer" sm lg>
|
|
809
|
+
<span slot="header">Small Modal Drawer</span>
|
|
810
|
+
<div slot="content">
|
|
811
|
+
<p>
|
|
812
|
+
When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
|
|
813
|
+
</p>
|
|
814
|
+
<p>
|
|
815
|
+
Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
|
|
816
|
+
</p>
|
|
817
|
+
<auro-header level="3" display="500">
|
|
818
|
+
Before checking your bags, remember to:
|
|
819
|
+
</auro-header>
|
|
820
|
+
<auro-popover>
|
|
821
|
+
<div class="content">
|
|
822
|
+
<ul>
|
|
823
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
824
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
825
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
826
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
827
|
+
</ul>
|
|
828
|
+
</div>
|
|
829
|
+
<auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
|
|
830
|
+
</auro-popover>
|
|
831
|
+
<auro-combobox>
|
|
832
|
+
<span slot="label">Name</span>
|
|
833
|
+
<auro-menu>
|
|
834
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
835
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
836
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
837
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
838
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
839
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
840
|
+
</auro-menu>
|
|
841
|
+
</auro-combobox>
|
|
842
|
+
</div>
|
|
843
|
+
<div slot="footer">
|
|
844
|
+
<auro-button id="closePopAndDrop">
|
|
845
|
+
I understand
|
|
846
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
847
|
+
</auro-button>
|
|
848
|
+
</div>
|
|
849
|
+
</auro-drawer>
|
|
850
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
851
|
+
</div>
|
|
852
|
+
<auro-accordion alignRight>
|
|
853
|
+
<span slot="trigger">See code</span>
|
|
854
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/popoverAndDropdown.html) -->
|
|
855
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/popoverAndDropdown.html -->
|
|
856
|
+
|
|
857
|
+
```html
|
|
858
|
+
<div>
|
|
859
|
+
<auro-button id="openPopAndDrop">Open drawer with popover</auro-button>
|
|
860
|
+
</div>
|
|
861
|
+
<auro-drawer id="popover-drawer" sm lg>
|
|
862
|
+
<span slot="header">Small Modal Drawer</span>
|
|
863
|
+
<div slot="content">
|
|
864
|
+
<p>
|
|
865
|
+
When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
|
|
866
|
+
</p>
|
|
867
|
+
<p>
|
|
868
|
+
Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
|
|
869
|
+
</p>
|
|
870
|
+
<auro-header level="3" display="500">
|
|
871
|
+
Before checking your bags, remember to:
|
|
872
|
+
</auro-header>
|
|
873
|
+
<auro-popover>
|
|
874
|
+
<div class="content">
|
|
875
|
+
<ul>
|
|
876
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
877
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
878
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
879
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
880
|
+
</ul>
|
|
881
|
+
</div>
|
|
882
|
+
<auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
|
|
883
|
+
</auro-popover>
|
|
884
|
+
<auro-combobox>
|
|
885
|
+
<span slot="label">Name</span>
|
|
886
|
+
<auro-menu>
|
|
887
|
+
<auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
|
|
888
|
+
<auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
|
|
889
|
+
<auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
|
|
890
|
+
<auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
|
|
891
|
+
<auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
|
|
892
|
+
<auro-menuoption static nomatch>No matching option</auro-menuoption>
|
|
893
|
+
</auro-menu>
|
|
894
|
+
</auro-combobox>
|
|
895
|
+
</div>
|
|
896
|
+
<div slot="footer">
|
|
897
|
+
<auro-button id="closePopAndDrop">
|
|
898
|
+
I understand
|
|
899
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
900
|
+
</auro-button>
|
|
901
|
+
</div>
|
|
902
|
+
</auro-drawer>
|
|
903
|
+
```
|
|
904
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
905
|
+
</auro-accordion>
|
|
906
|
+
|
|
907
|
+
### Aria Label Slot
|
|
908
|
+
|
|
909
|
+
To customize the aria-label text for the close button, use the `ariaLabel.closeButton` slot to provide custom text. If no text is provided, the default text `"Close"` will be used.
|
|
910
|
+
|
|
911
|
+
<div class="exampleWrapper">
|
|
912
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ariaLabelSlot.html) -->
|
|
913
|
+
<!-- The below content is automatically added from ./../apiExamples/ariaLabelSlot.html -->
|
|
914
|
+
<div>
|
|
915
|
+
<auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
|
|
916
|
+
</div>
|
|
917
|
+
<auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
|
|
918
|
+
<span slot="ariaLabel.closeButton">This is the new aria-label for the close button</span>
|
|
919
|
+
<span slot="header">Small Drawer</span>
|
|
920
|
+
<div slot="content">
|
|
921
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
922
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
923
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
924
|
+
<ul>
|
|
925
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
926
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
927
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
928
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
929
|
+
</ul>
|
|
930
|
+
</div>
|
|
931
|
+
<div slot="footer">
|
|
932
|
+
<auro-button id="closeAriaLabelSlotDrawer">
|
|
933
|
+
I understand
|
|
934
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
935
|
+
</auro-button>
|
|
936
|
+
</div>
|
|
937
|
+
</auro-drawer>
|
|
938
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
939
|
+
</div>
|
|
940
|
+
<auro-accordion alignRight>
|
|
941
|
+
<span slot="trigger">See code</span>
|
|
942
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/ariaLabelSlot.html) -->
|
|
943
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/ariaLabelSlot.html -->
|
|
944
|
+
|
|
945
|
+
```html
|
|
946
|
+
<div>
|
|
947
|
+
<auro-button id="openAriaLabelSlotDrawer">Open drawer</auro-button>
|
|
948
|
+
</div>
|
|
949
|
+
<auro-drawer id="ariaLabelSlotDrawer" size="sm" fullscreenBreakpoint="lg">
|
|
950
|
+
<span slot="ariaLabel.closeButton">This is the new aria-label for the close button</span>
|
|
951
|
+
<span slot="header">Small Drawer</span>
|
|
952
|
+
<div slot="content">
|
|
953
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
954
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
955
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
956
|
+
<ul>
|
|
957
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
958
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
959
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
960
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
961
|
+
</ul>
|
|
962
|
+
</div>
|
|
963
|
+
<div slot="footer">
|
|
964
|
+
<auro-button id="closeAriaLabelSlotDrawer">
|
|
965
|
+
I understand
|
|
966
|
+
<auro-icon category="interface" name="check-lg" emphasis onDark></auro-icon>
|
|
967
|
+
</auro-button>
|
|
968
|
+
</div>
|
|
969
|
+
</auro-drawer>
|
|
970
|
+
```
|
|
971
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
972
|
+
</auro-accordion>
|
|
973
|
+
|
|
974
|
+
### <a name="unformatted">`unformatted`</a>
|
|
975
|
+
For use case where the use of a drawer is to be more freeform, but the experience and base tooling for the drawer are still requested, there is the `unformatted` property.
|
|
976
|
+
|
|
977
|
+
This property can be used in combination of any other use case of the drawer, but it will render a unformatted drawer window allowing for full customization of content within the scope of the window.
|
|
978
|
+
|
|
979
|
+
#### Accessibility
|
|
980
|
+
|
|
981
|
+
Within the scope of the auro-drawer there is `aria-labelledby="drawer-header"`. To make proper use of this, in an unformatted drawer, the developer is required to add `id="drawer-header"` to the content header within the drawer content.
|
|
982
|
+
|
|
983
|
+
<div class="exampleWrapper">
|
|
984
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/accessibility.html) -->
|
|
985
|
+
<!-- The below content is automatically added from ./../apiExamples/accessibility.html -->
|
|
986
|
+
<div>
|
|
987
|
+
<auro-button id="openAccessibility">Unformatted Medium Drawer</auro-button>
|
|
988
|
+
</div>
|
|
989
|
+
<auro-drawer id="unformattedMdDrawer" unformatted md lg ondark>
|
|
990
|
+
<span slot="content">
|
|
991
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
992
|
+
<div class="unformattedWrapper">
|
|
993
|
+
<h1 id="drawer-header">This is a header</h1>
|
|
994
|
+
These are words that are slotted into the scope of the custom element.
|
|
995
|
+
</div>
|
|
996
|
+
</span>
|
|
997
|
+
</auro-drawer>
|
|
998
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
999
|
+
</div>
|
|
1000
|
+
<auro-accordion alignRight>
|
|
1001
|
+
<span slot="trigger">See code</span>
|
|
1002
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/accessibility.html) -->
|
|
1003
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/accessibility.html -->
|
|
1004
|
+
|
|
1005
|
+
```html
|
|
1006
|
+
<div>
|
|
1007
|
+
<auro-button id="openAccessibility">Unformatted Medium Drawer</auro-button>
|
|
1008
|
+
</div>
|
|
1009
|
+
<auro-drawer id="unformattedMdDrawer" unformatted md lg ondark>
|
|
1010
|
+
<span slot="content">
|
|
1011
|
+
<img style="display: block; width: 100%" src="https://blog.alaskaair.com/wp-content/uploads/2020/11/111-psp-blog-img-guide.jpg" alt="alaska airlines pride lights" />
|
|
1012
|
+
<div class="unformattedWrapper">
|
|
1013
|
+
<h1 id="drawer-header">This is a header</h1>
|
|
1014
|
+
These are words that are slotted into the scope of the custom element.
|
|
1015
|
+
</div>
|
|
1016
|
+
</span>
|
|
1017
|
+
</auro-drawer>
|
|
1018
|
+
```
|
|
1019
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1020
|
+
</auro-accordion>
|
|
1021
|
+
|
|
1022
|
+
### Customizing Styles
|
|
1023
|
+
|
|
1024
|
+
The drawer's size and some styles can be styled using CSS `part`.
|
|
1025
|
+
|
|
1026
|
+
- `auro-drawer::part(backdrop)` to style the backdrop behind the the content wrapper.
|
|
1027
|
+
- `auro-drawer ::part(drawer-wrapper)` to style the container of the drawer content.
|
|
1028
|
+
- `auro-drawer ::part(drawer-header)` to style the header.
|
|
1029
|
+
- `auro-drawer ::part(drawer-content)` to style the content wrapper.
|
|
1030
|
+
- `auro-drawer ::part(drawer-footer)` to style the footer.
|
|
1031
|
+
- `auro-drawer ::part(close-button)` to style the close button.
|
|
1032
|
+
|
|
1033
|
+
`close` slot can be used to replace the close button to a different element.
|
|
1034
|
+
|
|
1035
|
+
<div class="exampleWrapper">
|
|
1036
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/customizing.html) -->
|
|
1037
|
+
<!-- The below content is automatically added from ./../apiExamples/customizing.html -->
|
|
1038
|
+
<style>
|
|
1039
|
+
#customizedDrawer ::part(drawer-header) {
|
|
1040
|
+
display: none;
|
|
1041
|
+
}
|
|
1042
|
+
#customizedDrawer ::part(drawer-content) {
|
|
1043
|
+
width: 90%;
|
|
1044
|
+
}
|
|
1045
|
+
#customizedDrawer ::part(close-button) {
|
|
1046
|
+
transform: scale(2);
|
|
1047
|
+
}
|
|
1048
|
+
#customizedDrawer ::part(drawer-wrapper) {
|
|
1049
|
+
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1050
|
+
width: 50%;
|
|
1051
|
+
}
|
|
1052
|
+
#customizedDrawer::part(drawer-backdrop) {
|
|
1053
|
+
background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
|
|
1054
|
+
}
|
|
1055
|
+
</style>
|
|
1056
|
+
<div>
|
|
1057
|
+
<auro-button id="openCustomized">Open customized drawer</auro-button>
|
|
1058
|
+
</div>
|
|
1059
|
+
<auro-drawer id="customizedDrawer">
|
|
1060
|
+
<span slot="header">Default Drawer</span>
|
|
1061
|
+
<div slot="content">
|
|
1062
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
1063
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
1064
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
1065
|
+
<ul>
|
|
1066
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
1067
|
+
<auro-radio-group>
|
|
1068
|
+
<span slot="legend">Accordion Test</span>
|
|
1069
|
+
<auro-radio
|
|
1070
|
+
id="basicGroupRadio1"
|
|
1071
|
+
label="Credit or debit card"
|
|
1072
|
+
name="creditordebit"
|
|
1073
|
+
value="credit"
|
|
1074
|
+
></auro-radio>
|
|
1075
|
+
<auro-radio
|
|
1076
|
+
id="basicGroupRadio2"
|
|
1077
|
+
label="Apple Pay"
|
|
1078
|
+
name="applePay"
|
|
1079
|
+
value="applePay"
|
|
1080
|
+
></auro-radio>
|
|
1081
|
+
<auro-radio
|
|
1082
|
+
id="basicGroupRadio3"
|
|
1083
|
+
label="Alaska Airlines Commercial Account"
|
|
1084
|
+
name="alaskaCommercial"
|
|
1085
|
+
value="alaskaCommercial"
|
|
1086
|
+
></auro-radio>
|
|
1087
|
+
</auro-radio-group>
|
|
1088
|
+
<auro-input placeholder="John Doe" bordered required>
|
|
1089
|
+
<span slot="label">Full name</span>
|
|
1090
|
+
<span slot="helptext">Please enter your full name.</span>
|
|
1091
|
+
</auro-input>
|
|
1092
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
1093
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
1094
|
+
<auro-checkbox-group>
|
|
1095
|
+
<span slot="legend">Form label goes here</span>
|
|
1096
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1"
|
|
1097
|
+
>Checkbox option</auro-checkbox
|
|
1098
|
+
>
|
|
1099
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
|
|
1100
|
+
>Checkbox option</auro-checkbox
|
|
1101
|
+
>
|
|
1102
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3"
|
|
1103
|
+
>Checkbox option</auro-checkbox
|
|
1104
|
+
>
|
|
1105
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4"
|
|
1106
|
+
>Checkbox option</auro-checkbox
|
|
1107
|
+
>
|
|
1108
|
+
</auro-checkbox-group>
|
|
1109
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
1110
|
+
</ul>
|
|
1111
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
1112
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
1113
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
1114
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
1115
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
1116
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
1117
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
1118
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
1119
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
1120
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
1121
|
+
</div>
|
|
1122
|
+
<div slot="footer">
|
|
1123
|
+
<auro-button secondary id="closeCustomized">Close</auro-button>
|
|
1124
|
+
</div>
|
|
1125
|
+
</auro-drawer>
|
|
1126
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1127
|
+
</div>
|
|
1128
|
+
<auro-accordion alignRight>
|
|
1129
|
+
<span slot="trigger">See code</span>
|
|
1130
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/customizing.html) -->
|
|
1131
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/customizing.html -->
|
|
1132
|
+
|
|
1133
|
+
```html
|
|
1134
|
+
<style>
|
|
1135
|
+
#customizedDrawer ::part(drawer-header) {
|
|
1136
|
+
display: none;
|
|
1137
|
+
}
|
|
1138
|
+
#customizedDrawer ::part(drawer-content) {
|
|
1139
|
+
width: 90%;
|
|
1140
|
+
}
|
|
1141
|
+
#customizedDrawer ::part(close-button) {
|
|
1142
|
+
transform: scale(2);
|
|
1143
|
+
}
|
|
1144
|
+
#customizedDrawer ::part(drawer-wrapper) {
|
|
1145
|
+
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1146
|
+
width: 50%;
|
|
1147
|
+
}
|
|
1148
|
+
#customizedDrawer::part(drawer-backdrop) {
|
|
1149
|
+
background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
|
|
1150
|
+
}
|
|
1151
|
+
</style>
|
|
1152
|
+
<div>
|
|
1153
|
+
<auro-button id="openCustomized">Open customized drawer</auro-button>
|
|
1154
|
+
</div>
|
|
1155
|
+
<auro-drawer id="customizedDrawer">
|
|
1156
|
+
<span slot="header">Default Drawer</span>
|
|
1157
|
+
<div slot="content">
|
|
1158
|
+
<p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
|
|
1159
|
+
<p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
|
|
1160
|
+
<auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
|
|
1161
|
+
<ul>
|
|
1162
|
+
<li>Caerphilly croque monsieur fondue</li>
|
|
1163
|
+
<auro-radio-group>
|
|
1164
|
+
<span slot="legend">Accordion Test</span>
|
|
1165
|
+
<auro-radio
|
|
1166
|
+
id="basicGroupRadio1"
|
|
1167
|
+
label="Credit or debit card"
|
|
1168
|
+
name="creditordebit"
|
|
1169
|
+
value="credit"
|
|
1170
|
+
></auro-radio>
|
|
1171
|
+
<auro-radio
|
|
1172
|
+
id="basicGroupRadio2"
|
|
1173
|
+
label="Apple Pay"
|
|
1174
|
+
name="applePay"
|
|
1175
|
+
value="applePay"
|
|
1176
|
+
></auro-radio>
|
|
1177
|
+
<auro-radio
|
|
1178
|
+
id="basicGroupRadio3"
|
|
1179
|
+
label="Alaska Airlines Commercial Account"
|
|
1180
|
+
name="alaskaCommercial"
|
|
1181
|
+
value="alaskaCommercial"
|
|
1182
|
+
></auro-radio>
|
|
1183
|
+
</auro-radio-group>
|
|
1184
|
+
<auro-input placeholder="John Doe" bordered required>
|
|
1185
|
+
<span slot="label">Full name</span>
|
|
1186
|
+
<span slot="helptext">Please enter your full name.</span>
|
|
1187
|
+
</auro-input>
|
|
1188
|
+
<li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
|
|
1189
|
+
<li>Cheddar cheese and biscuits chalk and cheese</li>
|
|
1190
|
+
<auro-checkbox-group>
|
|
1191
|
+
<span slot="legend">Form label goes here</span>
|
|
1192
|
+
<auro-checkbox value="value1" name="basic" id="checkbox-basic1"
|
|
1193
|
+
>Checkbox option</auro-checkbox
|
|
1194
|
+
>
|
|
1195
|
+
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked
|
|
1196
|
+
>Checkbox option</auro-checkbox
|
|
1197
|
+
>
|
|
1198
|
+
<auro-checkbox value="value3" name="basic" id="checkbox-basic3"
|
|
1199
|
+
>Checkbox option</auro-checkbox
|
|
1200
|
+
>
|
|
1201
|
+
<auro-checkbox value="value4" name="basic" id="checkbox-basic4"
|
|
1202
|
+
>Checkbox option</auro-checkbox
|
|
1203
|
+
>
|
|
1204
|
+
</auro-checkbox-group>
|
|
1205
|
+
<li>Camembert de normandie stinking bishop bavarian bergkase</li>
|
|
1206
|
+
</ul>
|
|
1207
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi quis commodo odio aenean sed. Tortor at risus viverra adipiscing at in tellus integer feugiat. Dictum sit amet justo donec enim diam vulputate. Ullamcorper a lacus vestibulum sed arcu non. Sed cras ornare arcu dui vivamus arcu felis. Morbi tristique senectus et netus et. Ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia. Nunc faucibus a pellentesque sit amet porttitor eget dolor. Eleifend mi in nulla posuere sollicitudin aliquam. Dolor sed viverra ipsum nunc aliquet bibendum enim.</p>
|
|
1208
|
+
<p>Tristique senectus et netus et. Vel pharetra vel turpis nunc eget. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. Aliquet enim tortor at auctor urna nunc id. Ut consequat semper viverra nam libero justo. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Et leo duis ut diam. In dictum non consectetur a erat nam. Elementum nibh tellus molestie nunc. Elementum tempus egestas sed sed risus pretium quam vulputate dignissim. Luctus venenatis lectus magna fringilla urna porttitor rhoncus. Semper feugiat nibh sed pulvinar proin gravida. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. In cursus turpis massa tincidunt dui ut ornare lectus sit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium.</p>
|
|
1209
|
+
<p>Libero volutpat sed cras ornare arcu dui vivamus arcu felis. Dignissim diam quis enim lobortis. Ac orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Integer eget aliquet nibh praesent. Ornare massa eget egestas purus viverra accumsan in nisl. Est ultricies integer quis auctor elit sed vulputate mi sit. Feugiat scelerisque varius morbi enim nunc faucibus. Pellentesque adipiscing commodo elit at imperdiet dui. Nam at lectus urna duis convallis. Sagittis eu volutpat odio facilisis mauris.</p>
|
|
1210
|
+
<p>Magnis dis parturient montes nascetur ridiculus mus. Faucibus vitae aliquet nec ullamcorper sit amet risus. In eu mi bibendum neque egestas congue quisque egestas. Nibh praesent tristique magna sit amet purus gravida quis blandit. Tincidunt id aliquet risus feugiat in ante metus dictum at. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Molestie at elementum eu facilisis sed odio. Odio facilisis mauris sit amet massa vitae tortor condimentum lacinia. Egestas pretium aenean pharetra magna. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum nunc aliquet bibendum. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Tempor commodo ullamcorper a lacus vestibulum sed arcu. Quis viverra nibh cras pulvinar mattis nunc. A scelerisque purus semper eget duis at tellus at urna. Cursus turpis massa tincidunt dui ut. Purus viverra accumsan in nisl nisi scelerisque eu. Et magnis dis parturient montes nascetur ridiculus mus.</p>
|
|
1211
|
+
<p>Id eu nisl nunc mi. Curabitur gravida arcu ac tortor dignissim convallis aenean et tortor. Platea dictumst quisque sagittis purus sit amet volutpat. Egestas congue quisque egestas diam in arcu cursus. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam. Ornare suspendisse sed nisi lacus sed. Ut ornare lectus sit amet est placerat in egestas erat. Tortor aliquam nulla facilisi cras fermentum odio eu. Magna etiam tempor orci eu lobortis elementum nibh tellus. Pellentesque nec nam aliquam sem et tortor consequat id. Varius quam quisque id diam vel. Odio ut enim blandit volutpat maecenas volutpat. Urna cursus eget nunc scelerisque viverra mauris in aliquam.</p>
|
|
1212
|
+
<p>Interdum consectetur libero id faucibus nisl tincidunt eget nullam. Facilisis sed odio morbi quis commodo odio. Cras adipiscing enim eu turpis egestas pretium. Dolor purus non enim praesent. Vehicula ipsum a arcu cursus vitae congue mauris rhoncus. Donec et odio pellentesque diam volutpat commodo sed. Mauris in aliquam sem fringilla ut morbi tincidunt augue interdum. A pellentesque sit amet porttitor eget. Nulla pharetra diam sit amet nisl suscipit adipiscing bibendum. Consequat semper viverra nam libero. Vitae purus faucibus ornare suspendisse. Eget nunc lobortis mattis aliquam. Nibh nisl condimentum id venenatis a condimentum vitae. Eget egestas purus viverra accumsan in nisl. Leo in vitae turpis massa sed elementum tempus. Amet nisl purus in mollis nunc sed id semper risus. Et tortor consequat id porta nibh. Proin fermentum leo vel orci porta.</p>
|
|
1213
|
+
<p>Duis ut diam quam nulla porttitor massa. Aliquet porttitor lacus luctus accumsan tortor posuere ac ut consequat. Volutpat ac tincidunt vitae semper quis lectus nulla at volutpat. Enim eu turpis egestas pretium aenean pharetra magna. Commodo elit at imperdiet dui accumsan sit amet nulla. Eget felis eget nunc lobortis mattis aliquam faucibus purus in. Mauris augue neque gravida in. Viverra accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Neque viverra justo nec ultrices dui sapien eget mi proin. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Mollis nunc sed id semper risus in hendrerit. Feugiat scelerisque varius morbi enim nunc. Pretium lectus quam id leo in vitae turpis massa sed. Ornare arcu odio ut sem nulla pharetra. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Sit amet risus nullam eget felis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit. Ac turpis egestas integer eget aliquet nibh praesent tristique magna. Malesuada fames ac turpis egestas sed tempus.</p>
|
|
1214
|
+
<p>Fusce ut placerat orci nulla pellentesque dignissim enim sit. Consequat nisl vel pretium lectus quam id leo in vitae. Lectus urna duis convallis convallis tellus id interdum. Arcu risus quis varius quam quisque id. Fermentum leo vel orci porta. Sed augue lacus viverra vitae congue. Consequat semper viverra nam libero. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Feugiat vivamus at augue eget arcu dictum varius duis. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Lacus vestibulum sed arcu non odio euismod. Pulvinar sapien et ligula ullamcorper malesuada. Ut ornare lectus sit amet est placerat in egestas erat. Pharetra massa massa ultricies mi. Interdum velit euismod in pellentesque.</p>
|
|
1215
|
+
<p>Duis at consectetur lorem donec. Sed vulputate mi sit amet mauris commodo quis. Hendrerit dolor magna eget est lorem ipsum dolor sit amet. Eget arcu dictum varius duis. Nunc consequat interdum varius sit amet mattis. Pulvinar mattis nunc sed blandit. Sem viverra aliquet eget sit amet tellus. Vel turpis nunc eget lorem dolor sed. Pretium viverra suspendisse potenti nullam. Dui nunc mattis enim ut tellus elementum sagittis vitae et. Odio euismod lacinia at quis risus sed vulputate odio. Imperdiet proin fermentum leo vel orci porta non pulvinar. Leo duis ut diam quam nulla porttitor massa id neque. Augue lacus viverra vitae congue eu consequat. Id cursus metus aliquam eleifend. Montes nascetur ridiculus mus mauris.</p>
|
|
1216
|
+
<p>Volutpat blandit aliquam etiam erat velit scelerisque. Risus commodo viverra maecenas accumsan lacus vel facilisis volutpat est. Lectus sit amet est placerat in egestas erat imperdiet sed. Platea dictumst quisque sagittis purus sit. Elit ut aliquam purus sit amet luctus venenatis lectus magna. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Cursus euismod quis viverra nibh cras pulvinar mattis nunc. Nulla pharetra diam sit amet nisl suscipit adipiscing. Id aliquet lectus proin nibh nisl condimentum id venenatis. Phasellus faucibus scelerisque eleifend donec pretium vulputate. Vulputate eu scelerisque felis imperdiet proin fermentum leo. Duis at consectetur lorem donec massa sapien faucibus et molestie.</p>
|
|
1217
|
+
</div>
|
|
1218
|
+
<div slot="footer">
|
|
1219
|
+
<auro-button secondary id="closeCustomized">Close</auro-button>
|
|
1220
|
+
</div>
|
|
1221
|
+
</auro-drawer>
|
|
1222
|
+
```
|
|
1223
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
1224
|
+
</auro-accordion>
|