@patternfly/patternfly 4.177.1 → 4.178.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/components/Nav/nav.css +3 -0
- package/components/Nav/nav.scss +4 -0
- package/docs/components/Nav/examples/Navigation.css +3 -1
- package/docs/components/Nav/examples/Navigation.md +79 -0
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +32 -2018
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -4
- package/docs/demos/Masthead/examples/Masthead.md +1643 -1026
- package/docs/demos/Nav/examples/Nav.md +8 -8
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +959 -7
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +1784 -16
- package/docs/demos/Tabs/examples/Tabs.md +8 -8
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +3 -0
- package/patternfly.css +3 -0
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -8,441 +8,62 @@ wrapperTag: div
|
|
|
8
8
|
### Basic
|
|
9
9
|
|
|
10
10
|
```html isFullscreen
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
aria-label="Global navigation"
|
|
17
|
-
>
|
|
18
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
19
|
-
</button>
|
|
20
|
-
</span>
|
|
21
|
-
<div class="pf-c-masthead__main">
|
|
22
|
-
<a class="pf-c-masthead__brand" href="#">
|
|
23
|
-
<picture
|
|
24
|
-
class="pf-c-brand pf-m-picture"
|
|
25
|
-
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
26
|
-
>
|
|
27
|
-
<source
|
|
28
|
-
media="(min-width: 768px)"
|
|
29
|
-
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
30
|
-
/>
|
|
31
|
-
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
32
|
-
<img
|
|
33
|
-
src="/assets/images/logo__pf--reverse--base.png"
|
|
34
|
-
alt="Fallback patternFly default logo"
|
|
35
|
-
/>
|
|
36
|
-
</picture>
|
|
37
|
-
</a>
|
|
38
|
-
</div>
|
|
39
|
-
<div class="pf-c-masthead__content">
|
|
40
|
-
<div
|
|
41
|
-
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
42
|
-
id="masthead-basic-example-toolbar"
|
|
43
|
-
>
|
|
44
|
-
<div class="pf-c-toolbar__content">
|
|
45
|
-
<div class="pf-c-toolbar__content-section">
|
|
46
|
-
<div class="pf-c-toolbar__group pf-m-align-right">
|
|
47
|
-
<div class="pf-c-toolbar__item">
|
|
48
|
-
<div class="pf-c-dropdown">
|
|
49
|
-
<button
|
|
50
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
51
|
-
id="masthead-basic-example-header-action-button"
|
|
52
|
-
aria-expanded="false"
|
|
53
|
-
type="button"
|
|
54
|
-
aria-label="Actions"
|
|
55
|
-
>
|
|
56
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
57
|
-
</button>
|
|
58
|
-
<ul
|
|
59
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
60
|
-
aria-labelledby="masthead-basic-example-header-action-button"
|
|
61
|
-
hidden
|
|
62
|
-
>
|
|
63
|
-
<li>
|
|
64
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
65
|
-
</li>
|
|
66
|
-
<li>
|
|
67
|
-
<button
|
|
68
|
-
class="pf-c-dropdown__menu-item"
|
|
69
|
-
type="button"
|
|
70
|
-
>Action</button>
|
|
71
|
-
</li>
|
|
72
|
-
<li>
|
|
73
|
-
<a
|
|
74
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
75
|
-
href="#"
|
|
76
|
-
aria-disabled="true"
|
|
77
|
-
tabindex="-1"
|
|
78
|
-
>Disabled link</a>
|
|
79
|
-
</li>
|
|
80
|
-
<li>
|
|
81
|
-
<button
|
|
82
|
-
class="pf-c-dropdown__menu-item"
|
|
83
|
-
type="button"
|
|
84
|
-
disabled
|
|
85
|
-
>Disabled action</button>
|
|
86
|
-
</li>
|
|
87
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
88
|
-
<li>
|
|
89
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
90
|
-
</li>
|
|
91
|
-
</ul>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
</header>
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
### With context selector and dropdown
|
|
11
|
+
<div class="pf-c-page" id="masthead-basic-example">
|
|
12
|
+
<a
|
|
13
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
14
|
+
href="#main-content-masthead-basic-example"
|
|
15
|
+
>Skip to content</a>
|
|
104
16
|
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
aria-label="Global navigation"
|
|
112
|
-
>
|
|
113
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
114
|
-
</button>
|
|
115
|
-
</span>
|
|
116
|
-
<div class="pf-c-masthead__main">
|
|
117
|
-
<a class="pf-c-masthead__brand" href="#">
|
|
118
|
-
<picture
|
|
119
|
-
class="pf-c-brand pf-m-picture"
|
|
120
|
-
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
17
|
+
<header class="pf-c-masthead" id="masthead-basic-example-masthead">
|
|
18
|
+
<span class="pf-c-masthead__toggle">
|
|
19
|
+
<button
|
|
20
|
+
class="pf-c-button pf-m-plain"
|
|
21
|
+
type="button"
|
|
22
|
+
aria-label="Global navigation"
|
|
121
23
|
>
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
<
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
<div class="pf-c-toolbar__item">
|
|
143
|
-
<div class="pf-c-context-selector pf-m-full-height">
|
|
144
|
-
<span
|
|
145
|
-
id="masthead-context-selecton-drilldown-example-context-selector-label"
|
|
146
|
-
hidden
|
|
147
|
-
>Selected project:</span>
|
|
148
|
-
<button
|
|
149
|
-
class="pf-c-context-selector__toggle"
|
|
150
|
-
aria-expanded="false"
|
|
151
|
-
id="masthead-context-selecton-drilldown-example-context-selector-toggle"
|
|
152
|
-
aria-labelledby="masthead-context-selecton-drilldown-example-context-selector-label masthead-context-selecton-drilldown-example-context-selector-toggle"
|
|
153
|
-
>
|
|
154
|
-
<span
|
|
155
|
-
class="pf-c-context-selector__toggle-text"
|
|
156
|
-
>Context selector</span>
|
|
157
|
-
<span class="pf-c-context-selector__toggle-icon">
|
|
158
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
159
|
-
</span>
|
|
160
|
-
</button>
|
|
161
|
-
<div class="pf-c-context-selector__menu" hidden>
|
|
162
|
-
<div class="pf-c-context-selector__menu-search">
|
|
163
|
-
<div class="pf-c-input-group">
|
|
164
|
-
<input
|
|
165
|
-
class="pf-c-form-control"
|
|
166
|
-
type="search"
|
|
167
|
-
placeholder="Search"
|
|
168
|
-
id="masthead-context-selecton-drilldown-example-context-selectortextInput1"
|
|
169
|
-
name="masthead-context-selecton-drilldown-example-context-selectortextInput1"
|
|
170
|
-
aria-labelledby="masthead-context-selecton-drilldown-example-context-selector-search-button"
|
|
171
|
-
/>
|
|
172
|
-
<button
|
|
173
|
-
class="pf-c-button pf-m-control"
|
|
174
|
-
type="button"
|
|
175
|
-
id="masthead-context-selecton-drilldown-example-context-selector-search-button"
|
|
176
|
-
aria-label="Search menu items"
|
|
177
|
-
>
|
|
178
|
-
<i class="fas fa-search" aria-hidden="true"></i>
|
|
179
|
-
</button>
|
|
180
|
-
</div>
|
|
181
|
-
</div>
|
|
182
|
-
<ul class="pf-c-context-selector__menu-list">
|
|
183
|
-
<li>
|
|
184
|
-
<a
|
|
185
|
-
class="pf-c-context-selector__menu-list-item"
|
|
186
|
-
href="#"
|
|
187
|
-
>Link</a>
|
|
188
|
-
</li>
|
|
189
|
-
<li>
|
|
190
|
-
<button
|
|
191
|
-
class="pf-c-context-selector__menu-list-item"
|
|
192
|
-
type="button"
|
|
193
|
-
>Action</button>
|
|
194
|
-
</li>
|
|
195
|
-
<li>
|
|
196
|
-
<a
|
|
197
|
-
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
198
|
-
href="#"
|
|
199
|
-
aria-disabled="true"
|
|
200
|
-
tabindex="-1"
|
|
201
|
-
>Disabled link</a>
|
|
202
|
-
</li>
|
|
203
|
-
<li>
|
|
204
|
-
<button
|
|
205
|
-
class="pf-c-context-selector__menu-list-item"
|
|
206
|
-
type="button"
|
|
207
|
-
disabled
|
|
208
|
-
>Disabled action</button>
|
|
209
|
-
</li>
|
|
210
|
-
<li>
|
|
211
|
-
<button
|
|
212
|
-
class="pf-c-context-selector__menu-list-item"
|
|
213
|
-
type="button"
|
|
214
|
-
>My project</button>
|
|
215
|
-
</li>
|
|
216
|
-
<li>
|
|
217
|
-
<button
|
|
218
|
-
class="pf-c-context-selector__menu-list-item"
|
|
219
|
-
type="button"
|
|
220
|
-
>OpenShift cluster</button>
|
|
221
|
-
</li>
|
|
222
|
-
<li>
|
|
223
|
-
<button
|
|
224
|
-
class="pf-c-context-selector__menu-list-item"
|
|
225
|
-
type="button"
|
|
226
|
-
>Production Ansible</button>
|
|
227
|
-
</li>
|
|
228
|
-
<li>
|
|
229
|
-
<button
|
|
230
|
-
class="pf-c-context-selector__menu-list-item"
|
|
231
|
-
type="button"
|
|
232
|
-
>AWS</button>
|
|
233
|
-
</li>
|
|
234
|
-
<li>
|
|
235
|
-
<button
|
|
236
|
-
class="pf-c-context-selector__menu-list-item"
|
|
237
|
-
type="button"
|
|
238
|
-
>Azure</button>
|
|
239
|
-
</li>
|
|
240
|
-
<li>
|
|
241
|
-
<button
|
|
242
|
-
class="pf-c-context-selector__menu-list-item"
|
|
243
|
-
type="button"
|
|
244
|
-
>My project</button>
|
|
245
|
-
</li>
|
|
246
|
-
<li>
|
|
247
|
-
<button
|
|
248
|
-
class="pf-c-context-selector__menu-list-item"
|
|
249
|
-
type="button"
|
|
250
|
-
>OpenShift cluster</button>
|
|
251
|
-
</li>
|
|
252
|
-
<li>
|
|
253
|
-
<button
|
|
254
|
-
class="pf-c-context-selector__menu-list-item"
|
|
255
|
-
type="button"
|
|
256
|
-
>Production Ansible</button>
|
|
257
|
-
</li>
|
|
258
|
-
<li>
|
|
259
|
-
<button
|
|
260
|
-
class="pf-c-context-selector__menu-list-item"
|
|
261
|
-
type="button"
|
|
262
|
-
>AWS</button>
|
|
263
|
-
</li>
|
|
264
|
-
<li>
|
|
265
|
-
<button
|
|
266
|
-
class="pf-c-context-selector__menu-list-item"
|
|
267
|
-
type="button"
|
|
268
|
-
>Azure</button>
|
|
269
|
-
</li>
|
|
270
|
-
</ul>
|
|
271
|
-
</div>
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-lg">
|
|
275
|
-
<div class="pf-c-dropdown pf-m-full-height">
|
|
276
|
-
<button
|
|
277
|
-
class="pf-c-dropdown__toggle"
|
|
278
|
-
id="dropdown-expanded-button"
|
|
279
|
-
aria-expanded="false"
|
|
280
|
-
type="button"
|
|
281
|
-
>
|
|
282
|
-
<span class="pf-c-dropdown__toggle-text">Dropdown</span>
|
|
283
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
284
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
285
|
-
</span>
|
|
286
|
-
</button>
|
|
287
|
-
<ul
|
|
288
|
-
class="pf-c-dropdown__menu"
|
|
289
|
-
aria-labelledby="dropdown-expanded-button"
|
|
290
|
-
hidden
|
|
291
|
-
>
|
|
292
|
-
<li>
|
|
293
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
294
|
-
</li>
|
|
295
|
-
<li>
|
|
296
|
-
<button
|
|
297
|
-
class="pf-c-dropdown__menu-item"
|
|
298
|
-
type="button"
|
|
299
|
-
>Action</button>
|
|
300
|
-
</li>
|
|
301
|
-
<li>
|
|
302
|
-
<a
|
|
303
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
304
|
-
href="#"
|
|
305
|
-
aria-disabled="true"
|
|
306
|
-
tabindex="-1"
|
|
307
|
-
>Disabled link</a>
|
|
308
|
-
</li>
|
|
309
|
-
<li>
|
|
310
|
-
<button
|
|
311
|
-
class="pf-c-dropdown__menu-item"
|
|
312
|
-
type="button"
|
|
313
|
-
disabled
|
|
314
|
-
>Disabled action</button>
|
|
315
|
-
</li>
|
|
316
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
317
|
-
<li>
|
|
318
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
319
|
-
</li>
|
|
320
|
-
</ul>
|
|
321
|
-
</div>
|
|
322
|
-
</div>
|
|
323
|
-
</div>
|
|
324
|
-
<div class="pf-c-toolbar__item pf-m-align-right">
|
|
325
|
-
<div class="pf-c-dropdown">
|
|
326
|
-
<button
|
|
327
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
328
|
-
id="masthead-context-selecton-drilldown-example-header-action-button"
|
|
329
|
-
aria-expanded="false"
|
|
330
|
-
type="button"
|
|
331
|
-
aria-label="Actions"
|
|
332
|
-
>
|
|
333
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
334
|
-
</button>
|
|
335
|
-
<ul
|
|
336
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
337
|
-
aria-labelledby="masthead-context-selecton-drilldown-example-header-action-button"
|
|
338
|
-
hidden
|
|
339
|
-
>
|
|
340
|
-
<li>
|
|
341
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
342
|
-
</li>
|
|
343
|
-
<li>
|
|
344
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
345
|
-
</li>
|
|
346
|
-
<li>
|
|
347
|
-
<a
|
|
348
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
349
|
-
href="#"
|
|
350
|
-
aria-disabled="true"
|
|
351
|
-
tabindex="-1"
|
|
352
|
-
>Disabled link</a>
|
|
353
|
-
</li>
|
|
354
|
-
<li>
|
|
355
|
-
<button
|
|
356
|
-
class="pf-c-dropdown__menu-item"
|
|
357
|
-
type="button"
|
|
358
|
-
disabled
|
|
359
|
-
>Disabled action</button>
|
|
360
|
-
</li>
|
|
361
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
362
|
-
<li>
|
|
363
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
364
|
-
</li>
|
|
365
|
-
</ul>
|
|
366
|
-
</div>
|
|
367
|
-
</div>
|
|
368
|
-
</div>
|
|
369
|
-
</div>
|
|
24
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
25
|
+
</button>
|
|
26
|
+
</span>
|
|
27
|
+
<div class="pf-c-masthead__main">
|
|
28
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
29
|
+
<picture
|
|
30
|
+
class="pf-c-brand pf-m-picture"
|
|
31
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
32
|
+
>
|
|
33
|
+
<source
|
|
34
|
+
media="(min-width: 768px)"
|
|
35
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
36
|
+
/>
|
|
37
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
38
|
+
<img
|
|
39
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
40
|
+
alt="Fallback patternFly default logo"
|
|
41
|
+
/>
|
|
42
|
+
</picture>
|
|
43
|
+
</a>
|
|
370
44
|
</div>
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
### With toolbar, filters
|
|
377
|
-
|
|
378
|
-
```html isFullscreen
|
|
379
|
-
<header class="pf-c-masthead" id="masthead-toolbar-filters-example">
|
|
380
|
-
<span class="pf-c-masthead__toggle">
|
|
381
|
-
<button
|
|
382
|
-
class="pf-c-button pf-m-plain"
|
|
383
|
-
type="button"
|
|
384
|
-
aria-label="Global navigation"
|
|
385
|
-
>
|
|
386
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
387
|
-
</button>
|
|
388
|
-
</span>
|
|
389
|
-
<div class="pf-c-masthead__main">
|
|
390
|
-
<a class="pf-c-masthead__brand" href="#">
|
|
391
|
-
<picture
|
|
392
|
-
class="pf-c-brand pf-m-picture"
|
|
393
|
-
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
45
|
+
<div class="pf-c-masthead__content">
|
|
46
|
+
<div
|
|
47
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
48
|
+
id="masthead-basic-example-masthead-toolbar"
|
|
394
49
|
>
|
|
395
|
-
<
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
400
|
-
<img
|
|
401
|
-
src="/assets/images/logo__pf--reverse--base.png"
|
|
402
|
-
alt="Fallback patternFly default logo"
|
|
403
|
-
/>
|
|
404
|
-
</picture>
|
|
405
|
-
</a>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="pf-c-masthead__content">
|
|
408
|
-
<div class="pf-c-toolbar pf-m-full-height pf-m-static">
|
|
409
|
-
<div class="pf-c-toolbar__content">
|
|
410
|
-
<div class="pf-c-toolbar__content-section">
|
|
411
|
-
<div
|
|
412
|
-
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
|
|
413
|
-
>
|
|
414
|
-
<div class="pf-c-toolbar__toggle">
|
|
415
|
-
<button
|
|
416
|
-
class="pf-c-button pf-m-plain"
|
|
417
|
-
type="button"
|
|
418
|
-
aria-label="Show filters"
|
|
419
|
-
aria-expanded="true"
|
|
420
|
-
aria-controls="-expandable-content"
|
|
421
|
-
>
|
|
422
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
423
|
-
</button>
|
|
424
|
-
</div>
|
|
425
|
-
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
426
|
-
<div
|
|
427
|
-
class="pf-c-input-group"
|
|
428
|
-
aria-label="search filter"
|
|
429
|
-
role="group"
|
|
430
|
-
>
|
|
50
|
+
<div class="pf-c-toolbar__content">
|
|
51
|
+
<div class="pf-c-toolbar__content-section">
|
|
52
|
+
<div class="pf-c-toolbar__group pf-m-align-right">
|
|
53
|
+
<div class="pf-c-toolbar__item">
|
|
431
54
|
<div class="pf-c-dropdown">
|
|
432
55
|
<button
|
|
433
|
-
class="pf-c-dropdown__toggle"
|
|
434
|
-
id="
|
|
56
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
57
|
+
id="masthead-basic-example-masthead-header-action-button"
|
|
435
58
|
aria-expanded="false"
|
|
436
59
|
type="button"
|
|
60
|
+
aria-label="Actions"
|
|
437
61
|
>
|
|
438
|
-
<
|
|
439
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
440
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
441
|
-
</span>
|
|
62
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
442
63
|
</button>
|
|
443
64
|
<ul
|
|
444
|
-
class="pf-c-dropdown__menu"
|
|
445
|
-
aria-labelledby="
|
|
65
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
66
|
+
aria-labelledby="masthead-basic-example-masthead-header-action-button"
|
|
446
67
|
hidden
|
|
447
68
|
>
|
|
448
69
|
<li>
|
|
@@ -478,261 +99,166 @@ wrapperTag: div
|
|
|
478
99
|
</li>
|
|
479
100
|
</ul>
|
|
480
101
|
</div>
|
|
481
|
-
<input
|
|
482
|
-
class="pf-c-form-control"
|
|
483
|
-
type="search"
|
|
484
|
-
id="-masthead-toolbar-filters-example-content-search-filter-input"
|
|
485
|
-
name="-search-filter-input"
|
|
486
|
-
aria-label="input with dropdown and button"
|
|
487
|
-
aria-describedby="-masthead-toolbar-filters-example-content-button"
|
|
488
|
-
/>
|
|
489
102
|
</div>
|
|
490
103
|
</div>
|
|
491
104
|
</div>
|
|
492
|
-
<div class="pf-c-toolbar__item">
|
|
493
|
-
<div class="pf-c-dropdown">
|
|
494
|
-
<button
|
|
495
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
496
|
-
id="masthead-toolbar-filters-example-header-action-button"
|
|
497
|
-
aria-expanded="false"
|
|
498
|
-
type="button"
|
|
499
|
-
aria-label="Actions"
|
|
500
|
-
>
|
|
501
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
502
|
-
</button>
|
|
503
|
-
<ul
|
|
504
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
505
|
-
aria-labelledby="masthead-toolbar-filters-example-header-action-button"
|
|
506
|
-
hidden
|
|
507
|
-
>
|
|
508
|
-
<li>
|
|
509
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
510
|
-
</li>
|
|
511
|
-
<li>
|
|
512
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
513
|
-
</li>
|
|
514
|
-
<li>
|
|
515
|
-
<a
|
|
516
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
517
|
-
href="#"
|
|
518
|
-
aria-disabled="true"
|
|
519
|
-
tabindex="-1"
|
|
520
|
-
>Disabled link</a>
|
|
521
|
-
</li>
|
|
522
|
-
<li>
|
|
523
|
-
<button
|
|
524
|
-
class="pf-c-dropdown__menu-item"
|
|
525
|
-
type="button"
|
|
526
|
-
disabled
|
|
527
|
-
>Disabled action</button>
|
|
528
|
-
</li>
|
|
529
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
530
|
-
<li>
|
|
531
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
532
|
-
</li>
|
|
533
|
-
</ul>
|
|
534
|
-
</div>
|
|
535
|
-
</div>
|
|
536
105
|
</div>
|
|
537
|
-
<div
|
|
538
|
-
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
539
|
-
id="-expandable-content"
|
|
540
|
-
hidden
|
|
541
|
-
></div>
|
|
542
106
|
</div>
|
|
543
107
|
</div>
|
|
108
|
+
</header>
|
|
109
|
+
<div class="pf-c-page__sidebar">
|
|
110
|
+
<div class="pf-c-page__sidebar-body">
|
|
111
|
+
<nav
|
|
112
|
+
class="pf-c-nav"
|
|
113
|
+
id="masthead-basic-example-primary-nav"
|
|
114
|
+
aria-label="Global"
|
|
115
|
+
>
|
|
116
|
+
<ul class="pf-c-nav__list">
|
|
117
|
+
<li class="pf-c-nav__item">
|
|
118
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
119
|
+
</li>
|
|
120
|
+
<li class="pf-c-nav__item">
|
|
121
|
+
<a
|
|
122
|
+
href="#"
|
|
123
|
+
class="pf-c-nav__link pf-m-current"
|
|
124
|
+
aria-current="page"
|
|
125
|
+
>Policy</a>
|
|
126
|
+
</li>
|
|
127
|
+
<li class="pf-c-nav__item">
|
|
128
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
129
|
+
</li>
|
|
130
|
+
<li class="pf-c-nav__item">
|
|
131
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="pf-c-nav__item">
|
|
134
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
135
|
+
</li>
|
|
136
|
+
</ul>
|
|
137
|
+
</nav>
|
|
138
|
+
</div>
|
|
544
139
|
</div>
|
|
545
|
-
|
|
140
|
+
<main
|
|
141
|
+
class="pf-c-page__main"
|
|
142
|
+
tabindex="-1"
|
|
143
|
+
id="main-content-masthead-basic-example"
|
|
144
|
+
>
|
|
145
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
146
|
+
<div class="pf-c-page__main-body">
|
|
147
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
148
|
+
<ol class="pf-c-breadcrumb__list">
|
|
149
|
+
<li class="pf-c-breadcrumb__item">
|
|
150
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
151
|
+
</li>
|
|
152
|
+
<li class="pf-c-breadcrumb__item">
|
|
153
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
154
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
155
|
+
</span>
|
|
546
156
|
|
|
547
|
-
|
|
157
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
158
|
+
</li>
|
|
159
|
+
<li class="pf-c-breadcrumb__item">
|
|
160
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
161
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
162
|
+
</span>
|
|
548
163
|
|
|
549
|
-
|
|
164
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
165
|
+
</li>
|
|
166
|
+
<li class="pf-c-breadcrumb__item">
|
|
167
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
168
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
169
|
+
</span>
|
|
550
170
|
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
</
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
>
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
alt="Fallback patternFly default logo"
|
|
576
|
-
/>
|
|
577
|
-
</picture>
|
|
578
|
-
</a>
|
|
579
|
-
</div>
|
|
580
|
-
<div class="pf-c-masthead__content">
|
|
581
|
-
<div
|
|
582
|
-
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
583
|
-
id="masthead-toggle-group-filters-example-toolbar"
|
|
584
|
-
>
|
|
585
|
-
<div class="pf-c-toolbar__content">
|
|
586
|
-
<div class="pf-c-toolbar__content-section">
|
|
587
|
-
<div
|
|
588
|
-
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-right"
|
|
589
|
-
>
|
|
590
|
-
<div class="pf-c-toolbar__toggle">
|
|
591
|
-
<button
|
|
592
|
-
class="pf-c-button pf-m-plain"
|
|
593
|
-
type="button"
|
|
594
|
-
aria-label="Show filters"
|
|
595
|
-
aria-expanded="true"
|
|
596
|
-
aria-controls="masthead-toggle-group-filters-example-toolbar-expandable-content"
|
|
597
|
-
>
|
|
598
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
599
|
-
</button>
|
|
171
|
+
<a
|
|
172
|
+
href="#"
|
|
173
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
174
|
+
aria-current="page"
|
|
175
|
+
>Section landing</a>
|
|
176
|
+
</li>
|
|
177
|
+
</ol>
|
|
178
|
+
</nav>
|
|
179
|
+
</div>
|
|
180
|
+
</section>
|
|
181
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
182
|
+
<div class="pf-c-page__main-body">
|
|
183
|
+
<div class="pf-c-content">
|
|
184
|
+
<h1>Main title</h1>
|
|
185
|
+
<p>This is a full page demo.</p>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</section>
|
|
189
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
190
|
+
<div class="pf-c-page__main-body">
|
|
191
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
192
|
+
<div class="pf-l-gallery__item">
|
|
193
|
+
<div class="pf-c-card">
|
|
194
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
600
195
|
</div>
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
role="group"
|
|
606
|
-
>
|
|
607
|
-
<div class="pf-c-dropdown">
|
|
608
|
-
<button
|
|
609
|
-
class="pf-c-dropdown__toggle"
|
|
610
|
-
id="masthead-toggle-group-filters-example-toolbar-masthead-toggle-group-filters-example-content-button"
|
|
611
|
-
aria-expanded="false"
|
|
612
|
-
type="button"
|
|
613
|
-
>
|
|
614
|
-
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
615
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
616
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
617
|
-
</span>
|
|
618
|
-
</button>
|
|
619
|
-
<ul
|
|
620
|
-
class="pf-c-dropdown__menu"
|
|
621
|
-
aria-labelledby="masthead-toggle-group-filters-example-toolbar-masthead-toggle-group-filters-example-content-button"
|
|
622
|
-
hidden
|
|
623
|
-
>
|
|
624
|
-
<li>
|
|
625
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
626
|
-
</li>
|
|
627
|
-
<li>
|
|
628
|
-
<button
|
|
629
|
-
class="pf-c-dropdown__menu-item"
|
|
630
|
-
type="button"
|
|
631
|
-
>Action</button>
|
|
632
|
-
</li>
|
|
633
|
-
<li>
|
|
634
|
-
<a
|
|
635
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
636
|
-
href="#"
|
|
637
|
-
aria-disabled="true"
|
|
638
|
-
tabindex="-1"
|
|
639
|
-
>Disabled link</a>
|
|
640
|
-
</li>
|
|
641
|
-
<li>
|
|
642
|
-
<button
|
|
643
|
-
class="pf-c-dropdown__menu-item"
|
|
644
|
-
type="button"
|
|
645
|
-
disabled
|
|
646
|
-
>Disabled action</button>
|
|
647
|
-
</li>
|
|
648
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
649
|
-
<li>
|
|
650
|
-
<a
|
|
651
|
-
class="pf-c-dropdown__menu-item"
|
|
652
|
-
href="#"
|
|
653
|
-
>Separated link</a>
|
|
654
|
-
</li>
|
|
655
|
-
</ul>
|
|
656
|
-
</div>
|
|
657
|
-
<input
|
|
658
|
-
class="pf-c-form-control"
|
|
659
|
-
type="search"
|
|
660
|
-
id="masthead-toggle-group-filters-example-toolbar-masthead-toggle-group-filters-example-content-search-filter-input"
|
|
661
|
-
name="masthead-toggle-group-filters-example-toolbar-search-filter-input"
|
|
662
|
-
aria-label="input with dropdown and button"
|
|
663
|
-
aria-describedby="masthead-toggle-group-filters-example-toolbar-masthead-toggle-group-filters-example-content-button"
|
|
664
|
-
/>
|
|
665
|
-
</div>
|
|
196
|
+
</div>
|
|
197
|
+
<div class="pf-l-gallery__item">
|
|
198
|
+
<div class="pf-c-card">
|
|
199
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
666
200
|
</div>
|
|
667
201
|
</div>
|
|
668
|
-
<div class="pf-
|
|
669
|
-
<div class="pf-c-
|
|
670
|
-
<
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
<li>
|
|
707
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
708
|
-
</li>
|
|
709
|
-
</ul>
|
|
202
|
+
<div class="pf-l-gallery__item">
|
|
203
|
+
<div class="pf-c-card">
|
|
204
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="pf-l-gallery__item">
|
|
208
|
+
<div class="pf-c-card">
|
|
209
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="pf-l-gallery__item">
|
|
213
|
+
<div class="pf-c-card">
|
|
214
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
<div class="pf-l-gallery__item">
|
|
218
|
+
<div class="pf-c-card">
|
|
219
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="pf-l-gallery__item">
|
|
223
|
+
<div class="pf-c-card">
|
|
224
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="pf-l-gallery__item">
|
|
228
|
+
<div class="pf-c-card">
|
|
229
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="pf-l-gallery__item">
|
|
233
|
+
<div class="pf-c-card">
|
|
234
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
235
|
+
</div>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="pf-l-gallery__item">
|
|
238
|
+
<div class="pf-c-card">
|
|
239
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
710
240
|
</div>
|
|
711
241
|
</div>
|
|
712
242
|
</div>
|
|
713
|
-
<div
|
|
714
|
-
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
715
|
-
id="masthead-toggle-group-filters-example-toolbar-expandable-content"
|
|
716
|
-
hidden
|
|
717
|
-
></div>
|
|
718
243
|
</div>
|
|
719
|
-
</
|
|
720
|
-
</
|
|
721
|
-
</
|
|
244
|
+
</section>
|
|
245
|
+
</main>
|
|
246
|
+
</div>
|
|
722
247
|
|
|
723
248
|
```
|
|
724
249
|
|
|
725
|
-
###
|
|
250
|
+
### With context selector and dropdown
|
|
726
251
|
|
|
727
252
|
```html isFullscreen
|
|
728
|
-
<div class="pf-c-page" id="masthead-
|
|
253
|
+
<div class="pf-c-page" id="masthead-context-selecton-drilldown-example">
|
|
729
254
|
<a
|
|
730
255
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
731
|
-
href="#masthead-
|
|
256
|
+
href="#main-content-masthead-context-selecton-drilldown-example"
|
|
732
257
|
>Skip to content</a>
|
|
258
|
+
|
|
733
259
|
<header
|
|
734
260
|
class="pf-c-masthead"
|
|
735
|
-
id="masthead-
|
|
261
|
+
id="masthead-context-selecton-drilldown-example-masthead"
|
|
736
262
|
>
|
|
737
263
|
<span class="pf-c-masthead__toggle">
|
|
738
264
|
<button
|
|
@@ -764,145 +290,1085 @@ wrapperTag: div
|
|
|
764
290
|
<div class="pf-c-masthead__content">
|
|
765
291
|
<div
|
|
766
292
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
767
|
-
id="masthead-
|
|
293
|
+
id="masthead-context-selecton-drilldown-example-masthead-toolbar"
|
|
768
294
|
>
|
|
769
295
|
<div class="pf-c-toolbar__content">
|
|
770
296
|
<div class="pf-c-toolbar__content-section">
|
|
771
|
-
<div
|
|
772
|
-
class="pf-c-toolbar__item"
|
|
773
|
-
|
|
774
|
-
>
|
|
775
|
-
<div class="pf-c-context-selector pf-m-full-height">
|
|
776
|
-
<span
|
|
777
|
-
id="masthead-advanced-with-menu-example-masthead-context-selector-label"
|
|
778
|
-
hidden
|
|
779
|
-
>Selected project:</span>
|
|
780
|
-
<button
|
|
781
|
-
class="pf-c-context-selector__toggle"
|
|
782
|
-
aria-expanded="false"
|
|
783
|
-
id="masthead-advanced-with-menu-example-masthead-context-selector-toggle"
|
|
784
|
-
aria-labelledby="masthead-advanced-with-menu-example-masthead-context-selector-label masthead-advanced-with-menu-example-masthead-context-selector-toggle"
|
|
785
|
-
>
|
|
297
|
+
<div class="pf-c-toolbar__group pf-m-filter-group">
|
|
298
|
+
<div class="pf-c-toolbar__item">
|
|
299
|
+
<div class="pf-c-context-selector pf-m-full-height">
|
|
786
300
|
<span
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
301
|
+
id="masthead-context-selecton-drilldown-example-masthead-context-selector-label"
|
|
302
|
+
hidden
|
|
303
|
+
>Selected project:</span>
|
|
304
|
+
<button
|
|
305
|
+
class="pf-c-context-selector__toggle"
|
|
306
|
+
aria-expanded="false"
|
|
307
|
+
id="masthead-context-selecton-drilldown-example-masthead-context-selector-toggle"
|
|
308
|
+
aria-labelledby="masthead-context-selecton-drilldown-example-masthead-context-selector-label masthead-context-selecton-drilldown-example-masthead-context-selector-toggle"
|
|
309
|
+
>
|
|
310
|
+
<span
|
|
311
|
+
class="pf-c-context-selector__toggle-text"
|
|
312
|
+
>Context selector</span>
|
|
313
|
+
<span class="pf-c-context-selector__toggle-icon">
|
|
314
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
315
|
+
</span>
|
|
316
|
+
</button>
|
|
317
|
+
<div class="pf-c-context-selector__menu" hidden>
|
|
318
|
+
<div class="pf-c-context-selector__menu-search">
|
|
319
|
+
<div class="pf-c-input-group">
|
|
320
|
+
<input
|
|
321
|
+
class="pf-c-form-control"
|
|
322
|
+
type="search"
|
|
323
|
+
placeholder="Search"
|
|
324
|
+
id="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
|
|
325
|
+
name="masthead-context-selecton-drilldown-example-masthead-context-selectortextInput1"
|
|
326
|
+
aria-labelledby="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
|
|
327
|
+
/>
|
|
328
|
+
<button
|
|
329
|
+
class="pf-c-button pf-m-control"
|
|
330
|
+
type="button"
|
|
331
|
+
id="masthead-context-selecton-drilldown-example-masthead-context-selector-search-button"
|
|
332
|
+
aria-label="Search menu items"
|
|
333
|
+
>
|
|
334
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
335
|
+
</button>
|
|
336
|
+
</div>
|
|
812
337
|
</div>
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
338
|
+
<ul class="pf-c-context-selector__menu-list">
|
|
339
|
+
<li>
|
|
340
|
+
<a
|
|
341
|
+
class="pf-c-context-selector__menu-list-item"
|
|
342
|
+
href="#"
|
|
343
|
+
>Link</a>
|
|
344
|
+
</li>
|
|
345
|
+
<li>
|
|
346
|
+
<button
|
|
347
|
+
class="pf-c-context-selector__menu-list-item"
|
|
348
|
+
type="button"
|
|
349
|
+
>Action</button>
|
|
350
|
+
</li>
|
|
351
|
+
<li>
|
|
352
|
+
<a
|
|
353
|
+
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
354
|
+
href="#"
|
|
355
|
+
aria-disabled="true"
|
|
356
|
+
tabindex="-1"
|
|
357
|
+
>Disabled link</a>
|
|
358
|
+
</li>
|
|
359
|
+
<li>
|
|
360
|
+
<button
|
|
361
|
+
class="pf-c-context-selector__menu-list-item"
|
|
362
|
+
type="button"
|
|
363
|
+
disabled
|
|
364
|
+
>Disabled action</button>
|
|
365
|
+
</li>
|
|
366
|
+
<li>
|
|
367
|
+
<button
|
|
368
|
+
class="pf-c-context-selector__menu-list-item"
|
|
369
|
+
type="button"
|
|
370
|
+
>My project</button>
|
|
371
|
+
</li>
|
|
372
|
+
<li>
|
|
373
|
+
<button
|
|
374
|
+
class="pf-c-context-selector__menu-list-item"
|
|
375
|
+
type="button"
|
|
376
|
+
>OpenShift cluster</button>
|
|
377
|
+
</li>
|
|
378
|
+
<li>
|
|
379
|
+
<button
|
|
380
|
+
class="pf-c-context-selector__menu-list-item"
|
|
381
|
+
type="button"
|
|
382
|
+
>Production Ansible</button>
|
|
383
|
+
</li>
|
|
384
|
+
<li>
|
|
385
|
+
<button
|
|
386
|
+
class="pf-c-context-selector__menu-list-item"
|
|
387
|
+
type="button"
|
|
388
|
+
>AWS</button>
|
|
389
|
+
</li>
|
|
390
|
+
<li>
|
|
391
|
+
<button
|
|
392
|
+
class="pf-c-context-selector__menu-list-item"
|
|
393
|
+
type="button"
|
|
394
|
+
>Azure</button>
|
|
395
|
+
</li>
|
|
396
|
+
<li>
|
|
397
|
+
<button
|
|
398
|
+
class="pf-c-context-selector__menu-list-item"
|
|
399
|
+
type="button"
|
|
400
|
+
>My project</button>
|
|
401
|
+
</li>
|
|
402
|
+
<li>
|
|
403
|
+
<button
|
|
404
|
+
class="pf-c-context-selector__menu-list-item"
|
|
405
|
+
type="button"
|
|
406
|
+
>OpenShift cluster</button>
|
|
407
|
+
</li>
|
|
408
|
+
<li>
|
|
409
|
+
<button
|
|
410
|
+
class="pf-c-context-selector__menu-list-item"
|
|
411
|
+
type="button"
|
|
412
|
+
>Production Ansible</button>
|
|
413
|
+
</li>
|
|
414
|
+
<li>
|
|
415
|
+
<button
|
|
416
|
+
class="pf-c-context-selector__menu-list-item"
|
|
417
|
+
type="button"
|
|
418
|
+
>AWS</button>
|
|
419
|
+
</li>
|
|
420
|
+
<li>
|
|
421
|
+
<button
|
|
422
|
+
class="pf-c-context-selector__menu-list-item"
|
|
423
|
+
type="button"
|
|
424
|
+
>Azure</button>
|
|
425
|
+
</li>
|
|
426
|
+
</ul>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-lg">
|
|
431
|
+
<div class="pf-c-dropdown pf-m-full-height">
|
|
432
|
+
<button
|
|
433
|
+
class="pf-c-dropdown__toggle"
|
|
434
|
+
id="dropdown-expanded-button"
|
|
435
|
+
aria-expanded="false"
|
|
436
|
+
type="button"
|
|
437
|
+
>
|
|
438
|
+
<span class="pf-c-dropdown__toggle-text">Dropdown</span>
|
|
439
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
440
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
441
|
+
</span>
|
|
442
|
+
</button>
|
|
443
|
+
<ul
|
|
444
|
+
class="pf-c-dropdown__menu"
|
|
445
|
+
aria-labelledby="dropdown-expanded-button"
|
|
446
|
+
hidden
|
|
447
|
+
>
|
|
872
448
|
<li>
|
|
873
|
-
<
|
|
874
|
-
class="pf-c-context-selector__menu-list-item"
|
|
875
|
-
type="button"
|
|
876
|
-
>My project</button>
|
|
449
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
877
450
|
</li>
|
|
878
451
|
<li>
|
|
879
452
|
<button
|
|
880
|
-
class="pf-c-
|
|
453
|
+
class="pf-c-dropdown__menu-item"
|
|
881
454
|
type="button"
|
|
882
|
-
>
|
|
455
|
+
>Action</button>
|
|
883
456
|
</li>
|
|
884
457
|
<li>
|
|
885
|
-
<
|
|
886
|
-
class="pf-c-
|
|
887
|
-
|
|
888
|
-
|
|
458
|
+
<a
|
|
459
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
460
|
+
href="#"
|
|
461
|
+
aria-disabled="true"
|
|
462
|
+
tabindex="-1"
|
|
463
|
+
>Disabled link</a>
|
|
889
464
|
</li>
|
|
890
465
|
<li>
|
|
891
466
|
<button
|
|
892
|
-
class="pf-c-
|
|
467
|
+
class="pf-c-dropdown__menu-item"
|
|
893
468
|
type="button"
|
|
894
|
-
|
|
469
|
+
disabled
|
|
470
|
+
>Disabled action</button>
|
|
895
471
|
</li>
|
|
472
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
896
473
|
<li>
|
|
897
|
-
<
|
|
898
|
-
class="pf-c-
|
|
899
|
-
|
|
900
|
-
>
|
|
474
|
+
<a
|
|
475
|
+
class="pf-c-dropdown__menu-item"
|
|
476
|
+
href="#"
|
|
477
|
+
>Separated link</a>
|
|
901
478
|
</li>
|
|
902
479
|
</ul>
|
|
903
480
|
</div>
|
|
904
481
|
</div>
|
|
905
482
|
</div>
|
|
483
|
+
<div class="pf-c-toolbar__item pf-m-align-right">
|
|
484
|
+
<div class="pf-c-dropdown">
|
|
485
|
+
<button
|
|
486
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
487
|
+
id="masthead-context-selecton-drilldown-example-masthead-header-action-button"
|
|
488
|
+
aria-expanded="false"
|
|
489
|
+
type="button"
|
|
490
|
+
aria-label="Actions"
|
|
491
|
+
>
|
|
492
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
493
|
+
</button>
|
|
494
|
+
<ul
|
|
495
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
496
|
+
aria-labelledby="masthead-context-selecton-drilldown-example-masthead-header-action-button"
|
|
497
|
+
hidden
|
|
498
|
+
>
|
|
499
|
+
<li>
|
|
500
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
501
|
+
</li>
|
|
502
|
+
<li>
|
|
503
|
+
<button
|
|
504
|
+
class="pf-c-dropdown__menu-item"
|
|
505
|
+
type="button"
|
|
506
|
+
>Action</button>
|
|
507
|
+
</li>
|
|
508
|
+
<li>
|
|
509
|
+
<a
|
|
510
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
511
|
+
href="#"
|
|
512
|
+
aria-disabled="true"
|
|
513
|
+
tabindex="-1"
|
|
514
|
+
>Disabled link</a>
|
|
515
|
+
</li>
|
|
516
|
+
<li>
|
|
517
|
+
<button
|
|
518
|
+
class="pf-c-dropdown__menu-item"
|
|
519
|
+
type="button"
|
|
520
|
+
disabled
|
|
521
|
+
>Disabled action</button>
|
|
522
|
+
</li>
|
|
523
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
524
|
+
<li>
|
|
525
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
526
|
+
</li>
|
|
527
|
+
</ul>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
</div>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
</header>
|
|
535
|
+
<div class="pf-c-page__sidebar">
|
|
536
|
+
<div class="pf-c-page__sidebar-body">
|
|
537
|
+
<nav
|
|
538
|
+
class="pf-c-nav"
|
|
539
|
+
id="masthead-context-selecton-drilldown-example-primary-nav"
|
|
540
|
+
aria-label="Global"
|
|
541
|
+
>
|
|
542
|
+
<ul class="pf-c-nav__list">
|
|
543
|
+
<li class="pf-c-nav__item">
|
|
544
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
545
|
+
</li>
|
|
546
|
+
<li class="pf-c-nav__item">
|
|
547
|
+
<a
|
|
548
|
+
href="#"
|
|
549
|
+
class="pf-c-nav__link pf-m-current"
|
|
550
|
+
aria-current="page"
|
|
551
|
+
>Policy</a>
|
|
552
|
+
</li>
|
|
553
|
+
<li class="pf-c-nav__item">
|
|
554
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
555
|
+
</li>
|
|
556
|
+
<li class="pf-c-nav__item">
|
|
557
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
558
|
+
</li>
|
|
559
|
+
<li class="pf-c-nav__item">
|
|
560
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
561
|
+
</li>
|
|
562
|
+
</ul>
|
|
563
|
+
</nav>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
<main
|
|
567
|
+
class="pf-c-page__main"
|
|
568
|
+
tabindex="-1"
|
|
569
|
+
id="main-content-masthead-context-selecton-drilldown-example"
|
|
570
|
+
>
|
|
571
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
572
|
+
<div class="pf-c-page__main-body">
|
|
573
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
574
|
+
<ol class="pf-c-breadcrumb__list">
|
|
575
|
+
<li class="pf-c-breadcrumb__item">
|
|
576
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
577
|
+
</li>
|
|
578
|
+
<li class="pf-c-breadcrumb__item">
|
|
579
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
580
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
581
|
+
</span>
|
|
582
|
+
|
|
583
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
584
|
+
</li>
|
|
585
|
+
<li class="pf-c-breadcrumb__item">
|
|
586
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
587
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
588
|
+
</span>
|
|
589
|
+
|
|
590
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
591
|
+
</li>
|
|
592
|
+
<li class="pf-c-breadcrumb__item">
|
|
593
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
594
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
595
|
+
</span>
|
|
596
|
+
|
|
597
|
+
<a
|
|
598
|
+
href="#"
|
|
599
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
600
|
+
aria-current="page"
|
|
601
|
+
>Section landing</a>
|
|
602
|
+
</li>
|
|
603
|
+
</ol>
|
|
604
|
+
</nav>
|
|
605
|
+
</div>
|
|
606
|
+
</section>
|
|
607
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
608
|
+
<div class="pf-c-page__main-body">
|
|
609
|
+
<div class="pf-c-content">
|
|
610
|
+
<h1>Main title</h1>
|
|
611
|
+
<p>This is a full page demo.</p>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</section>
|
|
615
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
616
|
+
<div class="pf-c-page__main-body">
|
|
617
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
618
|
+
<div class="pf-l-gallery__item">
|
|
619
|
+
<div class="pf-c-card">
|
|
620
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
621
|
+
</div>
|
|
622
|
+
</div>
|
|
623
|
+
<div class="pf-l-gallery__item">
|
|
624
|
+
<div class="pf-c-card">
|
|
625
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
<div class="pf-l-gallery__item">
|
|
629
|
+
<div class="pf-c-card">
|
|
630
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
<div class="pf-l-gallery__item">
|
|
634
|
+
<div class="pf-c-card">
|
|
635
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
636
|
+
</div>
|
|
637
|
+
</div>
|
|
638
|
+
<div class="pf-l-gallery__item">
|
|
639
|
+
<div class="pf-c-card">
|
|
640
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
641
|
+
</div>
|
|
642
|
+
</div>
|
|
643
|
+
<div class="pf-l-gallery__item">
|
|
644
|
+
<div class="pf-c-card">
|
|
645
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
646
|
+
</div>
|
|
647
|
+
</div>
|
|
648
|
+
<div class="pf-l-gallery__item">
|
|
649
|
+
<div class="pf-c-card">
|
|
650
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
651
|
+
</div>
|
|
652
|
+
</div>
|
|
653
|
+
<div class="pf-l-gallery__item">
|
|
654
|
+
<div class="pf-c-card">
|
|
655
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
656
|
+
</div>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="pf-l-gallery__item">
|
|
659
|
+
<div class="pf-c-card">
|
|
660
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
<div class="pf-l-gallery__item">
|
|
664
|
+
<div class="pf-c-card">
|
|
665
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</section>
|
|
671
|
+
</main>
|
|
672
|
+
</div>
|
|
673
|
+
|
|
674
|
+
```
|
|
675
|
+
|
|
676
|
+
### With toolbar, filters
|
|
677
|
+
|
|
678
|
+
```html isFullscreen
|
|
679
|
+
<div class="pf-c-page" id="masthead-toolbar-filters-example">
|
|
680
|
+
<a
|
|
681
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
682
|
+
href="#main-content-masthead-toolbar-filters-example"
|
|
683
|
+
>Skip to content</a>
|
|
684
|
+
|
|
685
|
+
<header class="pf-c-masthead" id="masthead-toolbar-filters-example-masthead">
|
|
686
|
+
<span class="pf-c-masthead__toggle">
|
|
687
|
+
<button
|
|
688
|
+
class="pf-c-button pf-m-plain"
|
|
689
|
+
type="button"
|
|
690
|
+
aria-label="Global navigation"
|
|
691
|
+
>
|
|
692
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
693
|
+
</button>
|
|
694
|
+
</span>
|
|
695
|
+
<div class="pf-c-masthead__main">
|
|
696
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
697
|
+
<picture
|
|
698
|
+
class="pf-c-brand pf-m-picture"
|
|
699
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
700
|
+
>
|
|
701
|
+
<source
|
|
702
|
+
media="(min-width: 768px)"
|
|
703
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
704
|
+
/>
|
|
705
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
706
|
+
<img
|
|
707
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
708
|
+
alt="Fallback patternFly default logo"
|
|
709
|
+
/>
|
|
710
|
+
</picture>
|
|
711
|
+
</a>
|
|
712
|
+
</div>
|
|
713
|
+
<div class="pf-c-masthead__content">
|
|
714
|
+
<div
|
|
715
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
716
|
+
id="masthead-toolbar-filters-example-masthead-toolbar"
|
|
717
|
+
>
|
|
718
|
+
<div class="pf-c-toolbar__content">
|
|
719
|
+
<div class="pf-c-toolbar__content-section">
|
|
720
|
+
<div
|
|
721
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
|
|
722
|
+
>
|
|
723
|
+
<div class="pf-c-toolbar__toggle">
|
|
724
|
+
<button
|
|
725
|
+
class="pf-c-button pf-m-plain"
|
|
726
|
+
type="button"
|
|
727
|
+
aria-label="Show filters"
|
|
728
|
+
aria-expanded="true"
|
|
729
|
+
aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
|
|
730
|
+
>
|
|
731
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
732
|
+
</button>
|
|
733
|
+
</div>
|
|
734
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
735
|
+
<div
|
|
736
|
+
class="pf-c-input-group"
|
|
737
|
+
aria-label="search filter"
|
|
738
|
+
role="group"
|
|
739
|
+
>
|
|
740
|
+
<div class="pf-c-dropdown">
|
|
741
|
+
<button
|
|
742
|
+
class="pf-c-dropdown__toggle"
|
|
743
|
+
id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
|
|
744
|
+
aria-expanded="false"
|
|
745
|
+
type="button"
|
|
746
|
+
>
|
|
747
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
748
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
749
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
750
|
+
</span>
|
|
751
|
+
</button>
|
|
752
|
+
<ul
|
|
753
|
+
class="pf-c-dropdown__menu"
|
|
754
|
+
aria-labelledby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
|
|
755
|
+
hidden
|
|
756
|
+
>
|
|
757
|
+
<li>
|
|
758
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
759
|
+
</li>
|
|
760
|
+
<li>
|
|
761
|
+
<button
|
|
762
|
+
class="pf-c-dropdown__menu-item"
|
|
763
|
+
type="button"
|
|
764
|
+
>Action</button>
|
|
765
|
+
</li>
|
|
766
|
+
<li>
|
|
767
|
+
<a
|
|
768
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
769
|
+
href="#"
|
|
770
|
+
aria-disabled="true"
|
|
771
|
+
tabindex="-1"
|
|
772
|
+
>Disabled link</a>
|
|
773
|
+
</li>
|
|
774
|
+
<li>
|
|
775
|
+
<button
|
|
776
|
+
class="pf-c-dropdown__menu-item"
|
|
777
|
+
type="button"
|
|
778
|
+
disabled
|
|
779
|
+
>Disabled action</button>
|
|
780
|
+
</li>
|
|
781
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
782
|
+
<li>
|
|
783
|
+
<a
|
|
784
|
+
class="pf-c-dropdown__menu-item"
|
|
785
|
+
href="#"
|
|
786
|
+
>Separated link</a>
|
|
787
|
+
</li>
|
|
788
|
+
</ul>
|
|
789
|
+
</div>
|
|
790
|
+
<input
|
|
791
|
+
class="pf-c-form-control"
|
|
792
|
+
type="search"
|
|
793
|
+
id="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-search-filter-input"
|
|
794
|
+
name="masthead-toolbar-filters-example-masthead-toolbar-search-filter-input"
|
|
795
|
+
aria-label="input with dropdown and button"
|
|
796
|
+
aria-describedby="masthead-toolbar-filters-example-masthead-toolbar-masthead-toolbar-filters-example-masthead-content-button"
|
|
797
|
+
/>
|
|
798
|
+
</div>
|
|
799
|
+
</div>
|
|
800
|
+
</div>
|
|
801
|
+
<div class="pf-c-toolbar__item">
|
|
802
|
+
<div class="pf-c-dropdown">
|
|
803
|
+
<button
|
|
804
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
805
|
+
id="masthead-toolbar-filters-example-masthead-header-action-button"
|
|
806
|
+
aria-expanded="false"
|
|
807
|
+
type="button"
|
|
808
|
+
aria-label="Actions"
|
|
809
|
+
>
|
|
810
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
811
|
+
</button>
|
|
812
|
+
<ul
|
|
813
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
814
|
+
aria-labelledby="masthead-toolbar-filters-example-masthead-header-action-button"
|
|
815
|
+
hidden
|
|
816
|
+
>
|
|
817
|
+
<li>
|
|
818
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
819
|
+
</li>
|
|
820
|
+
<li>
|
|
821
|
+
<button
|
|
822
|
+
class="pf-c-dropdown__menu-item"
|
|
823
|
+
type="button"
|
|
824
|
+
>Action</button>
|
|
825
|
+
</li>
|
|
826
|
+
<li>
|
|
827
|
+
<a
|
|
828
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
829
|
+
href="#"
|
|
830
|
+
aria-disabled="true"
|
|
831
|
+
tabindex="-1"
|
|
832
|
+
>Disabled link</a>
|
|
833
|
+
</li>
|
|
834
|
+
<li>
|
|
835
|
+
<button
|
|
836
|
+
class="pf-c-dropdown__menu-item"
|
|
837
|
+
type="button"
|
|
838
|
+
disabled
|
|
839
|
+
>Disabled action</button>
|
|
840
|
+
</li>
|
|
841
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
842
|
+
<li>
|
|
843
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
844
|
+
</li>
|
|
845
|
+
</ul>
|
|
846
|
+
</div>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
<div
|
|
850
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
851
|
+
id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
|
|
852
|
+
hidden
|
|
853
|
+
></div>
|
|
854
|
+
</div>
|
|
855
|
+
</div>
|
|
856
|
+
</div>
|
|
857
|
+
</header>
|
|
858
|
+
<div class="pf-c-page__sidebar">
|
|
859
|
+
<div class="pf-c-page__sidebar-body">
|
|
860
|
+
<nav
|
|
861
|
+
class="pf-c-nav"
|
|
862
|
+
id="masthead-toolbar-filters-example-primary-nav"
|
|
863
|
+
aria-label="Global"
|
|
864
|
+
>
|
|
865
|
+
<ul class="pf-c-nav__list">
|
|
866
|
+
<li class="pf-c-nav__item">
|
|
867
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
868
|
+
</li>
|
|
869
|
+
<li class="pf-c-nav__item">
|
|
870
|
+
<a
|
|
871
|
+
href="#"
|
|
872
|
+
class="pf-c-nav__link pf-m-current"
|
|
873
|
+
aria-current="page"
|
|
874
|
+
>Policy</a>
|
|
875
|
+
</li>
|
|
876
|
+
<li class="pf-c-nav__item">
|
|
877
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
878
|
+
</li>
|
|
879
|
+
<li class="pf-c-nav__item">
|
|
880
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
881
|
+
</li>
|
|
882
|
+
<li class="pf-c-nav__item">
|
|
883
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
884
|
+
</li>
|
|
885
|
+
</ul>
|
|
886
|
+
</nav>
|
|
887
|
+
</div>
|
|
888
|
+
</div>
|
|
889
|
+
<main
|
|
890
|
+
class="pf-c-page__main"
|
|
891
|
+
tabindex="-1"
|
|
892
|
+
id="main-content-masthead-toolbar-filters-example"
|
|
893
|
+
>
|
|
894
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
895
|
+
<div class="pf-c-page__main-body">
|
|
896
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
897
|
+
<ol class="pf-c-breadcrumb__list">
|
|
898
|
+
<li class="pf-c-breadcrumb__item">
|
|
899
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
900
|
+
</li>
|
|
901
|
+
<li class="pf-c-breadcrumb__item">
|
|
902
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
903
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
904
|
+
</span>
|
|
905
|
+
|
|
906
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
907
|
+
</li>
|
|
908
|
+
<li class="pf-c-breadcrumb__item">
|
|
909
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
910
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
911
|
+
</span>
|
|
912
|
+
|
|
913
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
914
|
+
</li>
|
|
915
|
+
<li class="pf-c-breadcrumb__item">
|
|
916
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
917
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
918
|
+
</span>
|
|
919
|
+
|
|
920
|
+
<a
|
|
921
|
+
href="#"
|
|
922
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
923
|
+
aria-current="page"
|
|
924
|
+
>Section landing</a>
|
|
925
|
+
</li>
|
|
926
|
+
</ol>
|
|
927
|
+
</nav>
|
|
928
|
+
</div>
|
|
929
|
+
</section>
|
|
930
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
931
|
+
<div class="pf-c-page__main-body">
|
|
932
|
+
<div class="pf-c-content">
|
|
933
|
+
<h1>Main title</h1>
|
|
934
|
+
<p>This is a full page demo.</p>
|
|
935
|
+
</div>
|
|
936
|
+
</div>
|
|
937
|
+
</section>
|
|
938
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
939
|
+
<div class="pf-c-page__main-body">
|
|
940
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
941
|
+
<div class="pf-l-gallery__item">
|
|
942
|
+
<div class="pf-c-card">
|
|
943
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
944
|
+
</div>
|
|
945
|
+
</div>
|
|
946
|
+
<div class="pf-l-gallery__item">
|
|
947
|
+
<div class="pf-c-card">
|
|
948
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
949
|
+
</div>
|
|
950
|
+
</div>
|
|
951
|
+
<div class="pf-l-gallery__item">
|
|
952
|
+
<div class="pf-c-card">
|
|
953
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
954
|
+
</div>
|
|
955
|
+
</div>
|
|
956
|
+
<div class="pf-l-gallery__item">
|
|
957
|
+
<div class="pf-c-card">
|
|
958
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
959
|
+
</div>
|
|
960
|
+
</div>
|
|
961
|
+
<div class="pf-l-gallery__item">
|
|
962
|
+
<div class="pf-c-card">
|
|
963
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
964
|
+
</div>
|
|
965
|
+
</div>
|
|
966
|
+
<div class="pf-l-gallery__item">
|
|
967
|
+
<div class="pf-c-card">
|
|
968
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
969
|
+
</div>
|
|
970
|
+
</div>
|
|
971
|
+
<div class="pf-l-gallery__item">
|
|
972
|
+
<div class="pf-c-card">
|
|
973
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
974
|
+
</div>
|
|
975
|
+
</div>
|
|
976
|
+
<div class="pf-l-gallery__item">
|
|
977
|
+
<div class="pf-c-card">
|
|
978
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
979
|
+
</div>
|
|
980
|
+
</div>
|
|
981
|
+
<div class="pf-l-gallery__item">
|
|
982
|
+
<div class="pf-c-card">
|
|
983
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
984
|
+
</div>
|
|
985
|
+
</div>
|
|
986
|
+
<div class="pf-l-gallery__item">
|
|
987
|
+
<div class="pf-c-card">
|
|
988
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
989
|
+
</div>
|
|
990
|
+
</div>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
</section>
|
|
994
|
+
</main>
|
|
995
|
+
</div>
|
|
996
|
+
|
|
997
|
+
```
|
|
998
|
+
|
|
999
|
+
### With toggle group and filters
|
|
1000
|
+
|
|
1001
|
+
```html isFullscreen
|
|
1002
|
+
<div class="pf-c-page" id="masthead-toggle-group-filters-example">
|
|
1003
|
+
<a
|
|
1004
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1005
|
+
href="#main-content-masthead-toggle-group-filters-example"
|
|
1006
|
+
>Skip to content</a>
|
|
1007
|
+
|
|
1008
|
+
<header
|
|
1009
|
+
class="pf-c-masthead"
|
|
1010
|
+
id="masthead-toggle-group-filters-example-masthead"
|
|
1011
|
+
>
|
|
1012
|
+
<span class="pf-c-masthead__toggle">
|
|
1013
|
+
<button
|
|
1014
|
+
class="pf-c-button pf-m-plain"
|
|
1015
|
+
type="button"
|
|
1016
|
+
aria-label="Global navigation"
|
|
1017
|
+
>
|
|
1018
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1019
|
+
</button>
|
|
1020
|
+
</span>
|
|
1021
|
+
<div class="pf-c-masthead__main">
|
|
1022
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1023
|
+
<picture
|
|
1024
|
+
class="pf-c-brand pf-m-picture"
|
|
1025
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1026
|
+
>
|
|
1027
|
+
<source
|
|
1028
|
+
media="(min-width: 768px)"
|
|
1029
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1030
|
+
/>
|
|
1031
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1032
|
+
<img
|
|
1033
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1034
|
+
alt="Fallback patternFly default logo"
|
|
1035
|
+
/>
|
|
1036
|
+
</picture>
|
|
1037
|
+
</a>
|
|
1038
|
+
</div>
|
|
1039
|
+
<div class="pf-c-masthead__content">
|
|
1040
|
+
<div
|
|
1041
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1042
|
+
id="masthead-toggle-group-filters-example-masthead-toolbar"
|
|
1043
|
+
>
|
|
1044
|
+
<div class="pf-c-toolbar__content">
|
|
1045
|
+
<div class="pf-c-toolbar__content-section">
|
|
1046
|
+
<div
|
|
1047
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-right"
|
|
1048
|
+
>
|
|
1049
|
+
<div class="pf-c-toolbar__toggle">
|
|
1050
|
+
<button
|
|
1051
|
+
class="pf-c-button pf-m-plain"
|
|
1052
|
+
type="button"
|
|
1053
|
+
aria-label="Show filters"
|
|
1054
|
+
aria-expanded="true"
|
|
1055
|
+
aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
|
|
1056
|
+
>
|
|
1057
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
1058
|
+
</button>
|
|
1059
|
+
</div>
|
|
1060
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
1061
|
+
<div
|
|
1062
|
+
class="pf-c-input-group"
|
|
1063
|
+
aria-label="search filter"
|
|
1064
|
+
role="group"
|
|
1065
|
+
>
|
|
1066
|
+
<div class="pf-c-dropdown">
|
|
1067
|
+
<button
|
|
1068
|
+
class="pf-c-dropdown__toggle"
|
|
1069
|
+
id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
|
|
1070
|
+
aria-expanded="false"
|
|
1071
|
+
type="button"
|
|
1072
|
+
>
|
|
1073
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
1074
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1075
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1076
|
+
</span>
|
|
1077
|
+
</button>
|
|
1078
|
+
<ul
|
|
1079
|
+
class="pf-c-dropdown__menu"
|
|
1080
|
+
aria-labelledby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
|
|
1081
|
+
hidden
|
|
1082
|
+
>
|
|
1083
|
+
<li>
|
|
1084
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1085
|
+
</li>
|
|
1086
|
+
<li>
|
|
1087
|
+
<button
|
|
1088
|
+
class="pf-c-dropdown__menu-item"
|
|
1089
|
+
type="button"
|
|
1090
|
+
>Action</button>
|
|
1091
|
+
</li>
|
|
1092
|
+
<li>
|
|
1093
|
+
<a
|
|
1094
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1095
|
+
href="#"
|
|
1096
|
+
aria-disabled="true"
|
|
1097
|
+
tabindex="-1"
|
|
1098
|
+
>Disabled link</a>
|
|
1099
|
+
</li>
|
|
1100
|
+
<li>
|
|
1101
|
+
<button
|
|
1102
|
+
class="pf-c-dropdown__menu-item"
|
|
1103
|
+
type="button"
|
|
1104
|
+
disabled
|
|
1105
|
+
>Disabled action</button>
|
|
1106
|
+
</li>
|
|
1107
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1108
|
+
<li>
|
|
1109
|
+
<a
|
|
1110
|
+
class="pf-c-dropdown__menu-item"
|
|
1111
|
+
href="#"
|
|
1112
|
+
>Separated link</a>
|
|
1113
|
+
</li>
|
|
1114
|
+
</ul>
|
|
1115
|
+
</div>
|
|
1116
|
+
<input
|
|
1117
|
+
class="pf-c-form-control"
|
|
1118
|
+
type="search"
|
|
1119
|
+
id="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-search-filter-input"
|
|
1120
|
+
name="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-input"
|
|
1121
|
+
aria-label="input with dropdown and button"
|
|
1122
|
+
aria-describedby="masthead-toggle-group-filters-example-masthead-toolbar-masthead-toggle-group-filters-example-masthead-content-button"
|
|
1123
|
+
/>
|
|
1124
|
+
</div>
|
|
1125
|
+
</div>
|
|
1126
|
+
</div>
|
|
1127
|
+
<div class="pf-c-toolbar__item">
|
|
1128
|
+
<div class="pf-c-dropdown">
|
|
1129
|
+
<button
|
|
1130
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1131
|
+
id="masthead-toggle-group-filters-example-masthead-header-action-button"
|
|
1132
|
+
aria-expanded="false"
|
|
1133
|
+
type="button"
|
|
1134
|
+
aria-label="Actions"
|
|
1135
|
+
>
|
|
1136
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1137
|
+
</button>
|
|
1138
|
+
<ul
|
|
1139
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1140
|
+
aria-labelledby="masthead-toggle-group-filters-example-masthead-header-action-button"
|
|
1141
|
+
hidden
|
|
1142
|
+
>
|
|
1143
|
+
<li>
|
|
1144
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1145
|
+
</li>
|
|
1146
|
+
<li>
|
|
1147
|
+
<button
|
|
1148
|
+
class="pf-c-dropdown__menu-item"
|
|
1149
|
+
type="button"
|
|
1150
|
+
>Action</button>
|
|
1151
|
+
</li>
|
|
1152
|
+
<li>
|
|
1153
|
+
<a
|
|
1154
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1155
|
+
href="#"
|
|
1156
|
+
aria-disabled="true"
|
|
1157
|
+
tabindex="-1"
|
|
1158
|
+
>Disabled link</a>
|
|
1159
|
+
</li>
|
|
1160
|
+
<li>
|
|
1161
|
+
<button
|
|
1162
|
+
class="pf-c-dropdown__menu-item"
|
|
1163
|
+
type="button"
|
|
1164
|
+
disabled
|
|
1165
|
+
>Disabled action</button>
|
|
1166
|
+
</li>
|
|
1167
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1168
|
+
<li>
|
|
1169
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1170
|
+
</li>
|
|
1171
|
+
</ul>
|
|
1172
|
+
</div>
|
|
1173
|
+
</div>
|
|
1174
|
+
</div>
|
|
1175
|
+
<div
|
|
1176
|
+
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
1177
|
+
id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
|
|
1178
|
+
hidden
|
|
1179
|
+
></div>
|
|
1180
|
+
</div>
|
|
1181
|
+
</div>
|
|
1182
|
+
</div>
|
|
1183
|
+
</header>
|
|
1184
|
+
<div class="pf-c-page__sidebar">
|
|
1185
|
+
<div class="pf-c-page__sidebar-body">
|
|
1186
|
+
<nav
|
|
1187
|
+
class="pf-c-nav"
|
|
1188
|
+
id="masthead-toggle-group-filters-example-primary-nav"
|
|
1189
|
+
aria-label="Global"
|
|
1190
|
+
>
|
|
1191
|
+
<ul class="pf-c-nav__list">
|
|
1192
|
+
<li class="pf-c-nav__item">
|
|
1193
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1194
|
+
</li>
|
|
1195
|
+
<li class="pf-c-nav__item">
|
|
1196
|
+
<a
|
|
1197
|
+
href="#"
|
|
1198
|
+
class="pf-c-nav__link pf-m-current"
|
|
1199
|
+
aria-current="page"
|
|
1200
|
+
>Policy</a>
|
|
1201
|
+
</li>
|
|
1202
|
+
<li class="pf-c-nav__item">
|
|
1203
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1204
|
+
</li>
|
|
1205
|
+
<li class="pf-c-nav__item">
|
|
1206
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1207
|
+
</li>
|
|
1208
|
+
<li class="pf-c-nav__item">
|
|
1209
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1210
|
+
</li>
|
|
1211
|
+
</ul>
|
|
1212
|
+
</nav>
|
|
1213
|
+
</div>
|
|
1214
|
+
</div>
|
|
1215
|
+
<main
|
|
1216
|
+
class="pf-c-page__main"
|
|
1217
|
+
tabindex="-1"
|
|
1218
|
+
id="main-content-masthead-toggle-group-filters-example"
|
|
1219
|
+
>
|
|
1220
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1221
|
+
<div class="pf-c-page__main-body">
|
|
1222
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1223
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1224
|
+
<li class="pf-c-breadcrumb__item">
|
|
1225
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1226
|
+
</li>
|
|
1227
|
+
<li class="pf-c-breadcrumb__item">
|
|
1228
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1229
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1230
|
+
</span>
|
|
1231
|
+
|
|
1232
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1233
|
+
</li>
|
|
1234
|
+
<li class="pf-c-breadcrumb__item">
|
|
1235
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1236
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1237
|
+
</span>
|
|
1238
|
+
|
|
1239
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1240
|
+
</li>
|
|
1241
|
+
<li class="pf-c-breadcrumb__item">
|
|
1242
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1243
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1244
|
+
</span>
|
|
1245
|
+
|
|
1246
|
+
<a
|
|
1247
|
+
href="#"
|
|
1248
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1249
|
+
aria-current="page"
|
|
1250
|
+
>Section landing</a>
|
|
1251
|
+
</li>
|
|
1252
|
+
</ol>
|
|
1253
|
+
</nav>
|
|
1254
|
+
</div>
|
|
1255
|
+
</section>
|
|
1256
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1257
|
+
<div class="pf-c-page__main-body">
|
|
1258
|
+
<div class="pf-c-content">
|
|
1259
|
+
<h1>Main title</h1>
|
|
1260
|
+
<p>This is a full page demo.</p>
|
|
1261
|
+
</div>
|
|
1262
|
+
</div>
|
|
1263
|
+
</section>
|
|
1264
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1265
|
+
<div class="pf-c-page__main-body">
|
|
1266
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1267
|
+
<div class="pf-l-gallery__item">
|
|
1268
|
+
<div class="pf-c-card">
|
|
1269
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1270
|
+
</div>
|
|
1271
|
+
</div>
|
|
1272
|
+
<div class="pf-l-gallery__item">
|
|
1273
|
+
<div class="pf-c-card">
|
|
1274
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1275
|
+
</div>
|
|
1276
|
+
</div>
|
|
1277
|
+
<div class="pf-l-gallery__item">
|
|
1278
|
+
<div class="pf-c-card">
|
|
1279
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1280
|
+
</div>
|
|
1281
|
+
</div>
|
|
1282
|
+
<div class="pf-l-gallery__item">
|
|
1283
|
+
<div class="pf-c-card">
|
|
1284
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1285
|
+
</div>
|
|
1286
|
+
</div>
|
|
1287
|
+
<div class="pf-l-gallery__item">
|
|
1288
|
+
<div class="pf-c-card">
|
|
1289
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1290
|
+
</div>
|
|
1291
|
+
</div>
|
|
1292
|
+
<div class="pf-l-gallery__item">
|
|
1293
|
+
<div class="pf-c-card">
|
|
1294
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1295
|
+
</div>
|
|
1296
|
+
</div>
|
|
1297
|
+
<div class="pf-l-gallery__item">
|
|
1298
|
+
<div class="pf-c-card">
|
|
1299
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1300
|
+
</div>
|
|
1301
|
+
</div>
|
|
1302
|
+
<div class="pf-l-gallery__item">
|
|
1303
|
+
<div class="pf-c-card">
|
|
1304
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1305
|
+
</div>
|
|
1306
|
+
</div>
|
|
1307
|
+
<div class="pf-l-gallery__item">
|
|
1308
|
+
<div class="pf-c-card">
|
|
1309
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1310
|
+
</div>
|
|
1311
|
+
</div>
|
|
1312
|
+
<div class="pf-l-gallery__item">
|
|
1313
|
+
<div class="pf-c-card">
|
|
1314
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1315
|
+
</div>
|
|
1316
|
+
</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
</div>
|
|
1319
|
+
</section>
|
|
1320
|
+
</main>
|
|
1321
|
+
</div>
|
|
1322
|
+
|
|
1323
|
+
```
|
|
1324
|
+
|
|
1325
|
+
### Advanced integration with menu options
|
|
1326
|
+
|
|
1327
|
+
```html isFullscreen
|
|
1328
|
+
<div class="pf-c-page" id="masthead-advanced-with-menu-example">
|
|
1329
|
+
<a
|
|
1330
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1331
|
+
href="#main-content-masthead-advanced-with-menu-example"
|
|
1332
|
+
>Skip to content</a>
|
|
1333
|
+
|
|
1334
|
+
<header
|
|
1335
|
+
class="pf-c-masthead"
|
|
1336
|
+
id="masthead-advanced-with-menu-example-masthead"
|
|
1337
|
+
>
|
|
1338
|
+
<span class="pf-c-masthead__toggle">
|
|
1339
|
+
<button
|
|
1340
|
+
class="pf-c-button pf-m-plain"
|
|
1341
|
+
type="button"
|
|
1342
|
+
aria-label="Global navigation"
|
|
1343
|
+
>
|
|
1344
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1345
|
+
</button>
|
|
1346
|
+
</span>
|
|
1347
|
+
<div class="pf-c-masthead__main">
|
|
1348
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1349
|
+
<picture
|
|
1350
|
+
class="pf-c-brand pf-m-picture"
|
|
1351
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1352
|
+
>
|
|
1353
|
+
<source
|
|
1354
|
+
media="(min-width: 768px)"
|
|
1355
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1356
|
+
/>
|
|
1357
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1358
|
+
<img
|
|
1359
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1360
|
+
alt="Fallback patternFly default logo"
|
|
1361
|
+
/>
|
|
1362
|
+
</picture>
|
|
1363
|
+
</a>
|
|
1364
|
+
</div>
|
|
1365
|
+
<div class="pf-c-masthead__content">
|
|
1366
|
+
<div
|
|
1367
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1368
|
+
id="masthead-advanced-with-menu-example-masthead-toolbar"
|
|
1369
|
+
>
|
|
1370
|
+
<div class="pf-c-toolbar__content">
|
|
1371
|
+
<div class="pf-c-toolbar__content-section">
|
|
906
1372
|
<div
|
|
907
1373
|
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
908
1374
|
>
|
|
@@ -924,11 +1390,12 @@ wrapperTag: div
|
|
|
924
1390
|
<nav
|
|
925
1391
|
class="pf-c-app-launcher"
|
|
926
1392
|
aria-label="Application launcher"
|
|
1393
|
+
id="masthead-advanced-with-menu-example-masthead-icon-group--app-launcher"
|
|
927
1394
|
>
|
|
928
1395
|
<button
|
|
929
1396
|
class="pf-c-app-launcher__toggle"
|
|
930
1397
|
type="button"
|
|
931
|
-
id="
|
|
1398
|
+
id="-button"
|
|
932
1399
|
aria-expanded="false"
|
|
933
1400
|
aria-label="Application launcher"
|
|
934
1401
|
>
|
|
@@ -944,7 +1411,7 @@ wrapperTag: div
|
|
|
944
1411
|
type="search"
|
|
945
1412
|
aria-label="Type to filter"
|
|
946
1413
|
placeholder="Filter by name..."
|
|
947
|
-
id="masthead-advanced-with-menu-example-
|
|
1414
|
+
id="masthead-advanced-with-menu-example-masthead-application-launcher-text-input"
|
|
948
1415
|
name="textInput1"
|
|
949
1416
|
/>
|
|
950
1417
|
</div>
|
|
@@ -1094,7 +1561,7 @@ wrapperTag: div
|
|
|
1094
1561
|
type="button"
|
|
1095
1562
|
aria-label="Help"
|
|
1096
1563
|
>
|
|
1097
|
-
<i class="
|
|
1564
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1098
1565
|
</button>
|
|
1099
1566
|
<ul
|
|
1100
1567
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
@@ -1126,14 +1593,14 @@ wrapperTag: div
|
|
|
1126
1593
|
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1127
1594
|
<div class="pf-c-dropdown">
|
|
1128
1595
|
<button
|
|
1129
|
-
class="pf-c-menu-toggle pf-m-plain
|
|
1596
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1130
1597
|
type="button"
|
|
1131
|
-
aria-expanded="
|
|
1598
|
+
aria-expanded="false"
|
|
1132
1599
|
aria-label="Actions"
|
|
1133
1600
|
>
|
|
1134
1601
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1135
1602
|
</button>
|
|
1136
|
-
<div class="pf-c-menu pf-m-drilldown pf-m-align-right">
|
|
1603
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1137
1604
|
<div class="pf-c-menu__content">
|
|
1138
1605
|
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1139
1606
|
<ul class="pf-c-menu__list">
|
|
@@ -1211,7 +1678,7 @@ wrapperTag: div
|
|
|
1211
1678
|
</span>
|
|
1212
1679
|
</span>
|
|
1213
1680
|
</button>
|
|
1214
|
-
<div class="pf-c-menu">
|
|
1681
|
+
<div class="pf-c-menu" hidden>
|
|
1215
1682
|
<div class="pf-c-menu__content">
|
|
1216
1683
|
<ul class="pf-c-menu__list">
|
|
1217
1684
|
<li
|
|
@@ -1280,7 +1747,7 @@ wrapperTag: div
|
|
|
1280
1747
|
</span>
|
|
1281
1748
|
</span>
|
|
1282
1749
|
</button>
|
|
1283
|
-
<div class="pf-c-menu">
|
|
1750
|
+
<div class="pf-c-menu" hidden>
|
|
1284
1751
|
<div class="pf-c-menu__content">
|
|
1285
1752
|
<ul class="pf-c-menu__list">
|
|
1286
1753
|
<li
|
|
@@ -1353,7 +1820,7 @@ wrapperTag: div
|
|
|
1353
1820
|
</span>
|
|
1354
1821
|
</span>
|
|
1355
1822
|
</button>
|
|
1356
|
-
<div class="pf-c-menu">
|
|
1823
|
+
<div class="pf-c-menu" hidden>
|
|
1357
1824
|
<div class="pf-c-menu__header">
|
|
1358
1825
|
<button class="pf-c-menu__item" type="button">
|
|
1359
1826
|
<span class="pf-c-menu__item-main">
|
|
@@ -1520,13 +1987,13 @@ wrapperTag: div
|
|
|
1520
1987
|
</div>
|
|
1521
1988
|
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1522
1989
|
<div
|
|
1523
|
-
class="pf-c-dropdown
|
|
1990
|
+
class="pf-c-dropdown"
|
|
1524
1991
|
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1525
1992
|
>
|
|
1526
1993
|
<button
|
|
1527
1994
|
class="pf-c-dropdown__toggle"
|
|
1528
1995
|
id="masthead-advanced-with-menu-example-masthead-profile-button"
|
|
1529
|
-
aria-expanded="
|
|
1996
|
+
aria-expanded="false"
|
|
1530
1997
|
type="button"
|
|
1531
1998
|
>
|
|
1532
1999
|
<span class="pf-c-dropdown__toggle-image">
|
|
@@ -1541,7 +2008,7 @@ wrapperTag: div
|
|
|
1541
2008
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1542
2009
|
</span>
|
|
1543
2010
|
</button>
|
|
1544
|
-
<div class="pf-c-dropdown__menu">
|
|
2011
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1545
2012
|
<section class="pf-c-dropdown__group">
|
|
1546
2013
|
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1547
2014
|
<div class="pf-u-font-size-sm">Account number:</div>
|
|
@@ -1577,8 +2044,7 @@ wrapperTag: div
|
|
|
1577
2044
|
</div>
|
|
1578
2045
|
</div>
|
|
1579
2046
|
</header>
|
|
1580
|
-
|
|
1581
|
-
<aside class="pf-c-page__sidebar">
|
|
2047
|
+
<div class="pf-c-page__sidebar">
|
|
1582
2048
|
<div class="pf-c-page__sidebar-body">
|
|
1583
2049
|
<nav
|
|
1584
2050
|
class="pf-c-nav"
|
|
@@ -1586,15 +2052,15 @@ wrapperTag: div
|
|
|
1586
2052
|
aria-label="Global"
|
|
1587
2053
|
>
|
|
1588
2054
|
<ul class="pf-c-nav__list">
|
|
2055
|
+
<li class="pf-c-nav__item">
|
|
2056
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
2057
|
+
</li>
|
|
1589
2058
|
<li class="pf-c-nav__item">
|
|
1590
2059
|
<a
|
|
1591
2060
|
href="#"
|
|
1592
2061
|
class="pf-c-nav__link pf-m-current"
|
|
1593
2062
|
aria-current="page"
|
|
1594
|
-
>
|
|
1595
|
-
</li>
|
|
1596
|
-
<li class="pf-c-nav__item">
|
|
1597
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
2063
|
+
>Policy</a>
|
|
1598
2064
|
</li>
|
|
1599
2065
|
<li class="pf-c-nav__item">
|
|
1600
2066
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -1608,11 +2074,11 @@ wrapperTag: div
|
|
|
1608
2074
|
</ul>
|
|
1609
2075
|
</nav>
|
|
1610
2076
|
</div>
|
|
1611
|
-
</
|
|
2077
|
+
</div>
|
|
1612
2078
|
<main
|
|
1613
2079
|
class="pf-c-page__main"
|
|
1614
2080
|
tabindex="-1"
|
|
1615
|
-
id="masthead-advanced-with-menu-example
|
|
2081
|
+
id="main-content-masthead-advanced-with-menu-example"
|
|
1616
2082
|
>
|
|
1617
2083
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1618
2084
|
<div class="pf-c-page__main-body">
|
|
@@ -1650,7 +2116,6 @@ wrapperTag: div
|
|
|
1650
2116
|
</nav>
|
|
1651
2117
|
</div>
|
|
1652
2118
|
</section>
|
|
1653
|
-
|
|
1654
2119
|
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1655
2120
|
<div class="pf-c-page__main-body">
|
|
1656
2121
|
<div class="pf-c-content">
|
|
@@ -1659,7 +2124,6 @@ wrapperTag: div
|
|
|
1659
2124
|
</div>
|
|
1660
2125
|
</div>
|
|
1661
2126
|
</section>
|
|
1662
|
-
|
|
1663
2127
|
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1664
2128
|
<div class="pf-c-page__main-body">
|
|
1665
2129
|
<div class="pf-l-gallery pf-m-gutter">
|
|
@@ -1727,12 +2191,10 @@ wrapperTag: div
|
|
|
1727
2191
|
<div class="pf-c-page" id="masthead-horizontal-nav">
|
|
1728
2192
|
<a
|
|
1729
2193
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1730
|
-
href="#masthead-horizontal-nav
|
|
2194
|
+
href="#main-content-masthead-horizontal-nav"
|
|
1731
2195
|
>Skip to content</a>
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
id="masthead-horizontal-nav-masthead"
|
|
1735
|
-
>
|
|
2196
|
+
|
|
2197
|
+
<header class="pf-c-masthead" id="masthead-horizontal-nav-masthead">
|
|
1736
2198
|
<div class="pf-c-masthead__main">
|
|
1737
2199
|
<a class="pf-c-masthead__brand" href="#">
|
|
1738
2200
|
<picture
|
|
@@ -1764,7 +2226,7 @@ wrapperTag: div
|
|
|
1764
2226
|
>
|
|
1765
2227
|
<nav
|
|
1766
2228
|
class="pf-c-nav pf-m-horizontal pf-m-scrollable"
|
|
1767
|
-
id="
|
|
2229
|
+
id="-horizontal-nav"
|
|
1768
2230
|
aria-label="Global"
|
|
1769
2231
|
>
|
|
1770
2232
|
<button
|
|
@@ -1824,11 +2286,12 @@ wrapperTag: div
|
|
|
1824
2286
|
<nav
|
|
1825
2287
|
class="pf-c-app-launcher"
|
|
1826
2288
|
aria-label="Application launcher"
|
|
2289
|
+
id="masthead-horizontal-nav-masthead-icon-group--app-launcher"
|
|
1827
2290
|
>
|
|
1828
2291
|
<button
|
|
1829
2292
|
class="pf-c-app-launcher__toggle"
|
|
1830
2293
|
type="button"
|
|
1831
|
-
id="
|
|
2294
|
+
id="-button"
|
|
1832
2295
|
aria-expanded="false"
|
|
1833
2296
|
aria-label="Application launcher"
|
|
1834
2297
|
>
|
|
@@ -1844,7 +2307,7 @@ wrapperTag: div
|
|
|
1844
2307
|
type="search"
|
|
1845
2308
|
aria-label="Type to filter"
|
|
1846
2309
|
placeholder="Filter by name..."
|
|
1847
|
-
id="masthead-horizontal-nav-
|
|
2310
|
+
id="masthead-horizontal-nav-masthead-application-launcher-text-input"
|
|
1848
2311
|
name="textInput1"
|
|
1849
2312
|
/>
|
|
1850
2313
|
</div>
|
|
@@ -1994,7 +2457,7 @@ wrapperTag: div
|
|
|
1994
2457
|
type="button"
|
|
1995
2458
|
aria-label="Help"
|
|
1996
2459
|
>
|
|
1997
|
-
<i class="
|
|
2460
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1998
2461
|
</button>
|
|
1999
2462
|
<ul
|
|
2000
2463
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
@@ -2026,14 +2489,14 @@ wrapperTag: div
|
|
|
2026
2489
|
<div class="pf-c-toolbar__item pf-m-hidden-on-xl">
|
|
2027
2490
|
<div class="pf-c-dropdown">
|
|
2028
2491
|
<button
|
|
2029
|
-
class="pf-c-menu-toggle pf-m-plain
|
|
2492
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2030
2493
|
type="button"
|
|
2031
|
-
aria-expanded="
|
|
2494
|
+
aria-expanded="false"
|
|
2032
2495
|
aria-label="Actions"
|
|
2033
2496
|
>
|
|
2034
2497
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2035
2498
|
</button>
|
|
2036
|
-
<div class="pf-c-menu pf-m-drilldown pf-m-align-right">
|
|
2499
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2037
2500
|
<div class="pf-c-menu__content">
|
|
2038
2501
|
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2039
2502
|
<ul class="pf-c-menu__list">
|
|
@@ -2111,7 +2574,7 @@ wrapperTag: div
|
|
|
2111
2574
|
</span>
|
|
2112
2575
|
</span>
|
|
2113
2576
|
</button>
|
|
2114
|
-
<div class="pf-c-menu">
|
|
2577
|
+
<div class="pf-c-menu" hidden>
|
|
2115
2578
|
<div class="pf-c-menu__content">
|
|
2116
2579
|
<ul class="pf-c-menu__list">
|
|
2117
2580
|
<li
|
|
@@ -2180,7 +2643,7 @@ wrapperTag: div
|
|
|
2180
2643
|
</span>
|
|
2181
2644
|
</span>
|
|
2182
2645
|
</button>
|
|
2183
|
-
<div class="pf-c-menu">
|
|
2646
|
+
<div class="pf-c-menu" hidden>
|
|
2184
2647
|
<div class="pf-c-menu__content">
|
|
2185
2648
|
<ul class="pf-c-menu__list">
|
|
2186
2649
|
<li
|
|
@@ -2253,7 +2716,7 @@ wrapperTag: div
|
|
|
2253
2716
|
</span>
|
|
2254
2717
|
</span>
|
|
2255
2718
|
</button>
|
|
2256
|
-
<div class="pf-c-menu">
|
|
2719
|
+
<div class="pf-c-menu" hidden>
|
|
2257
2720
|
<div class="pf-c-menu__header">
|
|
2258
2721
|
<button class="pf-c-menu__item" type="button">
|
|
2259
2722
|
<span class="pf-c-menu__item-main">
|
|
@@ -2429,47 +2892,347 @@ wrapperTag: div
|
|
|
2429
2892
|
aria-expanded="true"
|
|
2430
2893
|
type="button"
|
|
2431
2894
|
>
|
|
2432
|
-
<span class="pf-c-dropdown__toggle-image">
|
|
2433
|
-
<img
|
|
2434
|
-
class="pf-c-avatar"
|
|
2435
|
-
src="/assets/images/img_avatar.svg"
|
|
2436
|
-
alt="Avatar image"
|
|
2437
|
-
/>
|
|
2438
|
-
</span>
|
|
2439
|
-
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2440
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
2441
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2442
|
-
</span>
|
|
2895
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2896
|
+
<img
|
|
2897
|
+
class="pf-c-avatar"
|
|
2898
|
+
src="/assets/images/img_avatar.svg"
|
|
2899
|
+
alt="Avatar image"
|
|
2900
|
+
/>
|
|
2901
|
+
</span>
|
|
2902
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2903
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2904
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2905
|
+
</span>
|
|
2906
|
+
</button>
|
|
2907
|
+
<div class="pf-c-dropdown__menu">
|
|
2908
|
+
<section class="pf-c-dropdown__group">
|
|
2909
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2910
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2911
|
+
<div>123456789</div>
|
|
2912
|
+
</div>
|
|
2913
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2914
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2915
|
+
<div>mshaksho@redhat.com</div>
|
|
2916
|
+
</div>
|
|
2917
|
+
</section>
|
|
2918
|
+
<hr class="pf-c-divider" />
|
|
2919
|
+
<section class="pf-c-dropdown__group">
|
|
2920
|
+
<ul>
|
|
2921
|
+
<li>
|
|
2922
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2923
|
+
</li>
|
|
2924
|
+
<li>
|
|
2925
|
+
<a
|
|
2926
|
+
class="pf-c-dropdown__menu-item"
|
|
2927
|
+
href="#"
|
|
2928
|
+
>User management</a>
|
|
2929
|
+
</li>
|
|
2930
|
+
<li>
|
|
2931
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2932
|
+
</li>
|
|
2933
|
+
</ul>
|
|
2934
|
+
</section>
|
|
2935
|
+
</div>
|
|
2936
|
+
</div>
|
|
2937
|
+
</div>
|
|
2938
|
+
</div>
|
|
2939
|
+
</div>
|
|
2940
|
+
</div>
|
|
2941
|
+
</div>
|
|
2942
|
+
</header>
|
|
2943
|
+
<main
|
|
2944
|
+
class="pf-c-page__main"
|
|
2945
|
+
tabindex="-1"
|
|
2946
|
+
id="main-content-masthead-horizontal-nav"
|
|
2947
|
+
>
|
|
2948
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2949
|
+
<div class="pf-c-page__main-body">
|
|
2950
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2951
|
+
<ol class="pf-c-breadcrumb__list">
|
|
2952
|
+
<li class="pf-c-breadcrumb__item">
|
|
2953
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2954
|
+
</li>
|
|
2955
|
+
<li class="pf-c-breadcrumb__item">
|
|
2956
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2957
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2958
|
+
</span>
|
|
2959
|
+
|
|
2960
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2961
|
+
</li>
|
|
2962
|
+
<li class="pf-c-breadcrumb__item">
|
|
2963
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2964
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2965
|
+
</span>
|
|
2966
|
+
|
|
2967
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2968
|
+
</li>
|
|
2969
|
+
<li class="pf-c-breadcrumb__item">
|
|
2970
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2971
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2972
|
+
</span>
|
|
2973
|
+
|
|
2974
|
+
<a
|
|
2975
|
+
href="#"
|
|
2976
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
2977
|
+
aria-current="page"
|
|
2978
|
+
>Section landing</a>
|
|
2979
|
+
</li>
|
|
2980
|
+
</ol>
|
|
2981
|
+
</nav>
|
|
2982
|
+
</div>
|
|
2983
|
+
</section>
|
|
2984
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2985
|
+
<div class="pf-c-page__main-body">
|
|
2986
|
+
<div class="pf-c-content">
|
|
2987
|
+
<h1>Main title</h1>
|
|
2988
|
+
<p>This is a full page demo.</p>
|
|
2989
|
+
</div>
|
|
2990
|
+
</div>
|
|
2991
|
+
</section>
|
|
2992
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2993
|
+
<div class="pf-c-page__main-body">
|
|
2994
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
2995
|
+
<div class="pf-l-gallery__item">
|
|
2996
|
+
<div class="pf-c-card">
|
|
2997
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
2998
|
+
</div>
|
|
2999
|
+
</div>
|
|
3000
|
+
<div class="pf-l-gallery__item">
|
|
3001
|
+
<div class="pf-c-card">
|
|
3002
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3003
|
+
</div>
|
|
3004
|
+
</div>
|
|
3005
|
+
<div class="pf-l-gallery__item">
|
|
3006
|
+
<div class="pf-c-card">
|
|
3007
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3008
|
+
</div>
|
|
3009
|
+
</div>
|
|
3010
|
+
<div class="pf-l-gallery__item">
|
|
3011
|
+
<div class="pf-c-card">
|
|
3012
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3013
|
+
</div>
|
|
3014
|
+
</div>
|
|
3015
|
+
<div class="pf-l-gallery__item">
|
|
3016
|
+
<div class="pf-c-card">
|
|
3017
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3018
|
+
</div>
|
|
3019
|
+
</div>
|
|
3020
|
+
<div class="pf-l-gallery__item">
|
|
3021
|
+
<div class="pf-c-card">
|
|
3022
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3023
|
+
</div>
|
|
3024
|
+
</div>
|
|
3025
|
+
<div class="pf-l-gallery__item">
|
|
3026
|
+
<div class="pf-c-card">
|
|
3027
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3028
|
+
</div>
|
|
3029
|
+
</div>
|
|
3030
|
+
<div class="pf-l-gallery__item">
|
|
3031
|
+
<div class="pf-c-card">
|
|
3032
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3033
|
+
</div>
|
|
3034
|
+
</div>
|
|
3035
|
+
<div class="pf-l-gallery__item">
|
|
3036
|
+
<div class="pf-c-card">
|
|
3037
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3038
|
+
</div>
|
|
3039
|
+
</div>
|
|
3040
|
+
<div class="pf-l-gallery__item">
|
|
3041
|
+
<div class="pf-c-card">
|
|
3042
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3043
|
+
</div>
|
|
3044
|
+
</div>
|
|
3045
|
+
</div>
|
|
3046
|
+
</div>
|
|
3047
|
+
</section>
|
|
3048
|
+
</main>
|
|
3049
|
+
</div>
|
|
3050
|
+
|
|
3051
|
+
```
|
|
3052
|
+
|
|
3053
|
+
## Mobile examples
|
|
3054
|
+
|
|
3055
|
+
### With toggle group, filters, expandable content expanded (mobile)
|
|
3056
|
+
|
|
3057
|
+
```html isFullscreen
|
|
3058
|
+
<div
|
|
3059
|
+
class="pf-c-page"
|
|
3060
|
+
id="masthead-toggle-group-filters-expanded-mobile-example"
|
|
3061
|
+
>
|
|
3062
|
+
<a
|
|
3063
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
3064
|
+
href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
|
|
3065
|
+
>Skip to content</a>
|
|
3066
|
+
|
|
3067
|
+
<header
|
|
3068
|
+
class="pf-c-masthead"
|
|
3069
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
|
|
3070
|
+
>
|
|
3071
|
+
<span class="pf-c-masthead__toggle">
|
|
3072
|
+
<button
|
|
3073
|
+
class="pf-c-button pf-m-plain"
|
|
3074
|
+
type="button"
|
|
3075
|
+
aria-label="Global navigation"
|
|
3076
|
+
>
|
|
3077
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
3078
|
+
</button>
|
|
3079
|
+
</span>
|
|
3080
|
+
<div class="pf-c-masthead__main">
|
|
3081
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
3082
|
+
<picture
|
|
3083
|
+
class="pf-c-brand pf-m-picture"
|
|
3084
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
3085
|
+
>
|
|
3086
|
+
<source
|
|
3087
|
+
media="(min-width: 768px)"
|
|
3088
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
3089
|
+
/>
|
|
3090
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
3091
|
+
<img
|
|
3092
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
3093
|
+
alt="Fallback patternFly default logo"
|
|
3094
|
+
/>
|
|
3095
|
+
</picture>
|
|
3096
|
+
</a>
|
|
3097
|
+
</div>
|
|
3098
|
+
<div class="pf-c-masthead__content">
|
|
3099
|
+
<div
|
|
3100
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3101
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
|
|
3102
|
+
>
|
|
3103
|
+
<div class="pf-c-toolbar__content">
|
|
3104
|
+
<div class="pf-c-toolbar__content-section">
|
|
3105
|
+
<div
|
|
3106
|
+
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
|
|
3107
|
+
>
|
|
3108
|
+
<div class="pf-c-toolbar__toggle">
|
|
3109
|
+
<button
|
|
3110
|
+
class="pf-c-button pf-m-plain"
|
|
3111
|
+
type="button"
|
|
3112
|
+
aria-label="Show filters"
|
|
3113
|
+
aria-expanded="true"
|
|
3114
|
+
aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
|
|
3115
|
+
>
|
|
3116
|
+
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
3117
|
+
</button>
|
|
3118
|
+
</div>
|
|
3119
|
+
</div>
|
|
3120
|
+
<div class="pf-c-toolbar__item">
|
|
3121
|
+
<div class="pf-c-dropdown">
|
|
3122
|
+
<button
|
|
3123
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3124
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-header-action-button"
|
|
3125
|
+
aria-expanded="false"
|
|
3126
|
+
type="button"
|
|
3127
|
+
aria-label="Actions"
|
|
3128
|
+
>
|
|
3129
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2443
3130
|
</button>
|
|
2444
|
-
<
|
|
2445
|
-
|
|
2446
|
-
|
|
2447
|
-
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
<
|
|
2451
|
-
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
3131
|
+
<ul
|
|
3132
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3133
|
+
aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-header-action-button"
|
|
3134
|
+
hidden
|
|
3135
|
+
>
|
|
3136
|
+
<li>
|
|
3137
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
3138
|
+
</li>
|
|
3139
|
+
<li>
|
|
3140
|
+
<button
|
|
3141
|
+
class="pf-c-dropdown__menu-item"
|
|
3142
|
+
type="button"
|
|
3143
|
+
>Action</button>
|
|
3144
|
+
</li>
|
|
3145
|
+
<li>
|
|
3146
|
+
<a
|
|
3147
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
3148
|
+
href="#"
|
|
3149
|
+
aria-disabled="true"
|
|
3150
|
+
tabindex="-1"
|
|
3151
|
+
>Disabled link</a>
|
|
3152
|
+
</li>
|
|
3153
|
+
<li>
|
|
3154
|
+
<button
|
|
3155
|
+
class="pf-c-dropdown__menu-item"
|
|
3156
|
+
type="button"
|
|
3157
|
+
disabled
|
|
3158
|
+
>Disabled action</button>
|
|
3159
|
+
</li>
|
|
3160
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3161
|
+
<li>
|
|
3162
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
3163
|
+
</li>
|
|
3164
|
+
</ul>
|
|
3165
|
+
</div>
|
|
3166
|
+
</div>
|
|
3167
|
+
</div>
|
|
3168
|
+
<div
|
|
3169
|
+
class="pf-c-toolbar__expandable-content pf-m-expanded"
|
|
3170
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
|
|
3171
|
+
>
|
|
3172
|
+
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
3173
|
+
<div
|
|
3174
|
+
class="pf-c-input-group"
|
|
3175
|
+
aria-label="search filter"
|
|
3176
|
+
role="group"
|
|
3177
|
+
>
|
|
3178
|
+
<div class="pf-c-dropdown">
|
|
3179
|
+
<button
|
|
3180
|
+
class="pf-c-dropdown__toggle"
|
|
3181
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
|
|
3182
|
+
aria-expanded="false"
|
|
3183
|
+
type="button"
|
|
3184
|
+
>
|
|
3185
|
+
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
3186
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
3187
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3188
|
+
</span>
|
|
3189
|
+
</button>
|
|
3190
|
+
<ul
|
|
3191
|
+
class="pf-c-dropdown__menu"
|
|
3192
|
+
aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
|
|
3193
|
+
hidden
|
|
3194
|
+
>
|
|
3195
|
+
<li>
|
|
3196
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
3197
|
+
</li>
|
|
3198
|
+
<li>
|
|
3199
|
+
<button
|
|
3200
|
+
class="pf-c-dropdown__menu-item"
|
|
3201
|
+
type="button"
|
|
3202
|
+
>Action</button>
|
|
3203
|
+
</li>
|
|
3204
|
+
<li>
|
|
3205
|
+
<a
|
|
3206
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
3207
|
+
href="#"
|
|
3208
|
+
aria-disabled="true"
|
|
3209
|
+
tabindex="-1"
|
|
3210
|
+
>Disabled link</a>
|
|
3211
|
+
</li>
|
|
3212
|
+
<li>
|
|
3213
|
+
<button
|
|
3214
|
+
class="pf-c-dropdown__menu-item"
|
|
3215
|
+
type="button"
|
|
3216
|
+
disabled
|
|
3217
|
+
>Disabled action</button>
|
|
3218
|
+
</li>
|
|
3219
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3220
|
+
<li>
|
|
3221
|
+
<a
|
|
3222
|
+
class="pf-c-dropdown__menu-item"
|
|
3223
|
+
href="#"
|
|
3224
|
+
>Separated link</a>
|
|
3225
|
+
</li>
|
|
3226
|
+
</ul>
|
|
2472
3227
|
</div>
|
|
3228
|
+
<input
|
|
3229
|
+
class="pf-c-form-control"
|
|
3230
|
+
type="search"
|
|
3231
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-search-filter-input"
|
|
3232
|
+
name="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-input"
|
|
3233
|
+
aria-label="input with dropdown and button"
|
|
3234
|
+
aria-describedby="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-masthead-toggle-group-filters-expanded-mobile-example-masthead-expandable-content-button"
|
|
3235
|
+
/>
|
|
2473
3236
|
</div>
|
|
2474
3237
|
</div>
|
|
2475
3238
|
</div>
|
|
@@ -2477,8 +3240,42 @@ wrapperTag: div
|
|
|
2477
3240
|
</div>
|
|
2478
3241
|
</div>
|
|
2479
3242
|
</header>
|
|
2480
|
-
|
|
2481
|
-
|
|
3243
|
+
<div class="pf-c-page__sidebar">
|
|
3244
|
+
<div class="pf-c-page__sidebar-body">
|
|
3245
|
+
<nav
|
|
3246
|
+
class="pf-c-nav"
|
|
3247
|
+
id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
|
|
3248
|
+
aria-label="Global"
|
|
3249
|
+
>
|
|
3250
|
+
<ul class="pf-c-nav__list">
|
|
3251
|
+
<li class="pf-c-nav__item">
|
|
3252
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
3253
|
+
</li>
|
|
3254
|
+
<li class="pf-c-nav__item">
|
|
3255
|
+
<a
|
|
3256
|
+
href="#"
|
|
3257
|
+
class="pf-c-nav__link pf-m-current"
|
|
3258
|
+
aria-current="page"
|
|
3259
|
+
>Policy</a>
|
|
3260
|
+
</li>
|
|
3261
|
+
<li class="pf-c-nav__item">
|
|
3262
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
3263
|
+
</li>
|
|
3264
|
+
<li class="pf-c-nav__item">
|
|
3265
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
3266
|
+
</li>
|
|
3267
|
+
<li class="pf-c-nav__item">
|
|
3268
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
3269
|
+
</li>
|
|
3270
|
+
</ul>
|
|
3271
|
+
</nav>
|
|
3272
|
+
</div>
|
|
3273
|
+
</div>
|
|
3274
|
+
<main
|
|
3275
|
+
class="pf-c-page__main"
|
|
3276
|
+
tabindex="-1"
|
|
3277
|
+
id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
|
|
3278
|
+
>
|
|
2482
3279
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2483
3280
|
<div class="pf-c-page__main-body">
|
|
2484
3281
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -2515,7 +3312,6 @@ wrapperTag: div
|
|
|
2515
3312
|
</nav>
|
|
2516
3313
|
</div>
|
|
2517
3314
|
</section>
|
|
2518
|
-
|
|
2519
3315
|
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2520
3316
|
<div class="pf-c-page__main-body">
|
|
2521
3317
|
<div class="pf-c-content">
|
|
@@ -2524,7 +3320,6 @@ wrapperTag: div
|
|
|
2524
3320
|
</div>
|
|
2525
3321
|
</div>
|
|
2526
3322
|
</section>
|
|
2527
|
-
|
|
2528
3323
|
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2529
3324
|
<div class="pf-c-page__main-body">
|
|
2530
3325
|
<div class="pf-l-gallery pf-m-gutter">
|
|
@@ -2585,181 +3380,3 @@ wrapperTag: div
|
|
|
2585
3380
|
</div>
|
|
2586
3381
|
|
|
2587
3382
|
```
|
|
2588
|
-
|
|
2589
|
-
## Mobile examples
|
|
2590
|
-
|
|
2591
|
-
### With toggle group, filters, expandable content expanded (mobile)
|
|
2592
|
-
|
|
2593
|
-
```html isFullscreen
|
|
2594
|
-
<header
|
|
2595
|
-
class="pf-c-masthead"
|
|
2596
|
-
id="masthead-toggle-group-filters-expanded-mobile-example"
|
|
2597
|
-
>
|
|
2598
|
-
<span class="pf-c-masthead__toggle">
|
|
2599
|
-
<button
|
|
2600
|
-
class="pf-c-button pf-m-plain"
|
|
2601
|
-
type="button"
|
|
2602
|
-
aria-label="Global navigation"
|
|
2603
|
-
>
|
|
2604
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2605
|
-
</button>
|
|
2606
|
-
</span>
|
|
2607
|
-
<div class="pf-c-masthead__main">
|
|
2608
|
-
<a class="pf-c-masthead__brand" href="#">
|
|
2609
|
-
<picture
|
|
2610
|
-
class="pf-c-brand pf-m-picture"
|
|
2611
|
-
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
2612
|
-
>
|
|
2613
|
-
<source
|
|
2614
|
-
media="(min-width: 768px)"
|
|
2615
|
-
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2616
|
-
/>
|
|
2617
|
-
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2618
|
-
<img
|
|
2619
|
-
src="/assets/images/logo__pf--reverse--base.png"
|
|
2620
|
-
alt="Fallback patternFly default logo"
|
|
2621
|
-
/>
|
|
2622
|
-
</picture>
|
|
2623
|
-
</a>
|
|
2624
|
-
</div>
|
|
2625
|
-
<div class="pf-c-masthead__content">
|
|
2626
|
-
<div
|
|
2627
|
-
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2628
|
-
id="masthead-toggle-group-filters-expanded-mobile-example-toolbar"
|
|
2629
|
-
>
|
|
2630
|
-
<div class="pf-c-toolbar__content">
|
|
2631
|
-
<div class="pf-c-toolbar__content-section">
|
|
2632
|
-
<div
|
|
2633
|
-
class="pf-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-right"
|
|
2634
|
-
>
|
|
2635
|
-
<div class="pf-c-toolbar__toggle">
|
|
2636
|
-
<button
|
|
2637
|
-
class="pf-c-button pf-m-plain"
|
|
2638
|
-
type="button"
|
|
2639
|
-
aria-label="Show filters"
|
|
2640
|
-
aria-expanded="true"
|
|
2641
|
-
aria-controls="masthead-toggle-group-filters-expanded-mobile-example-toolbar-expandable-content"
|
|
2642
|
-
>
|
|
2643
|
-
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
2644
|
-
</button>
|
|
2645
|
-
</div>
|
|
2646
|
-
</div>
|
|
2647
|
-
<div class="pf-c-toolbar__item">
|
|
2648
|
-
<div class="pf-c-dropdown">
|
|
2649
|
-
<button
|
|
2650
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2651
|
-
id="masthead-toggle-group-filters-expanded-mobile-example-header-action-button"
|
|
2652
|
-
aria-expanded="false"
|
|
2653
|
-
type="button"
|
|
2654
|
-
aria-label="Actions"
|
|
2655
|
-
>
|
|
2656
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2657
|
-
</button>
|
|
2658
|
-
<ul
|
|
2659
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2660
|
-
aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-header-action-button"
|
|
2661
|
-
hidden
|
|
2662
|
-
>
|
|
2663
|
-
<li>
|
|
2664
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2665
|
-
</li>
|
|
2666
|
-
<li>
|
|
2667
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2668
|
-
</li>
|
|
2669
|
-
<li>
|
|
2670
|
-
<a
|
|
2671
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2672
|
-
href="#"
|
|
2673
|
-
aria-disabled="true"
|
|
2674
|
-
tabindex="-1"
|
|
2675
|
-
>Disabled link</a>
|
|
2676
|
-
</li>
|
|
2677
|
-
<li>
|
|
2678
|
-
<button
|
|
2679
|
-
class="pf-c-dropdown__menu-item"
|
|
2680
|
-
type="button"
|
|
2681
|
-
disabled
|
|
2682
|
-
>Disabled action</button>
|
|
2683
|
-
</li>
|
|
2684
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
2685
|
-
<li>
|
|
2686
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2687
|
-
</li>
|
|
2688
|
-
</ul>
|
|
2689
|
-
</div>
|
|
2690
|
-
</div>
|
|
2691
|
-
</div>
|
|
2692
|
-
<div
|
|
2693
|
-
class="pf-c-toolbar__expandable-content pf-m-expanded"
|
|
2694
|
-
id="masthead-toggle-group-filters-expanded-mobile-example-toolbar-expandable-content"
|
|
2695
|
-
>
|
|
2696
|
-
<div class="pf-c-toolbar__item pf-m-search-filter">
|
|
2697
|
-
<div
|
|
2698
|
-
class="pf-c-input-group"
|
|
2699
|
-
aria-label="search filter"
|
|
2700
|
-
role="group"
|
|
2701
|
-
>
|
|
2702
|
-
<div class="pf-c-dropdown">
|
|
2703
|
-
<button
|
|
2704
|
-
class="pf-c-dropdown__toggle"
|
|
2705
|
-
id="masthead-toggle-group-filters-expanded-mobile-example-toolbar-masthead-toggle-group-filters-expanded-mobile-example-expandable-content-button"
|
|
2706
|
-
aria-expanded="false"
|
|
2707
|
-
type="button"
|
|
2708
|
-
>
|
|
2709
|
-
<span class="pf-c-dropdown__toggle-text">Name</span>
|
|
2710
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
2711
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2712
|
-
</span>
|
|
2713
|
-
</button>
|
|
2714
|
-
<ul
|
|
2715
|
-
class="pf-c-dropdown__menu"
|
|
2716
|
-
aria-labelledby="masthead-toggle-group-filters-expanded-mobile-example-toolbar-masthead-toggle-group-filters-expanded-mobile-example-expandable-content-button"
|
|
2717
|
-
hidden
|
|
2718
|
-
>
|
|
2719
|
-
<li>
|
|
2720
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2721
|
-
</li>
|
|
2722
|
-
<li>
|
|
2723
|
-
<button
|
|
2724
|
-
class="pf-c-dropdown__menu-item"
|
|
2725
|
-
type="button"
|
|
2726
|
-
>Action</button>
|
|
2727
|
-
</li>
|
|
2728
|
-
<li>
|
|
2729
|
-
<a
|
|
2730
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2731
|
-
href="#"
|
|
2732
|
-
aria-disabled="true"
|
|
2733
|
-
tabindex="-1"
|
|
2734
|
-
>Disabled link</a>
|
|
2735
|
-
</li>
|
|
2736
|
-
<li>
|
|
2737
|
-
<button
|
|
2738
|
-
class="pf-c-dropdown__menu-item"
|
|
2739
|
-
type="button"
|
|
2740
|
-
disabled
|
|
2741
|
-
>Disabled action</button>
|
|
2742
|
-
</li>
|
|
2743
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
2744
|
-
<li>
|
|
2745
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2746
|
-
</li>
|
|
2747
|
-
</ul>
|
|
2748
|
-
</div>
|
|
2749
|
-
<input
|
|
2750
|
-
class="pf-c-form-control"
|
|
2751
|
-
type="search"
|
|
2752
|
-
id="masthead-toggle-group-filters-expanded-mobile-example-toolbar-masthead-toggle-group-filters-expanded-mobile-example-expandable-content-search-filter-input"
|
|
2753
|
-
name="masthead-toggle-group-filters-expanded-mobile-example-toolbar-search-filter-input"
|
|
2754
|
-
aria-label="input with dropdown and button"
|
|
2755
|
-
aria-describedby="masthead-toggle-group-filters-expanded-mobile-example-toolbar-masthead-toggle-group-filters-expanded-mobile-example-expandable-content-button"
|
|
2756
|
-
/>
|
|
2757
|
-
</div>
|
|
2758
|
-
</div>
|
|
2759
|
-
</div>
|
|
2760
|
-
</div>
|
|
2761
|
-
</div>
|
|
2762
|
-
</div>
|
|
2763
|
-
</header>
|
|
2764
|
-
|
|
2765
|
-
```
|