@patternfly/patternfly 6.0.0-alpha.169 → 6.0.0-alpha.170
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/components/Card/card.css +3 -3
- package/components/Card/card.scss +3 -3
- package/components/_index.css +3 -3
- package/docs/components/InputGroup/examples/InputGroup.md +11 -53
- package/docs/components/Login/examples/Login.md +11 -42
- package/docs/demos/Card/examples/Card.md +64 -324
- package/docs/demos/CardView/examples/CardView.md +11 -103
- package/docs/demos/Dashboard/examples/Dashboard.md +22 -128
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -794
- package/docs/demos/Table/examples/Table.md +141 -1320
- package/docs/demos/Tabs/examples/Tabs.md +11 -103
- package/package.json +1 -1
- package/patternfly-no-globals.css +3 -3
- package/patternfly.css +3 -3
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
- package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
- package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
- package/docs/components/ContextSelector/deprecated/context-selector.md +0 -907
- package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
- package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
- package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
- package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
- package/docs/components/Select/deprecated/Select.css +0 -56
- package/docs/components/Select/deprecated/Select.md +0 -3609
- package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1781
|
@@ -1,792 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
id: Application launcher
|
|
3
|
-
section: components
|
|
4
|
-
subsection: menus
|
|
5
|
-
cssPrefix: pf-v6-c-app-launcher
|
|
6
|
-
deprecated: true
|
|
7
|
-
---import './application-launcher.css'
|
|
8
|
-
|
|
9
|
-
## Examples
|
|
10
|
-
|
|
11
|
-
### Collapsed
|
|
12
|
-
|
|
13
|
-
```html
|
|
14
|
-
<nav
|
|
15
|
-
class="pf-v6-c-app-launcher"
|
|
16
|
-
aria-label="Application launcher"
|
|
17
|
-
id="application-launcher-collapsed"
|
|
18
|
-
>
|
|
19
|
-
<button
|
|
20
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
21
|
-
type="button"
|
|
22
|
-
id="application-launcher-collapsed-button"
|
|
23
|
-
aria-expanded="false"
|
|
24
|
-
aria-label="Application launcher"
|
|
25
|
-
>
|
|
26
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
27
|
-
</button>
|
|
28
|
-
<ul
|
|
29
|
-
class="pf-v6-c-app-launcher__menu"
|
|
30
|
-
aria-labelledby="application-launcher-collapsed-button"
|
|
31
|
-
role="menu"
|
|
32
|
-
hidden
|
|
33
|
-
>
|
|
34
|
-
<li role="none">
|
|
35
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
|
|
36
|
-
</li>
|
|
37
|
-
<li role="none">
|
|
38
|
-
<button
|
|
39
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
40
|
-
role="menuitem"
|
|
41
|
-
type="button"
|
|
42
|
-
>Action</button>
|
|
43
|
-
</li>
|
|
44
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
45
|
-
<li role="none">
|
|
46
|
-
<a
|
|
47
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
|
|
48
|
-
role="menuitem"
|
|
49
|
-
href="#"
|
|
50
|
-
aria-disabled="true"
|
|
51
|
-
tabindex="-1"
|
|
52
|
-
>Disabled link</a>
|
|
53
|
-
</li>
|
|
54
|
-
</ul>
|
|
55
|
-
</nav>
|
|
56
|
-
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
### Disabled
|
|
60
|
-
|
|
61
|
-
```html
|
|
62
|
-
<nav
|
|
63
|
-
class="pf-v6-c-app-launcher"
|
|
64
|
-
aria-label="Application launcher"
|
|
65
|
-
id="application-launcher-disabled"
|
|
66
|
-
>
|
|
67
|
-
<button
|
|
68
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
69
|
-
type="button"
|
|
70
|
-
id="application-launcher-disabled-button"
|
|
71
|
-
aria-expanded="false"
|
|
72
|
-
aria-label="Application launcher"
|
|
73
|
-
disabled
|
|
74
|
-
>
|
|
75
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
76
|
-
</button>
|
|
77
|
-
<ul
|
|
78
|
-
class="pf-v6-c-app-launcher__menu"
|
|
79
|
-
aria-labelledby="application-launcher-disabled-button"
|
|
80
|
-
role="menu"
|
|
81
|
-
hidden
|
|
82
|
-
>
|
|
83
|
-
<li role="none">
|
|
84
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
|
|
85
|
-
</li>
|
|
86
|
-
<li role="none">
|
|
87
|
-
<button
|
|
88
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
89
|
-
role="menuitem"
|
|
90
|
-
type="button"
|
|
91
|
-
>Action</button>
|
|
92
|
-
</li>
|
|
93
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
94
|
-
<li role="none">
|
|
95
|
-
<a
|
|
96
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
|
|
97
|
-
role="menuitem"
|
|
98
|
-
href="#"
|
|
99
|
-
aria-disabled="true"
|
|
100
|
-
tabindex="-1"
|
|
101
|
-
>Disabled link</a>
|
|
102
|
-
</li>
|
|
103
|
-
</ul>
|
|
104
|
-
</nav>
|
|
105
|
-
|
|
106
|
-
```
|
|
107
|
-
|
|
108
|
-
### Expanded
|
|
109
|
-
|
|
110
|
-
```html
|
|
111
|
-
<nav
|
|
112
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
113
|
-
aria-label="Application launcher"
|
|
114
|
-
id="application-launcher-expanded"
|
|
115
|
-
>
|
|
116
|
-
<button
|
|
117
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
118
|
-
type="button"
|
|
119
|
-
id="application-launcher-expanded-button"
|
|
120
|
-
aria-expanded="true"
|
|
121
|
-
aria-label="Application launcher"
|
|
122
|
-
>
|
|
123
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
124
|
-
</button>
|
|
125
|
-
<ul
|
|
126
|
-
class="pf-v6-c-app-launcher__menu"
|
|
127
|
-
aria-labelledby="application-launcher-expanded-button"
|
|
128
|
-
role="menu"
|
|
129
|
-
>
|
|
130
|
-
<li role="none">
|
|
131
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
|
|
132
|
-
</li>
|
|
133
|
-
<li role="none">
|
|
134
|
-
<button
|
|
135
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
136
|
-
role="menuitem"
|
|
137
|
-
type="button"
|
|
138
|
-
>Action</button>
|
|
139
|
-
</li>
|
|
140
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
141
|
-
<li role="none">
|
|
142
|
-
<a
|
|
143
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
|
|
144
|
-
role="menuitem"
|
|
145
|
-
href="#"
|
|
146
|
-
aria-disabled="true"
|
|
147
|
-
tabindex="-1"
|
|
148
|
-
>Disabled link</a>
|
|
149
|
-
</li>
|
|
150
|
-
</ul>
|
|
151
|
-
</nav>
|
|
152
|
-
|
|
153
|
-
```
|
|
154
|
-
|
|
155
|
-
### Aligned right
|
|
156
|
-
|
|
157
|
-
```html
|
|
158
|
-
<nav
|
|
159
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
160
|
-
aria-label="Application launcher"
|
|
161
|
-
id="application-launcher-aligned-right"
|
|
162
|
-
>
|
|
163
|
-
<button
|
|
164
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
165
|
-
type="button"
|
|
166
|
-
id="application-launcher-aligned-right-button"
|
|
167
|
-
aria-expanded="true"
|
|
168
|
-
aria-label="Application launcher"
|
|
169
|
-
>
|
|
170
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
171
|
-
</button>
|
|
172
|
-
<ul
|
|
173
|
-
class="pf-v6-c-app-launcher__menu pf-m-align-right"
|
|
174
|
-
aria-labelledby="application-launcher-aligned-right-button"
|
|
175
|
-
role="menu"
|
|
176
|
-
>
|
|
177
|
-
<li role="none">
|
|
178
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
|
|
179
|
-
</li>
|
|
180
|
-
<li role="none">
|
|
181
|
-
<button
|
|
182
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
183
|
-
role="menuitem"
|
|
184
|
-
type="button"
|
|
185
|
-
>Action</button>
|
|
186
|
-
</li>
|
|
187
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
188
|
-
<li role="none">
|
|
189
|
-
<a
|
|
190
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
|
|
191
|
-
role="menuitem"
|
|
192
|
-
href="#"
|
|
193
|
-
aria-disabled="true"
|
|
194
|
-
tabindex="-1"
|
|
195
|
-
>Disabled link</a>
|
|
196
|
-
</li>
|
|
197
|
-
</ul>
|
|
198
|
-
</nav>
|
|
199
|
-
|
|
200
|
-
```
|
|
201
|
-
|
|
202
|
-
### Aligned top
|
|
203
|
-
|
|
204
|
-
```html
|
|
205
|
-
<nav
|
|
206
|
-
class="pf-v6-c-app-launcher pf-m-expanded pf-m-top"
|
|
207
|
-
aria-label="Application launcher"
|
|
208
|
-
id="application-launcher-aligned-top"
|
|
209
|
-
>
|
|
210
|
-
<button
|
|
211
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
212
|
-
type="button"
|
|
213
|
-
id="application-launcher-aligned-top-button"
|
|
214
|
-
aria-expanded="true"
|
|
215
|
-
aria-label="Application launcher"
|
|
216
|
-
>
|
|
217
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
218
|
-
</button>
|
|
219
|
-
<ul
|
|
220
|
-
class="pf-v6-c-app-launcher__menu"
|
|
221
|
-
aria-labelledby="application-launcher-aligned-top-button"
|
|
222
|
-
role="menu"
|
|
223
|
-
>
|
|
224
|
-
<li role="none">
|
|
225
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">Link</a>
|
|
226
|
-
</li>
|
|
227
|
-
<li role="none">
|
|
228
|
-
<button
|
|
229
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
230
|
-
role="menuitem"
|
|
231
|
-
type="button"
|
|
232
|
-
>Action</button>
|
|
233
|
-
</li>
|
|
234
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
235
|
-
<li role="none">
|
|
236
|
-
<a
|
|
237
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-disabled"
|
|
238
|
-
role="menuitem"
|
|
239
|
-
href="#"
|
|
240
|
-
aria-disabled="true"
|
|
241
|
-
tabindex="-1"
|
|
242
|
-
>Disabled link</a>
|
|
243
|
-
</li>
|
|
244
|
-
</ul>
|
|
245
|
-
</nav>
|
|
246
|
-
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
### With sections and dividers between sections
|
|
250
|
-
|
|
251
|
-
```html
|
|
252
|
-
<nav
|
|
253
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
254
|
-
aria-label="Application launcher"
|
|
255
|
-
id="application-launcher-divided-sections"
|
|
256
|
-
>
|
|
257
|
-
<button
|
|
258
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
259
|
-
type="button"
|
|
260
|
-
id="application-launcher-divided-sections-button"
|
|
261
|
-
aria-expanded="true"
|
|
262
|
-
aria-label="Application launcher"
|
|
263
|
-
>
|
|
264
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
265
|
-
</button>
|
|
266
|
-
<div class="pf-v6-c-app-launcher__menu">
|
|
267
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
268
|
-
<ul role="menu">
|
|
269
|
-
<li role="none">
|
|
270
|
-
<a
|
|
271
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
272
|
-
role="menuitem"
|
|
273
|
-
href="#"
|
|
274
|
-
>Link not in group</a>
|
|
275
|
-
</li>
|
|
276
|
-
</ul>
|
|
277
|
-
</section>
|
|
278
|
-
<hr class="pf-v6-c-divider" />
|
|
279
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
280
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
|
|
281
|
-
<ul role="menu">
|
|
282
|
-
<li role="none">
|
|
283
|
-
<a
|
|
284
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
285
|
-
role="menuitem"
|
|
286
|
-
href="#"
|
|
287
|
-
>Group 1 link</a>
|
|
288
|
-
</li>
|
|
289
|
-
<li role="none">
|
|
290
|
-
<a
|
|
291
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
292
|
-
role="menuitem"
|
|
293
|
-
href="#"
|
|
294
|
-
>Group 1 link</a>
|
|
295
|
-
</li>
|
|
296
|
-
</ul>
|
|
297
|
-
</section>
|
|
298
|
-
<hr class="pf-v6-c-divider" />
|
|
299
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
300
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
|
|
301
|
-
<ul role="menu">
|
|
302
|
-
<li role="none">
|
|
303
|
-
<a
|
|
304
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
305
|
-
role="menuitem"
|
|
306
|
-
href="#"
|
|
307
|
-
>Group 2 link</a>
|
|
308
|
-
</li>
|
|
309
|
-
<li role="none">
|
|
310
|
-
<a
|
|
311
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
312
|
-
role="menuitem"
|
|
313
|
-
href="#"
|
|
314
|
-
>Group 2 link</a>
|
|
315
|
-
</li>
|
|
316
|
-
</ul>
|
|
317
|
-
</section>
|
|
318
|
-
</div>
|
|
319
|
-
</nav>
|
|
320
|
-
|
|
321
|
-
```
|
|
322
|
-
|
|
323
|
-
### With sections and dividers between items
|
|
324
|
-
|
|
325
|
-
```html
|
|
326
|
-
<nav
|
|
327
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
328
|
-
aria-label="Application launcher"
|
|
329
|
-
id="application-launcher-divided-items"
|
|
330
|
-
>
|
|
331
|
-
<button
|
|
332
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
333
|
-
type="button"
|
|
334
|
-
id="application-launcher-divided-items-button"
|
|
335
|
-
aria-expanded="true"
|
|
336
|
-
aria-label="Application launcher"
|
|
337
|
-
>
|
|
338
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
339
|
-
</button>
|
|
340
|
-
<div class="pf-v6-c-app-launcher__menu">
|
|
341
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
342
|
-
<ul role="menu">
|
|
343
|
-
<li role="none">
|
|
344
|
-
<a
|
|
345
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
346
|
-
role="menuitem"
|
|
347
|
-
href="#"
|
|
348
|
-
>Link not in group</a>
|
|
349
|
-
</li>
|
|
350
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
351
|
-
</ul>
|
|
352
|
-
</section>
|
|
353
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
354
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
|
|
355
|
-
<ul role="menu">
|
|
356
|
-
<li role="none">
|
|
357
|
-
<a
|
|
358
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
359
|
-
role="menuitem"
|
|
360
|
-
href="#"
|
|
361
|
-
>Group 1 link</a>
|
|
362
|
-
</li>
|
|
363
|
-
<li role="none">
|
|
364
|
-
<a
|
|
365
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
366
|
-
role="menuitem"
|
|
367
|
-
href="#"
|
|
368
|
-
>Group 1 link</a>
|
|
369
|
-
</li>
|
|
370
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
371
|
-
</ul>
|
|
372
|
-
</section>
|
|
373
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
374
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
|
|
375
|
-
<ul role="menu">
|
|
376
|
-
<li role="none">
|
|
377
|
-
<a
|
|
378
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
379
|
-
role="menuitem"
|
|
380
|
-
href="#"
|
|
381
|
-
>Group 2 link</a>
|
|
382
|
-
</li>
|
|
383
|
-
<li role="none">
|
|
384
|
-
<a
|
|
385
|
-
class="pf-v6-c-app-launcher__menu-item"
|
|
386
|
-
role="menuitem"
|
|
387
|
-
href="#"
|
|
388
|
-
>Group 2 link</a>
|
|
389
|
-
</li>
|
|
390
|
-
</ul>
|
|
391
|
-
</section>
|
|
392
|
-
</div>
|
|
393
|
-
</nav>
|
|
394
|
-
|
|
395
|
-
```
|
|
396
|
-
|
|
397
|
-
### With sections, dividers, icons, and external links
|
|
398
|
-
|
|
399
|
-
```html
|
|
400
|
-
<nav
|
|
401
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
402
|
-
aria-label="Application launcher"
|
|
403
|
-
id="application-launcher-sections-dividers-icons-links"
|
|
404
|
-
>
|
|
405
|
-
<button
|
|
406
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
407
|
-
type="button"
|
|
408
|
-
id="application-launcher-sections-dividers-icons-links-button"
|
|
409
|
-
aria-expanded="true"
|
|
410
|
-
aria-label="Application launcher"
|
|
411
|
-
>
|
|
412
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
413
|
-
</button>
|
|
414
|
-
<div class="pf-v6-c-app-launcher__menu">
|
|
415
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
416
|
-
<ul role="menu">
|
|
417
|
-
<li role="none">
|
|
418
|
-
<a class="pf-v6-c-app-launcher__menu-item" role="menuitem" href="#">
|
|
419
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
420
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
421
|
-
</span>
|
|
422
|
-
Link not in group
|
|
423
|
-
</a>
|
|
424
|
-
</li>
|
|
425
|
-
</ul>
|
|
426
|
-
</section>
|
|
427
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
428
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
429
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
|
|
430
|
-
<ul role="menu">
|
|
431
|
-
<li role="none">
|
|
432
|
-
<a
|
|
433
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-external"
|
|
434
|
-
role="menuitem"
|
|
435
|
-
href="#"
|
|
436
|
-
target="_blank"
|
|
437
|
-
>
|
|
438
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
439
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
440
|
-
</span>
|
|
441
|
-
Group 1 link
|
|
442
|
-
<span
|
|
443
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
444
|
-
>
|
|
445
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
446
|
-
</span>
|
|
447
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
448
|
-
</a>
|
|
449
|
-
</li>
|
|
450
|
-
<li role="none">
|
|
451
|
-
<a
|
|
452
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-external"
|
|
453
|
-
role="menuitem"
|
|
454
|
-
href="#"
|
|
455
|
-
target="_blank"
|
|
456
|
-
>
|
|
457
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
458
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
459
|
-
</span>
|
|
460
|
-
Group 1 link
|
|
461
|
-
<span
|
|
462
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
463
|
-
>
|
|
464
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
465
|
-
</span>
|
|
466
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
467
|
-
</a>
|
|
468
|
-
</li>
|
|
469
|
-
<li class="pf-v6-c-divider" role="separator"></li>
|
|
470
|
-
</ul>
|
|
471
|
-
</section>
|
|
472
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
473
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
|
|
474
|
-
<ul role="menu">
|
|
475
|
-
<li role="none">
|
|
476
|
-
<a
|
|
477
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-external"
|
|
478
|
-
role="menuitem"
|
|
479
|
-
href="#"
|
|
480
|
-
target="_blank"
|
|
481
|
-
>
|
|
482
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
483
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
484
|
-
</span>
|
|
485
|
-
Group 2 link
|
|
486
|
-
<span
|
|
487
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
488
|
-
>
|
|
489
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
490
|
-
</span>
|
|
491
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
492
|
-
</a>
|
|
493
|
-
</li>
|
|
494
|
-
<li role="none">
|
|
495
|
-
<a
|
|
496
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-external"
|
|
497
|
-
role="menuitem"
|
|
498
|
-
href="#"
|
|
499
|
-
target="_blank"
|
|
500
|
-
>
|
|
501
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
502
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
503
|
-
</span>
|
|
504
|
-
Group 2 link
|
|
505
|
-
<span
|
|
506
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
507
|
-
>
|
|
508
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
509
|
-
</span>
|
|
510
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
511
|
-
</a>
|
|
512
|
-
</li>
|
|
513
|
-
</ul>
|
|
514
|
-
</section>
|
|
515
|
-
</div>
|
|
516
|
-
</nav>
|
|
517
|
-
|
|
518
|
-
```
|
|
519
|
-
|
|
520
|
-
### Favorites
|
|
521
|
-
|
|
522
|
-
```html
|
|
523
|
-
<nav
|
|
524
|
-
class="pf-v6-c-app-launcher pf-m-expanded"
|
|
525
|
-
aria-label="Application launcher"
|
|
526
|
-
id="app-launcher-favorites"
|
|
527
|
-
>
|
|
528
|
-
<button
|
|
529
|
-
class="pf-v6-c-app-launcher__toggle"
|
|
530
|
-
type="button"
|
|
531
|
-
id="app-launcher-favorites-button"
|
|
532
|
-
aria-expanded="true"
|
|
533
|
-
aria-label="Application launcher"
|
|
534
|
-
>
|
|
535
|
-
<i class="fas fa-th" aria-hidden="true"></i>
|
|
536
|
-
</button>
|
|
537
|
-
<div class="pf-v6-c-app-launcher__menu">
|
|
538
|
-
<div class="pf-v6-c-app-launcher__menu-search">
|
|
539
|
-
<div class="pf-v6-c-text-input-group">
|
|
540
|
-
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
541
|
-
<span class="pf-v6-c-text-input-group__text">
|
|
542
|
-
<span class="pf-v6-c-text-input-group__icon">
|
|
543
|
-
<i class="fas fa-fw fa-search"></i>
|
|
544
|
-
</span>
|
|
545
|
-
<input
|
|
546
|
-
class="pf-v6-c-text-input-group__text-input"
|
|
547
|
-
type="text"
|
|
548
|
-
placeholder="Search"
|
|
549
|
-
value
|
|
550
|
-
aria-label="Search input"
|
|
551
|
-
/>
|
|
552
|
-
</span>
|
|
553
|
-
</div>
|
|
554
|
-
</div>
|
|
555
|
-
</div>
|
|
556
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
557
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Favorites</h1>
|
|
558
|
-
<ul role="menu">
|
|
559
|
-
<li
|
|
560
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
561
|
-
role="none"
|
|
562
|
-
>
|
|
563
|
-
<a
|
|
564
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
565
|
-
role="menuitem"
|
|
566
|
-
href="#"
|
|
567
|
-
target="_blank"
|
|
568
|
-
>
|
|
569
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
570
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
571
|
-
</span>
|
|
572
|
-
Link 2
|
|
573
|
-
<span
|
|
574
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
575
|
-
>
|
|
576
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
577
|
-
</span>
|
|
578
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
579
|
-
</a>
|
|
580
|
-
<button
|
|
581
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
582
|
-
type="button"
|
|
583
|
-
aria-label="Favorite"
|
|
584
|
-
>
|
|
585
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
586
|
-
</button>
|
|
587
|
-
</li>
|
|
588
|
-
<li
|
|
589
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
590
|
-
role="none"
|
|
591
|
-
>
|
|
592
|
-
<a
|
|
593
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
594
|
-
role="menuitem"
|
|
595
|
-
href="#"
|
|
596
|
-
target="_blank"
|
|
597
|
-
>
|
|
598
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
599
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
600
|
-
</span>
|
|
601
|
-
Link 3
|
|
602
|
-
<span
|
|
603
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
604
|
-
>
|
|
605
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
606
|
-
</span>
|
|
607
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
608
|
-
</a>
|
|
609
|
-
<button
|
|
610
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
611
|
-
type="button"
|
|
612
|
-
aria-label="Favorite"
|
|
613
|
-
>
|
|
614
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
615
|
-
</button>
|
|
616
|
-
</li>
|
|
617
|
-
</ul>
|
|
618
|
-
</section>
|
|
619
|
-
<hr class="pf-v6-c-divider" />
|
|
620
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
621
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 1</h1>
|
|
622
|
-
<ul role="menu">
|
|
623
|
-
<li
|
|
624
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external"
|
|
625
|
-
role="none"
|
|
626
|
-
>
|
|
627
|
-
<a
|
|
628
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
629
|
-
role="menuitem"
|
|
630
|
-
href="#"
|
|
631
|
-
target="_blank"
|
|
632
|
-
>
|
|
633
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
634
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
635
|
-
</span>
|
|
636
|
-
Link 1
|
|
637
|
-
<span
|
|
638
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
639
|
-
>
|
|
640
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
641
|
-
</span>
|
|
642
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
643
|
-
</a>
|
|
644
|
-
<button
|
|
645
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
646
|
-
type="button"
|
|
647
|
-
aria-label="Favorite"
|
|
648
|
-
>
|
|
649
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
650
|
-
</button>
|
|
651
|
-
</li>
|
|
652
|
-
<li
|
|
653
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
654
|
-
role="none"
|
|
655
|
-
>
|
|
656
|
-
<a
|
|
657
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
658
|
-
role="menuitem"
|
|
659
|
-
href="#"
|
|
660
|
-
target="_blank"
|
|
661
|
-
>
|
|
662
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
663
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
664
|
-
</span>
|
|
665
|
-
Link 2
|
|
666
|
-
<span
|
|
667
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
668
|
-
>
|
|
669
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
670
|
-
</span>
|
|
671
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
672
|
-
</a>
|
|
673
|
-
<button
|
|
674
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
675
|
-
type="button"
|
|
676
|
-
aria-label="Favorite"
|
|
677
|
-
>
|
|
678
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
679
|
-
</button>
|
|
680
|
-
</li>
|
|
681
|
-
</ul>
|
|
682
|
-
</section>
|
|
683
|
-
<hr class="pf-v6-c-divider" />
|
|
684
|
-
<section class="pf-v6-c-app-launcher__group">
|
|
685
|
-
<h1 class="pf-v6-c-app-launcher__group-title">Group 2</h1>
|
|
686
|
-
<ul role="menu">
|
|
687
|
-
<li
|
|
688
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
689
|
-
role="none"
|
|
690
|
-
>
|
|
691
|
-
<a
|
|
692
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
693
|
-
role="menuitem"
|
|
694
|
-
href="#"
|
|
695
|
-
target="_blank"
|
|
696
|
-
>
|
|
697
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
698
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
699
|
-
</span>
|
|
700
|
-
Link 3
|
|
701
|
-
<span
|
|
702
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
703
|
-
>
|
|
704
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
705
|
-
</span>
|
|
706
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
707
|
-
</a>
|
|
708
|
-
<button
|
|
709
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
710
|
-
type="button"
|
|
711
|
-
aria-label="Favorite"
|
|
712
|
-
>
|
|
713
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
714
|
-
</button>
|
|
715
|
-
</li>
|
|
716
|
-
<li
|
|
717
|
-
class="pf-v6-c-app-launcher__menu-wrapper pf-m-external"
|
|
718
|
-
role="none"
|
|
719
|
-
>
|
|
720
|
-
<a
|
|
721
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-link"
|
|
722
|
-
role="menuitem"
|
|
723
|
-
href="#"
|
|
724
|
-
target="_blank"
|
|
725
|
-
>
|
|
726
|
-
<span class="pf-v6-c-app-launcher__menu-item-icon">
|
|
727
|
-
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
728
|
-
</span>
|
|
729
|
-
Link 4
|
|
730
|
-
<span
|
|
731
|
-
class="pf-v6-c-app-launcher__menu-item-external-icon"
|
|
732
|
-
>
|
|
733
|
-
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
734
|
-
</span>
|
|
735
|
-
<span class="pf-v6-screen-reader">(opens new window)</span>
|
|
736
|
-
</a>
|
|
737
|
-
<button
|
|
738
|
-
class="pf-v6-c-app-launcher__menu-item pf-m-action"
|
|
739
|
-
type="button"
|
|
740
|
-
aria-label="Favorite"
|
|
741
|
-
>
|
|
742
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
743
|
-
</button>
|
|
744
|
-
</li>
|
|
745
|
-
</ul>
|
|
746
|
-
</section>
|
|
747
|
-
</div>
|
|
748
|
-
</nav>
|
|
749
|
-
|
|
750
|
-
```
|
|
751
|
-
|
|
752
|
-
## Documentation
|
|
753
|
-
|
|
754
|
-
### Accessibility
|
|
755
|
-
|
|
756
|
-
| Attribute | Applied | Outcome |
|
|
757
|
-
| -- | -- | -- |
|
|
758
|
-
| `aria-label="Application launcher"` | `.pf-v6-c-app-launcher` | Gives the app launcher element an accessible name. **Required** |
|
|
759
|
-
| `aria-expanded="false"` | `.pf-v6-c-button` | Indicates that the menu is hidden. |
|
|
760
|
-
| `aria-expanded="true"` | `.pf-v6-c-button` | Indicates that the menu is visible. |
|
|
761
|
-
| `aria-label="Actions"` | `.pf-v6-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
|
|
762
|
-
| `hidden` | `.pf-v6-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
|
|
763
|
-
| `disabled` | `.pf-v6-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
|
|
764
|
-
| `disabled` | `button.pf-v6-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
|
|
765
|
-
| `aria-disabled="true"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
|
|
766
|
-
| `tabindex="-1"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
|
|
767
|
-
| `aria-hidden="true"` | `.pf-v6-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
|
|
768
|
-
|
|
769
|
-
### Usage
|
|
770
|
-
|
|
771
|
-
| Class | Applied | Outcome |
|
|
772
|
-
| -- | -- | -- |
|
|
773
|
-
| `.pf-v6-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
|
|
774
|
-
| `.pf-v6-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
|
|
775
|
-
| `.pf-v6-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
|
|
776
|
-
| `.pf-v6-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
|
|
777
|
-
| `.pf-v6-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
|
|
778
|
-
| `.pf-v6-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
|
|
779
|
-
| `.pf-v6-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
|
|
780
|
-
| `.pf-v6-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
|
|
781
|
-
| `.pf-v6-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
|
|
782
|
-
| `.pf-v6-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
|
|
783
|
-
| `.pf-m-expanded` | `.pf-v6-c-app-launcher` | Modifies for the expanded state. |
|
|
784
|
-
| `.pf-m-top` | `.pf-v6-c-app-launcher` | Modifies to display the menu above the toggle. |
|
|
785
|
-
| `.pf-m-align-right` | `.pf-v6-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
|
|
786
|
-
| `.pf-m-static` | `.pf-v6-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
|
|
787
|
-
| `.pf-m-disabled` | `a.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
|
|
788
|
-
| `.pf-m-external` | `.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
|
|
789
|
-
| `.pf-m-favorite` | `.pf-v6-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
|
|
790
|
-
| `.pf-m-link` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item for link styles. |
|
|
791
|
-
| `.pf-m-action` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item to for action styles. |
|
|
792
|
-
| `.pf-m-active` | `.pf-v6-c-app-launcher__toggle` | Forces display of the active state of the toggle. |
|