@patternfly/patternfly 4.147.1 → 4.150.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/ContextSelector/context-selector.css +68 -0
- package/components/ContextSelector/context-selector.scss +74 -0
- package/components/Dropdown/dropdown.css +1 -1
- package/components/Dropdown/dropdown.scss +1 -1
- package/components/Masthead/masthead.css +1 -0
- package/components/Masthead/masthead.scss +1 -0
- package/components/Nav/nav.css +41 -2
- package/components/Nav/nav.scss +54 -2
- package/components/Page/page.css +26 -3
- package/components/Page/page.scss +31 -0
- package/components/Panel/panel.css +78 -0
- package/components/Panel/panel.scss +99 -0
- package/components/Popover/popover.css +58 -2
- package/components/Popover/popover.scss +73 -2
- package/components/Tooltip/tooltip.css +4 -4
- package/components/Tooltip/tooltip.scss +4 -4
- package/components/_all.scss +1 -0
- package/docs/components/CodeBlock/examples/CodeBlock.md +0 -1
- package/docs/components/ContextSelector/examples/context-selector.md +2 -0
- package/docs/components/HelperText/examples/HelperText.md +0 -1
- package/docs/components/Menu/examples/Menu.md +19 -20
- package/docs/components/Nav/examples/Navigation.css +4 -0
- package/docs/components/Nav/examples/Navigation.md +113 -0
- package/docs/components/Panel/examples/Panel.md +163 -0
- package/docs/components/Popover/examples/Popover.md +237 -15
- package/docs/components/Select/examples/Select.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +0 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1391 -0
- package/package.json +1 -1
- package/patternfly-no-reset.css +278 -12
- package/patternfly.css +278 -12
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -0,0 +1,1391 @@
|
|
|
1
|
+
---
|
|
2
|
+
id: 'Context selector'
|
|
3
|
+
section: components
|
|
4
|
+
---## Examples
|
|
5
|
+
|
|
6
|
+
### Context selector in masthead
|
|
7
|
+
|
|
8
|
+
```html isFullscreen
|
|
9
|
+
<div class="pf-c-page" id="context-selector-in-masthead">
|
|
10
|
+
<a
|
|
11
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
|
+
href="#context-selector-in-masthead-main"
|
|
13
|
+
>Skip to content</a>
|
|
14
|
+
<header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
|
|
15
|
+
<span class="pf-c-masthead__toggle">
|
|
16
|
+
<button
|
|
17
|
+
class="pf-c-button pf-m-plain"
|
|
18
|
+
type="button"
|
|
19
|
+
aria-label="Global navigation"
|
|
20
|
+
>
|
|
21
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
22
|
+
</button>
|
|
23
|
+
</span>
|
|
24
|
+
|
|
25
|
+
<div class="pf-c-masthead__main">
|
|
26
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
27
|
+
<picture
|
|
28
|
+
class="pf-c-brand pf-m-picture"
|
|
29
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
30
|
+
>
|
|
31
|
+
<source
|
|
32
|
+
media="(min-width: 768px)"
|
|
33
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
34
|
+
/>
|
|
35
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
36
|
+
<img
|
|
37
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
38
|
+
alt="Fallback patternFly default logo"
|
|
39
|
+
/>
|
|
40
|
+
</picture>
|
|
41
|
+
</a>
|
|
42
|
+
</div>
|
|
43
|
+
<div class="pf-c-masthead__content">
|
|
44
|
+
<div
|
|
45
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
46
|
+
id="context-selector-in-masthead-masthead-toolbar"
|
|
47
|
+
>
|
|
48
|
+
<div class="pf-c-toolbar__content">
|
|
49
|
+
<div class="pf-c-toolbar__content-section">
|
|
50
|
+
<div class="pf-c-toolbar__item">
|
|
51
|
+
<div class="pf-c-context-selector pf-m-full-height">
|
|
52
|
+
<span
|
|
53
|
+
id="context-selector-in-masthead-masthead-context-selector-label"
|
|
54
|
+
hidden
|
|
55
|
+
>Selected project:</span>
|
|
56
|
+
<button
|
|
57
|
+
class="pf-c-context-selector__toggle"
|
|
58
|
+
aria-expanded="false"
|
|
59
|
+
id="context-selector-in-masthead-masthead-context-selector-toggle"
|
|
60
|
+
aria-labelledby="context-selector-in-masthead-masthead-context-selector-label context-selector-in-masthead-masthead-context-selector-toggle"
|
|
61
|
+
>
|
|
62
|
+
<span
|
|
63
|
+
class="pf-c-context-selector__toggle-text"
|
|
64
|
+
>Context selector</span>
|
|
65
|
+
<span class="pf-c-context-selector__toggle-icon">
|
|
66
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
67
|
+
</span>
|
|
68
|
+
</button>
|
|
69
|
+
<div class="pf-c-context-selector__menu" hidden>
|
|
70
|
+
<div class="pf-c-context-selector__menu-search">
|
|
71
|
+
<div class="pf-c-input-group">
|
|
72
|
+
<input
|
|
73
|
+
class="pf-c-form-control"
|
|
74
|
+
type="search"
|
|
75
|
+
placeholder="Search"
|
|
76
|
+
id="context-selector-in-masthead-masthead-context-selectortextInput1"
|
|
77
|
+
name="context-selector-in-masthead-masthead-context-selectortextInput1"
|
|
78
|
+
aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
|
|
79
|
+
/>
|
|
80
|
+
<button
|
|
81
|
+
class="pf-c-button pf-m-control"
|
|
82
|
+
type="button"
|
|
83
|
+
id="context-selector-in-masthead-masthead-context-selector-search-button"
|
|
84
|
+
aria-label="Search menu items"
|
|
85
|
+
>
|
|
86
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
87
|
+
</button>
|
|
88
|
+
</div>
|
|
89
|
+
</div>
|
|
90
|
+
<ul class="pf-c-context-selector__menu-list">
|
|
91
|
+
<li>
|
|
92
|
+
<a
|
|
93
|
+
class="pf-c-context-selector__menu-list-item"
|
|
94
|
+
href="#"
|
|
95
|
+
>Link</a>
|
|
96
|
+
</li>
|
|
97
|
+
<li>
|
|
98
|
+
<button
|
|
99
|
+
class="pf-c-context-selector__menu-list-item"
|
|
100
|
+
type="button"
|
|
101
|
+
>Action</button>
|
|
102
|
+
</li>
|
|
103
|
+
<li>
|
|
104
|
+
<a
|
|
105
|
+
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
106
|
+
href="#"
|
|
107
|
+
aria-disabled="true"
|
|
108
|
+
tabindex="-1"
|
|
109
|
+
>Disabled link</a>
|
|
110
|
+
</li>
|
|
111
|
+
<li>
|
|
112
|
+
<button
|
|
113
|
+
class="pf-c-context-selector__menu-list-item"
|
|
114
|
+
type="button"
|
|
115
|
+
disabled
|
|
116
|
+
>Disabled action</button>
|
|
117
|
+
</li>
|
|
118
|
+
<li>
|
|
119
|
+
<button
|
|
120
|
+
class="pf-c-context-selector__menu-list-item"
|
|
121
|
+
type="button"
|
|
122
|
+
>My project</button>
|
|
123
|
+
</li>
|
|
124
|
+
<li>
|
|
125
|
+
<button
|
|
126
|
+
class="pf-c-context-selector__menu-list-item"
|
|
127
|
+
type="button"
|
|
128
|
+
>OpenShift cluster</button>
|
|
129
|
+
</li>
|
|
130
|
+
<li>
|
|
131
|
+
<button
|
|
132
|
+
class="pf-c-context-selector__menu-list-item"
|
|
133
|
+
type="button"
|
|
134
|
+
>Production Ansible</button>
|
|
135
|
+
</li>
|
|
136
|
+
<li>
|
|
137
|
+
<button
|
|
138
|
+
class="pf-c-context-selector__menu-list-item"
|
|
139
|
+
type="button"
|
|
140
|
+
>AWS</button>
|
|
141
|
+
</li>
|
|
142
|
+
<li>
|
|
143
|
+
<button
|
|
144
|
+
class="pf-c-context-selector__menu-list-item"
|
|
145
|
+
type="button"
|
|
146
|
+
>Azure</button>
|
|
147
|
+
</li>
|
|
148
|
+
<li>
|
|
149
|
+
<button
|
|
150
|
+
class="pf-c-context-selector__menu-list-item"
|
|
151
|
+
type="button"
|
|
152
|
+
>My project</button>
|
|
153
|
+
</li>
|
|
154
|
+
<li>
|
|
155
|
+
<button
|
|
156
|
+
class="pf-c-context-selector__menu-list-item"
|
|
157
|
+
type="button"
|
|
158
|
+
>OpenShift cluster</button>
|
|
159
|
+
</li>
|
|
160
|
+
<li>
|
|
161
|
+
<button
|
|
162
|
+
class="pf-c-context-selector__menu-list-item"
|
|
163
|
+
type="button"
|
|
164
|
+
>Production Ansible</button>
|
|
165
|
+
</li>
|
|
166
|
+
<li>
|
|
167
|
+
<button
|
|
168
|
+
class="pf-c-context-selector__menu-list-item"
|
|
169
|
+
type="button"
|
|
170
|
+
>AWS</button>
|
|
171
|
+
</li>
|
|
172
|
+
<li>
|
|
173
|
+
<button
|
|
174
|
+
class="pf-c-context-selector__menu-list-item"
|
|
175
|
+
type="button"
|
|
176
|
+
>Azure</button>
|
|
177
|
+
</li>
|
|
178
|
+
</ul>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</header>
|
|
187
|
+
|
|
188
|
+
<aside class="pf-c-page__sidebar">
|
|
189
|
+
<div class="pf-c-page__sidebar-body">
|
|
190
|
+
<nav
|
|
191
|
+
class="pf-c-nav"
|
|
192
|
+
id="context-selector-in-masthead-primary-nav"
|
|
193
|
+
aria-label="Global"
|
|
194
|
+
>
|
|
195
|
+
<ul class="pf-c-nav__list">
|
|
196
|
+
<li class="pf-c-nav__item">
|
|
197
|
+
<a
|
|
198
|
+
href="#"
|
|
199
|
+
class="pf-c-nav__link pf-m-current"
|
|
200
|
+
aria-current="page"
|
|
201
|
+
>System panel</a>
|
|
202
|
+
</li>
|
|
203
|
+
<li class="pf-c-nav__item">
|
|
204
|
+
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
205
|
+
</li>
|
|
206
|
+
<li class="pf-c-nav__item">
|
|
207
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
208
|
+
</li>
|
|
209
|
+
<li class="pf-c-nav__item">
|
|
210
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
211
|
+
</li>
|
|
212
|
+
<li class="pf-c-nav__item">
|
|
213
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
214
|
+
</li>
|
|
215
|
+
</ul>
|
|
216
|
+
</nav>
|
|
217
|
+
</div>
|
|
218
|
+
</aside>
|
|
219
|
+
<main
|
|
220
|
+
class="pf-c-page__main"
|
|
221
|
+
tabindex="-1"
|
|
222
|
+
id="context-selector-in-masthead-main"
|
|
223
|
+
>
|
|
224
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
225
|
+
<div class="pf-c-page__main-body">
|
|
226
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
227
|
+
<ol class="pf-c-breadcrumb__list">
|
|
228
|
+
<li class="pf-c-breadcrumb__item">
|
|
229
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
230
|
+
</li>
|
|
231
|
+
<li class="pf-c-breadcrumb__item">
|
|
232
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
233
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
234
|
+
</span>
|
|
235
|
+
|
|
236
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
237
|
+
</li>
|
|
238
|
+
<li class="pf-c-breadcrumb__item">
|
|
239
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
240
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
241
|
+
</span>
|
|
242
|
+
|
|
243
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
244
|
+
</li>
|
|
245
|
+
<li class="pf-c-breadcrumb__item">
|
|
246
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
247
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
248
|
+
</span>
|
|
249
|
+
|
|
250
|
+
<a
|
|
251
|
+
href="#"
|
|
252
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
253
|
+
aria-current="page"
|
|
254
|
+
>Section landing</a>
|
|
255
|
+
</li>
|
|
256
|
+
</ol>
|
|
257
|
+
</nav>
|
|
258
|
+
</div>
|
|
259
|
+
</section>
|
|
260
|
+
|
|
261
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
262
|
+
<div class="pf-c-page__main-body">
|
|
263
|
+
<div class="pf-c-content">
|
|
264
|
+
<h1>Main title</h1>
|
|
265
|
+
<p>This is a demo of the page component.</p>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</section>
|
|
269
|
+
|
|
270
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
271
|
+
<div class="pf-c-page__main-body">
|
|
272
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
273
|
+
<div class="pf-l-gallery__item">
|
|
274
|
+
<div class="pf-c-card">
|
|
275
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
<div class="pf-l-gallery__item">
|
|
279
|
+
<div class="pf-c-card">
|
|
280
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
281
|
+
</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="pf-l-gallery__item">
|
|
284
|
+
<div class="pf-c-card">
|
|
285
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
<div class="pf-l-gallery__item">
|
|
289
|
+
<div class="pf-c-card">
|
|
290
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="pf-l-gallery__item">
|
|
294
|
+
<div class="pf-c-card">
|
|
295
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
<div class="pf-l-gallery__item">
|
|
299
|
+
<div class="pf-c-card">
|
|
300
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div class="pf-l-gallery__item">
|
|
304
|
+
<div class="pf-c-card">
|
|
305
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="pf-l-gallery__item">
|
|
309
|
+
<div class="pf-c-card">
|
|
310
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="pf-l-gallery__item">
|
|
314
|
+
<div class="pf-c-card">
|
|
315
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="pf-l-gallery__item">
|
|
319
|
+
<div class="pf-c-card">
|
|
320
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
</div>
|
|
324
|
+
</div>
|
|
325
|
+
</section>
|
|
326
|
+
</main>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
```
|
|
330
|
+
|
|
331
|
+
### Context selector in sidebar
|
|
332
|
+
|
|
333
|
+
```html isFullscreen
|
|
334
|
+
<div class="pf-c-page" id="context-selector-in-sidebar">
|
|
335
|
+
<header class="pf-c-page__header">
|
|
336
|
+
<a
|
|
337
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
338
|
+
href="#main-content-context-selector-in-sidebar"
|
|
339
|
+
>Skip to content</a>
|
|
340
|
+
<header class="pf-c-masthead" id="context-selector-in-sidebar-masthead">
|
|
341
|
+
<span class="pf-c-masthead__toggle">
|
|
342
|
+
<button
|
|
343
|
+
class="pf-c-button pf-m-plain"
|
|
344
|
+
type="button"
|
|
345
|
+
aria-label="Global navigation"
|
|
346
|
+
>
|
|
347
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
348
|
+
</button>
|
|
349
|
+
</span>
|
|
350
|
+
<div class="pf-c-masthead__main">
|
|
351
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
352
|
+
<img
|
|
353
|
+
class="pf-c-brand"
|
|
354
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
355
|
+
alt="PatternFly logo"
|
|
356
|
+
/>
|
|
357
|
+
</a>
|
|
358
|
+
</div>
|
|
359
|
+
<div class="pf-c-masthead__content">test</div>
|
|
360
|
+
</header>
|
|
361
|
+
</header>
|
|
362
|
+
<div class="pf-c-page__sidebar">
|
|
363
|
+
<div class="pf-c-page__sidebar-body pf-m-menu">
|
|
364
|
+
<div class="pf-c-context-selector pf-m-page-insets pf-m-large">
|
|
365
|
+
<span
|
|
366
|
+
id="context-selector-collapsed-example-label"
|
|
367
|
+
hidden
|
|
368
|
+
>Selected project:</span>
|
|
369
|
+
<button
|
|
370
|
+
class="pf-c-context-selector__toggle"
|
|
371
|
+
aria-expanded="false"
|
|
372
|
+
id="context-selector-collapsed-example-toggle"
|
|
373
|
+
aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
|
|
374
|
+
>
|
|
375
|
+
<span class="pf-c-context-selector__toggle-text">My project</span>
|
|
376
|
+
<span class="pf-c-context-selector__toggle-icon">
|
|
377
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
378
|
+
</span>
|
|
379
|
+
</button>
|
|
380
|
+
<div class="pf-c-context-selector__menu" hidden>
|
|
381
|
+
<div class="pf-c-context-selector__menu-search">
|
|
382
|
+
<div class="pf-c-input-group">
|
|
383
|
+
<input
|
|
384
|
+
class="pf-c-form-control"
|
|
385
|
+
type="search"
|
|
386
|
+
placeholder="Search"
|
|
387
|
+
id="textInput1"
|
|
388
|
+
name="textInput1"
|
|
389
|
+
aria-labelledby="context-selector-collapsed-example-search-button"
|
|
390
|
+
/>
|
|
391
|
+
<button
|
|
392
|
+
class="pf-c-button pf-m-control"
|
|
393
|
+
type="button"
|
|
394
|
+
id="context-selector-collapsed-example-search-button"
|
|
395
|
+
aria-label="Search menu items"
|
|
396
|
+
>
|
|
397
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
398
|
+
</button>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
<ul class="pf-c-context-selector__menu-list">
|
|
402
|
+
<li>
|
|
403
|
+
<a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
|
|
404
|
+
</li>
|
|
405
|
+
<li>
|
|
406
|
+
<button
|
|
407
|
+
class="pf-c-context-selector__menu-list-item"
|
|
408
|
+
type="button"
|
|
409
|
+
>Action</button>
|
|
410
|
+
</li>
|
|
411
|
+
<li>
|
|
412
|
+
<a
|
|
413
|
+
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
414
|
+
href="#"
|
|
415
|
+
aria-disabled="true"
|
|
416
|
+
tabindex="-1"
|
|
417
|
+
>Disabled link</a>
|
|
418
|
+
</li>
|
|
419
|
+
<li>
|
|
420
|
+
<button
|
|
421
|
+
class="pf-c-context-selector__menu-list-item"
|
|
422
|
+
type="button"
|
|
423
|
+
disabled
|
|
424
|
+
>Disabled action</button>
|
|
425
|
+
</li>
|
|
426
|
+
<li>
|
|
427
|
+
<button
|
|
428
|
+
class="pf-c-context-selector__menu-list-item"
|
|
429
|
+
type="button"
|
|
430
|
+
>My project</button>
|
|
431
|
+
</li>
|
|
432
|
+
<li>
|
|
433
|
+
<button
|
|
434
|
+
class="pf-c-context-selector__menu-list-item"
|
|
435
|
+
type="button"
|
|
436
|
+
>OpenShift cluster</button>
|
|
437
|
+
</li>
|
|
438
|
+
<li>
|
|
439
|
+
<button
|
|
440
|
+
class="pf-c-context-selector__menu-list-item"
|
|
441
|
+
type="button"
|
|
442
|
+
>Production Ansible</button>
|
|
443
|
+
</li>
|
|
444
|
+
<li>
|
|
445
|
+
<button
|
|
446
|
+
class="pf-c-context-selector__menu-list-item"
|
|
447
|
+
type="button"
|
|
448
|
+
>AWS</button>
|
|
449
|
+
</li>
|
|
450
|
+
<li>
|
|
451
|
+
<button
|
|
452
|
+
class="pf-c-context-selector__menu-list-item"
|
|
453
|
+
type="button"
|
|
454
|
+
>Azure</button>
|
|
455
|
+
</li>
|
|
456
|
+
<li>
|
|
457
|
+
<button
|
|
458
|
+
class="pf-c-context-selector__menu-list-item"
|
|
459
|
+
type="button"
|
|
460
|
+
>My project</button>
|
|
461
|
+
</li>
|
|
462
|
+
<li>
|
|
463
|
+
<button
|
|
464
|
+
class="pf-c-context-selector__menu-list-item"
|
|
465
|
+
type="button"
|
|
466
|
+
>OpenShift cluster</button>
|
|
467
|
+
</li>
|
|
468
|
+
<li>
|
|
469
|
+
<button
|
|
470
|
+
class="pf-c-context-selector__menu-list-item"
|
|
471
|
+
type="button"
|
|
472
|
+
>Production Ansible</button>
|
|
473
|
+
</li>
|
|
474
|
+
<li>
|
|
475
|
+
<button
|
|
476
|
+
class="pf-c-context-selector__menu-list-item"
|
|
477
|
+
type="button"
|
|
478
|
+
>AWS</button>
|
|
479
|
+
</li>
|
|
480
|
+
<li>
|
|
481
|
+
<button
|
|
482
|
+
class="pf-c-context-selector__menu-list-item"
|
|
483
|
+
type="button"
|
|
484
|
+
>Azure</button>
|
|
485
|
+
</li>
|
|
486
|
+
</ul>
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
<div class="pf-c-page__sidebar-body">
|
|
491
|
+
<nav
|
|
492
|
+
class="pf-c-nav"
|
|
493
|
+
id="context-selector-in-sidebar-primary-nav"
|
|
494
|
+
aria-label="Global"
|
|
495
|
+
>
|
|
496
|
+
<ul class="pf-c-nav__list">
|
|
497
|
+
<li class="pf-c-nav__item">
|
|
498
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
499
|
+
</li>
|
|
500
|
+
<li class="pf-c-nav__item">
|
|
501
|
+
<a
|
|
502
|
+
href="#"
|
|
503
|
+
class="pf-c-nav__link pf-m-current"
|
|
504
|
+
aria-current="page"
|
|
505
|
+
>Policy</a>
|
|
506
|
+
</li>
|
|
507
|
+
<li class="pf-c-nav__item">
|
|
508
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
509
|
+
</li>
|
|
510
|
+
<li class="pf-c-nav__item">
|
|
511
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
512
|
+
</li>
|
|
513
|
+
<li class="pf-c-nav__item">
|
|
514
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
515
|
+
</li>
|
|
516
|
+
</ul>
|
|
517
|
+
</nav>
|
|
518
|
+
</div>
|
|
519
|
+
</div>
|
|
520
|
+
<main
|
|
521
|
+
class="pf-c-page__main"
|
|
522
|
+
tabindex="-1"
|
|
523
|
+
id="main-content-context-selector-in-sidebar"
|
|
524
|
+
>
|
|
525
|
+
<section
|
|
526
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
|
|
527
|
+
>
|
|
528
|
+
<div class="pf-c-page__main-body">
|
|
529
|
+
<div class="pf-c-content">
|
|
530
|
+
<h1>Main title</h1>
|
|
531
|
+
<p>This is a demo of the page component.</p>
|
|
532
|
+
</div>
|
|
533
|
+
</div>
|
|
534
|
+
</section>
|
|
535
|
+
<section
|
|
536
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
537
|
+
>
|
|
538
|
+
<div class="pf-c-page__main-body">
|
|
539
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
540
|
+
<div class="pf-l-gallery__item">
|
|
541
|
+
<div class="pf-c-card">
|
|
542
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
543
|
+
</div>
|
|
544
|
+
</div>
|
|
545
|
+
<div class="pf-l-gallery__item">
|
|
546
|
+
<div class="pf-c-card">
|
|
547
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
548
|
+
</div>
|
|
549
|
+
</div>
|
|
550
|
+
<div class="pf-l-gallery__item">
|
|
551
|
+
<div class="pf-c-card">
|
|
552
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
<div class="pf-l-gallery__item">
|
|
556
|
+
<div class="pf-c-card">
|
|
557
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
558
|
+
</div>
|
|
559
|
+
</div>
|
|
560
|
+
<div class="pf-l-gallery__item">
|
|
561
|
+
<div class="pf-c-card">
|
|
562
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
<div class="pf-l-gallery__item">
|
|
566
|
+
<div class="pf-c-card">
|
|
567
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
568
|
+
</div>
|
|
569
|
+
</div>
|
|
570
|
+
<div class="pf-l-gallery__item">
|
|
571
|
+
<div class="pf-c-card">
|
|
572
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
573
|
+
</div>
|
|
574
|
+
</div>
|
|
575
|
+
<div class="pf-l-gallery__item">
|
|
576
|
+
<div class="pf-c-card">
|
|
577
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="pf-l-gallery__item">
|
|
581
|
+
<div class="pf-c-card">
|
|
582
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
583
|
+
</div>
|
|
584
|
+
</div>
|
|
585
|
+
<div class="pf-l-gallery__item">
|
|
586
|
+
<div class="pf-c-card">
|
|
587
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</div>
|
|
592
|
+
</section>
|
|
593
|
+
<section
|
|
594
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
595
|
+
>
|
|
596
|
+
<div class="pf-c-page__main-body">
|
|
597
|
+
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
598
|
+
</div>
|
|
599
|
+
</section>
|
|
600
|
+
</main>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
```
|
|
604
|
+
|
|
605
|
+
### Context selector in sidebar expanded
|
|
606
|
+
|
|
607
|
+
```html isFullscreen
|
|
608
|
+
<div class="pf-c-page" id="context-selector-in-sidebar-expanded">
|
|
609
|
+
<header class="pf-c-page__header">
|
|
610
|
+
<a
|
|
611
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
612
|
+
href="#main-content-context-selector-in-sidebar-expanded"
|
|
613
|
+
>Skip to content</a>
|
|
614
|
+
<header
|
|
615
|
+
class="pf-c-masthead"
|
|
616
|
+
id="context-selector-in-sidebar-expanded-masthead"
|
|
617
|
+
>
|
|
618
|
+
<span class="pf-c-masthead__toggle">
|
|
619
|
+
<button
|
|
620
|
+
class="pf-c-button pf-m-plain"
|
|
621
|
+
type="button"
|
|
622
|
+
aria-label="Global navigation"
|
|
623
|
+
>
|
|
624
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
625
|
+
</button>
|
|
626
|
+
</span>
|
|
627
|
+
<div class="pf-c-masthead__main">
|
|
628
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
629
|
+
<img
|
|
630
|
+
class="pf-c-brand"
|
|
631
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
632
|
+
alt="PatternFly logo"
|
|
633
|
+
/>
|
|
634
|
+
</a>
|
|
635
|
+
</div>
|
|
636
|
+
<div class="pf-c-masthead__content">test</div>
|
|
637
|
+
</header>
|
|
638
|
+
</header>
|
|
639
|
+
<div class="pf-c-page__sidebar">
|
|
640
|
+
<div class="pf-c-page__sidebar-body pf-m-menu">
|
|
641
|
+
<div
|
|
642
|
+
class="pf-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
|
|
643
|
+
>
|
|
644
|
+
<span
|
|
645
|
+
id="context-selector-collapsed-example-label"
|
|
646
|
+
hidden
|
|
647
|
+
>Selected project:</span>
|
|
648
|
+
<button
|
|
649
|
+
class="pf-c-context-selector__toggle"
|
|
650
|
+
aria-expanded="true"
|
|
651
|
+
id="context-selector-collapsed-example-toggle"
|
|
652
|
+
aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
|
|
653
|
+
>
|
|
654
|
+
<span class="pf-c-context-selector__toggle-text">My project</span>
|
|
655
|
+
<span class="pf-c-context-selector__toggle-icon">
|
|
656
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
657
|
+
</span>
|
|
658
|
+
</button>
|
|
659
|
+
<div class="pf-c-context-selector__menu">
|
|
660
|
+
<div class="pf-c-context-selector__menu-search">
|
|
661
|
+
<div class="pf-c-input-group">
|
|
662
|
+
<input
|
|
663
|
+
class="pf-c-form-control"
|
|
664
|
+
type="search"
|
|
665
|
+
placeholder="Search"
|
|
666
|
+
id="textInput1"
|
|
667
|
+
name="textInput1"
|
|
668
|
+
aria-labelledby="context-selector-collapsed-example-search-button"
|
|
669
|
+
/>
|
|
670
|
+
<button
|
|
671
|
+
class="pf-c-button pf-m-control"
|
|
672
|
+
type="button"
|
|
673
|
+
id="context-selector-collapsed-example-search-button"
|
|
674
|
+
aria-label="Search menu items"
|
|
675
|
+
>
|
|
676
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
677
|
+
</button>
|
|
678
|
+
</div>
|
|
679
|
+
</div>
|
|
680
|
+
<ul class="pf-c-context-selector__menu-list">
|
|
681
|
+
<li>
|
|
682
|
+
<a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
|
|
683
|
+
</li>
|
|
684
|
+
<li>
|
|
685
|
+
<button
|
|
686
|
+
class="pf-c-context-selector__menu-list-item"
|
|
687
|
+
type="button"
|
|
688
|
+
>Action</button>
|
|
689
|
+
</li>
|
|
690
|
+
<li>
|
|
691
|
+
<a
|
|
692
|
+
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
693
|
+
href="#"
|
|
694
|
+
aria-disabled="true"
|
|
695
|
+
tabindex="-1"
|
|
696
|
+
>Disabled link</a>
|
|
697
|
+
</li>
|
|
698
|
+
<li>
|
|
699
|
+
<button
|
|
700
|
+
class="pf-c-context-selector__menu-list-item"
|
|
701
|
+
type="button"
|
|
702
|
+
disabled
|
|
703
|
+
>Disabled action</button>
|
|
704
|
+
</li>
|
|
705
|
+
<li>
|
|
706
|
+
<button
|
|
707
|
+
class="pf-c-context-selector__menu-list-item"
|
|
708
|
+
type="button"
|
|
709
|
+
>My project</button>
|
|
710
|
+
</li>
|
|
711
|
+
<li>
|
|
712
|
+
<button
|
|
713
|
+
class="pf-c-context-selector__menu-list-item"
|
|
714
|
+
type="button"
|
|
715
|
+
>OpenShift cluster</button>
|
|
716
|
+
</li>
|
|
717
|
+
<li>
|
|
718
|
+
<button
|
|
719
|
+
class="pf-c-context-selector__menu-list-item"
|
|
720
|
+
type="button"
|
|
721
|
+
>Production Ansible</button>
|
|
722
|
+
</li>
|
|
723
|
+
<li>
|
|
724
|
+
<button
|
|
725
|
+
class="pf-c-context-selector__menu-list-item"
|
|
726
|
+
type="button"
|
|
727
|
+
>AWS</button>
|
|
728
|
+
</li>
|
|
729
|
+
<li>
|
|
730
|
+
<button
|
|
731
|
+
class="pf-c-context-selector__menu-list-item"
|
|
732
|
+
type="button"
|
|
733
|
+
>Azure</button>
|
|
734
|
+
</li>
|
|
735
|
+
<li>
|
|
736
|
+
<button
|
|
737
|
+
class="pf-c-context-selector__menu-list-item"
|
|
738
|
+
type="button"
|
|
739
|
+
>My project</button>
|
|
740
|
+
</li>
|
|
741
|
+
<li>
|
|
742
|
+
<button
|
|
743
|
+
class="pf-c-context-selector__menu-list-item"
|
|
744
|
+
type="button"
|
|
745
|
+
>OpenShift cluster</button>
|
|
746
|
+
</li>
|
|
747
|
+
<li>
|
|
748
|
+
<button
|
|
749
|
+
class="pf-c-context-selector__menu-list-item"
|
|
750
|
+
type="button"
|
|
751
|
+
>Production Ansible</button>
|
|
752
|
+
</li>
|
|
753
|
+
<li>
|
|
754
|
+
<button
|
|
755
|
+
class="pf-c-context-selector__menu-list-item"
|
|
756
|
+
type="button"
|
|
757
|
+
>AWS</button>
|
|
758
|
+
</li>
|
|
759
|
+
<li>
|
|
760
|
+
<button
|
|
761
|
+
class="pf-c-context-selector__menu-list-item"
|
|
762
|
+
type="button"
|
|
763
|
+
>Azure</button>
|
|
764
|
+
</li>
|
|
765
|
+
</ul>
|
|
766
|
+
</div>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
<div class="pf-c-page__sidebar-body">
|
|
770
|
+
<nav
|
|
771
|
+
class="pf-c-nav"
|
|
772
|
+
id="context-selector-in-sidebar-expanded-primary-nav"
|
|
773
|
+
aria-label="Global"
|
|
774
|
+
>
|
|
775
|
+
<ul class="pf-c-nav__list">
|
|
776
|
+
<li class="pf-c-nav__item">
|
|
777
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
778
|
+
</li>
|
|
779
|
+
<li class="pf-c-nav__item">
|
|
780
|
+
<a
|
|
781
|
+
href="#"
|
|
782
|
+
class="pf-c-nav__link pf-m-current"
|
|
783
|
+
aria-current="page"
|
|
784
|
+
>Policy</a>
|
|
785
|
+
</li>
|
|
786
|
+
<li class="pf-c-nav__item">
|
|
787
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
788
|
+
</li>
|
|
789
|
+
<li class="pf-c-nav__item">
|
|
790
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
791
|
+
</li>
|
|
792
|
+
<li class="pf-c-nav__item">
|
|
793
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
794
|
+
</li>
|
|
795
|
+
</ul>
|
|
796
|
+
</nav>
|
|
797
|
+
</div>
|
|
798
|
+
</div>
|
|
799
|
+
<main
|
|
800
|
+
class="pf-c-page__main"
|
|
801
|
+
tabindex="-1"
|
|
802
|
+
id="main-content-context-selector-in-sidebar-expanded"
|
|
803
|
+
>
|
|
804
|
+
<section
|
|
805
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
|
|
806
|
+
>
|
|
807
|
+
<div class="pf-c-page__main-body">
|
|
808
|
+
<div class="pf-c-content">
|
|
809
|
+
<h1>Main title</h1>
|
|
810
|
+
<p>This is a demo of the page component.</p>
|
|
811
|
+
</div>
|
|
812
|
+
</div>
|
|
813
|
+
</section>
|
|
814
|
+
<section
|
|
815
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
816
|
+
>
|
|
817
|
+
<div class="pf-c-page__main-body">
|
|
818
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
819
|
+
<div class="pf-l-gallery__item">
|
|
820
|
+
<div class="pf-c-card">
|
|
821
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
822
|
+
</div>
|
|
823
|
+
</div>
|
|
824
|
+
<div class="pf-l-gallery__item">
|
|
825
|
+
<div class="pf-c-card">
|
|
826
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
827
|
+
</div>
|
|
828
|
+
</div>
|
|
829
|
+
<div class="pf-l-gallery__item">
|
|
830
|
+
<div class="pf-c-card">
|
|
831
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
832
|
+
</div>
|
|
833
|
+
</div>
|
|
834
|
+
<div class="pf-l-gallery__item">
|
|
835
|
+
<div class="pf-c-card">
|
|
836
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
837
|
+
</div>
|
|
838
|
+
</div>
|
|
839
|
+
<div class="pf-l-gallery__item">
|
|
840
|
+
<div class="pf-c-card">
|
|
841
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
<div class="pf-l-gallery__item">
|
|
845
|
+
<div class="pf-c-card">
|
|
846
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
847
|
+
</div>
|
|
848
|
+
</div>
|
|
849
|
+
<div class="pf-l-gallery__item">
|
|
850
|
+
<div class="pf-c-card">
|
|
851
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
852
|
+
</div>
|
|
853
|
+
</div>
|
|
854
|
+
<div class="pf-l-gallery__item">
|
|
855
|
+
<div class="pf-c-card">
|
|
856
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
857
|
+
</div>
|
|
858
|
+
</div>
|
|
859
|
+
<div class="pf-l-gallery__item">
|
|
860
|
+
<div class="pf-c-card">
|
|
861
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
862
|
+
</div>
|
|
863
|
+
</div>
|
|
864
|
+
<div class="pf-l-gallery__item">
|
|
865
|
+
<div class="pf-c-card">
|
|
866
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
867
|
+
</div>
|
|
868
|
+
</div>
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
</section>
|
|
872
|
+
<section
|
|
873
|
+
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
874
|
+
>
|
|
875
|
+
<div class="pf-c-page__main-body">
|
|
876
|
+
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
877
|
+
</div>
|
|
878
|
+
</section>
|
|
879
|
+
</main>
|
|
880
|
+
</div>
|
|
881
|
+
|
|
882
|
+
```
|
|
883
|
+
|
|
884
|
+
### Context selector in page content
|
|
885
|
+
|
|
886
|
+
```html isFullscreen
|
|
887
|
+
<div class="pf-c-page" id="context-selector-in-page-content">
|
|
888
|
+
<a
|
|
889
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
890
|
+
href="#main-content-context-selector-in-page-content"
|
|
891
|
+
>Skip to content</a>
|
|
892
|
+
<header class="pf-c-page__header">
|
|
893
|
+
<div class="pf-c-page__header-brand">
|
|
894
|
+
<div class="pf-c-page__header-brand-toggle">
|
|
895
|
+
<button
|
|
896
|
+
class="pf-c-button pf-m-plain"
|
|
897
|
+
type="button"
|
|
898
|
+
id="context-selector-in-page-content-nav-toggle"
|
|
899
|
+
aria-label="Global navigation"
|
|
900
|
+
aria-expanded="true"
|
|
901
|
+
aria-controls="context-selector-in-page-content-primary-nav"
|
|
902
|
+
>
|
|
903
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
904
|
+
</button>
|
|
905
|
+
</div>
|
|
906
|
+
<a href="#" class="pf-c-page__header-brand-link">
|
|
907
|
+
<img
|
|
908
|
+
class="pf-c-brand"
|
|
909
|
+
src="/assets/images/PF-Masthead-Logo.svg"
|
|
910
|
+
alt="PatternFly logo"
|
|
911
|
+
/>
|
|
912
|
+
</a>
|
|
913
|
+
</div>
|
|
914
|
+
|
|
915
|
+
<div class="pf-c-page__header-tools">
|
|
916
|
+
<div class="pf-c-page__header-tools-group">
|
|
917
|
+
<div
|
|
918
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
919
|
+
>
|
|
920
|
+
<button
|
|
921
|
+
class="pf-c-button pf-m-plain"
|
|
922
|
+
type="button"
|
|
923
|
+
aria-label="Settings"
|
|
924
|
+
>
|
|
925
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
926
|
+
</button>
|
|
927
|
+
</div>
|
|
928
|
+
<div
|
|
929
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
930
|
+
>
|
|
931
|
+
<button
|
|
932
|
+
class="pf-c-button pf-m-plain"
|
|
933
|
+
type="button"
|
|
934
|
+
aria-label="Help"
|
|
935
|
+
>
|
|
936
|
+
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
937
|
+
</button>
|
|
938
|
+
</div>
|
|
939
|
+
</div>
|
|
940
|
+
<div class="pf-c-page__header-tools-group">
|
|
941
|
+
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
942
|
+
<div class="pf-c-dropdown">
|
|
943
|
+
<button
|
|
944
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
945
|
+
id="context-selector-in-page-content-dropdown-kebab-1-button"
|
|
946
|
+
aria-expanded="false"
|
|
947
|
+
type="button"
|
|
948
|
+
aria-label="Actions"
|
|
949
|
+
>
|
|
950
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
951
|
+
</button>
|
|
952
|
+
<ul
|
|
953
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
954
|
+
aria-labelledby="context-selector-in-page-content-dropdown-kebab-1-button"
|
|
955
|
+
hidden
|
|
956
|
+
>
|
|
957
|
+
<li>
|
|
958
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
959
|
+
</li>
|
|
960
|
+
<li>
|
|
961
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
962
|
+
</li>
|
|
963
|
+
<li>
|
|
964
|
+
<a
|
|
965
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
966
|
+
href="#"
|
|
967
|
+
aria-disabled="true"
|
|
968
|
+
tabindex="-1"
|
|
969
|
+
>Disabled link</a>
|
|
970
|
+
</li>
|
|
971
|
+
<li>
|
|
972
|
+
<button
|
|
973
|
+
class="pf-c-dropdown__menu-item"
|
|
974
|
+
type="button"
|
|
975
|
+
disabled
|
|
976
|
+
>Disabled action</button>
|
|
977
|
+
</li>
|
|
978
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
979
|
+
<li>
|
|
980
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
981
|
+
</li>
|
|
982
|
+
</ul>
|
|
983
|
+
</div>
|
|
984
|
+
</div>
|
|
985
|
+
<div
|
|
986
|
+
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
987
|
+
>
|
|
988
|
+
<div class="pf-c-dropdown">
|
|
989
|
+
<button
|
|
990
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
991
|
+
id="context-selector-in-page-content-dropdown-kebab-2-button"
|
|
992
|
+
aria-expanded="false"
|
|
993
|
+
type="button"
|
|
994
|
+
>
|
|
995
|
+
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
996
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
997
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
998
|
+
</span>
|
|
999
|
+
</button>
|
|
1000
|
+
<ul
|
|
1001
|
+
class="pf-c-dropdown__menu"
|
|
1002
|
+
aria-labelledby="context-selector-in-page-content-dropdown-kebab-2-button"
|
|
1003
|
+
hidden
|
|
1004
|
+
>
|
|
1005
|
+
<li>
|
|
1006
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1007
|
+
</li>
|
|
1008
|
+
<li>
|
|
1009
|
+
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1010
|
+
</li>
|
|
1011
|
+
<li>
|
|
1012
|
+
<a
|
|
1013
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1014
|
+
href="#"
|
|
1015
|
+
aria-disabled="true"
|
|
1016
|
+
tabindex="-1"
|
|
1017
|
+
>Disabled link</a>
|
|
1018
|
+
</li>
|
|
1019
|
+
<li>
|
|
1020
|
+
<button
|
|
1021
|
+
class="pf-c-dropdown__menu-item"
|
|
1022
|
+
type="button"
|
|
1023
|
+
disabled
|
|
1024
|
+
>Disabled action</button>
|
|
1025
|
+
</li>
|
|
1026
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1027
|
+
<li>
|
|
1028
|
+
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1029
|
+
</li>
|
|
1030
|
+
</ul>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
</div>
|
|
1034
|
+
<img
|
|
1035
|
+
class="pf-c-avatar"
|
|
1036
|
+
src="/assets/images/img_avatar.svg"
|
|
1037
|
+
alt="Avatar image"
|
|
1038
|
+
/>
|
|
1039
|
+
</div>
|
|
1040
|
+
</header>
|
|
1041
|
+
<div class="pf-c-page__sidebar">
|
|
1042
|
+
<div class="pf-c-page__sidebar-body">
|
|
1043
|
+
<nav
|
|
1044
|
+
class="pf-c-nav"
|
|
1045
|
+
id="context-selector-in-page-content-primary-nav"
|
|
1046
|
+
aria-label="Global"
|
|
1047
|
+
>
|
|
1048
|
+
<ul class="pf-c-nav__list">
|
|
1049
|
+
<li class="pf-c-nav__item">
|
|
1050
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1051
|
+
</li>
|
|
1052
|
+
<li class="pf-c-nav__item">
|
|
1053
|
+
<a
|
|
1054
|
+
href="#"
|
|
1055
|
+
class="pf-c-nav__link pf-m-current"
|
|
1056
|
+
aria-current="page"
|
|
1057
|
+
>Policy</a>
|
|
1058
|
+
</li>
|
|
1059
|
+
<li class="pf-c-nav__item">
|
|
1060
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1061
|
+
</li>
|
|
1062
|
+
<li class="pf-c-nav__item">
|
|
1063
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1064
|
+
</li>
|
|
1065
|
+
<li class="pf-c-nav__item">
|
|
1066
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1067
|
+
</li>
|
|
1068
|
+
</ul>
|
|
1069
|
+
</nav>
|
|
1070
|
+
</div>
|
|
1071
|
+
</div>
|
|
1072
|
+
<main
|
|
1073
|
+
class="pf-c-page__main"
|
|
1074
|
+
tabindex="-1"
|
|
1075
|
+
id="main-content-context-selector-in-page-content"
|
|
1076
|
+
>
|
|
1077
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding">
|
|
1078
|
+
<div class="pf-c-page__main-body">
|
|
1079
|
+
<div class="pf-c-toolbar pf-m-inset-none" id="toolbar-simple-example">
|
|
1080
|
+
<div class="pf-c-toolbar__content">
|
|
1081
|
+
<div class="pf-c-toolbar__content-section">
|
|
1082
|
+
<div class="pf-c-toolbar__item">
|
|
1083
|
+
<div
|
|
1084
|
+
class="pf-c-context-selector pf-m-page-insets pf-m-width-auto"
|
|
1085
|
+
style="--pf-c-context-selector--Width: 270px;"
|
|
1086
|
+
>
|
|
1087
|
+
<span
|
|
1088
|
+
id="context-selector-in-page-content-context-selector-label"
|
|
1089
|
+
hidden
|
|
1090
|
+
>Selected project:</span>
|
|
1091
|
+
<button
|
|
1092
|
+
class="pf-c-context-selector__toggle pf-m-text pf-m-plain"
|
|
1093
|
+
aria-expanded="false"
|
|
1094
|
+
id="context-selector-in-page-content-context-selector-toggle"
|
|
1095
|
+
aria-labelledby="context-selector-in-page-content-context-selector-label context-selector-in-page-content-context-selector-toggle"
|
|
1096
|
+
>
|
|
1097
|
+
<span
|
|
1098
|
+
class="pf-c-context-selector__toggle-text"
|
|
1099
|
+
>Project: openshift-apple1</span>
|
|
1100
|
+
<span class="pf-c-context-selector__toggle-icon">
|
|
1101
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1102
|
+
</span>
|
|
1103
|
+
</button>
|
|
1104
|
+
<div class="pf-c-context-selector__menu" hidden>
|
|
1105
|
+
<div class="pf-c-context-selector__menu-search">
|
|
1106
|
+
<div class="pf-c-input-group">
|
|
1107
|
+
<input
|
|
1108
|
+
class="pf-c-form-control"
|
|
1109
|
+
type="search"
|
|
1110
|
+
placeholder="Search"
|
|
1111
|
+
id="textInput1"
|
|
1112
|
+
name="textInput1"
|
|
1113
|
+
aria-labelledby="context-selector-in-page-content-context-selector-search-button"
|
|
1114
|
+
/>
|
|
1115
|
+
<button
|
|
1116
|
+
class="pf-c-button pf-m-control"
|
|
1117
|
+
type="button"
|
|
1118
|
+
id="context-selector-in-page-content-context-selector-search-button"
|
|
1119
|
+
aria-label="Search menu items"
|
|
1120
|
+
>
|
|
1121
|
+
<i class="fas fa-search" aria-hidden="true"></i>
|
|
1122
|
+
</button>
|
|
1123
|
+
</div>
|
|
1124
|
+
</div>
|
|
1125
|
+
<ul class="pf-c-context-selector__menu-list">
|
|
1126
|
+
<li>
|
|
1127
|
+
<a
|
|
1128
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1129
|
+
href="#"
|
|
1130
|
+
>Link</a>
|
|
1131
|
+
</li>
|
|
1132
|
+
<li>
|
|
1133
|
+
<button
|
|
1134
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1135
|
+
type="button"
|
|
1136
|
+
>Action</button>
|
|
1137
|
+
</li>
|
|
1138
|
+
<li>
|
|
1139
|
+
<a
|
|
1140
|
+
class="pf-c-context-selector__menu-list-item pf-m-disabled"
|
|
1141
|
+
href="#"
|
|
1142
|
+
aria-disabled="true"
|
|
1143
|
+
tabindex="-1"
|
|
1144
|
+
>Disabled link</a>
|
|
1145
|
+
</li>
|
|
1146
|
+
<li>
|
|
1147
|
+
<button
|
|
1148
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1149
|
+
type="button"
|
|
1150
|
+
disabled
|
|
1151
|
+
>Disabled action</button>
|
|
1152
|
+
</li>
|
|
1153
|
+
<li>
|
|
1154
|
+
<button
|
|
1155
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1156
|
+
type="button"
|
|
1157
|
+
>My project</button>
|
|
1158
|
+
</li>
|
|
1159
|
+
<li>
|
|
1160
|
+
<button
|
|
1161
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1162
|
+
type="button"
|
|
1163
|
+
>OpenShift cluster</button>
|
|
1164
|
+
</li>
|
|
1165
|
+
<li>
|
|
1166
|
+
<button
|
|
1167
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1168
|
+
type="button"
|
|
1169
|
+
>Production Ansible</button>
|
|
1170
|
+
</li>
|
|
1171
|
+
<li>
|
|
1172
|
+
<button
|
|
1173
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1174
|
+
type="button"
|
|
1175
|
+
>AWS</button>
|
|
1176
|
+
</li>
|
|
1177
|
+
<li>
|
|
1178
|
+
<button
|
|
1179
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1180
|
+
type="button"
|
|
1181
|
+
>Azure</button>
|
|
1182
|
+
</li>
|
|
1183
|
+
<li>
|
|
1184
|
+
<button
|
|
1185
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1186
|
+
type="button"
|
|
1187
|
+
>My project</button>
|
|
1188
|
+
</li>
|
|
1189
|
+
<li>
|
|
1190
|
+
<button
|
|
1191
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1192
|
+
type="button"
|
|
1193
|
+
>OpenShift cluster</button>
|
|
1194
|
+
</li>
|
|
1195
|
+
<li>
|
|
1196
|
+
<button
|
|
1197
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1198
|
+
type="button"
|
|
1199
|
+
>Production Ansible</button>
|
|
1200
|
+
</li>
|
|
1201
|
+
<li>
|
|
1202
|
+
<button
|
|
1203
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1204
|
+
type="button"
|
|
1205
|
+
>AWS</button>
|
|
1206
|
+
</li>
|
|
1207
|
+
<li>
|
|
1208
|
+
<button
|
|
1209
|
+
class="pf-c-context-selector__menu-list-item"
|
|
1210
|
+
type="button"
|
|
1211
|
+
>Azure</button>
|
|
1212
|
+
</li>
|
|
1213
|
+
</ul>
|
|
1214
|
+
</div>
|
|
1215
|
+
</div>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div class="pf-c-toolbar__item">
|
|
1218
|
+
<div class="pf-c-select">
|
|
1219
|
+
<span
|
|
1220
|
+
id="context-selector-in-page-content-select-label"
|
|
1221
|
+
hidden
|
|
1222
|
+
>Choose one</span>
|
|
1223
|
+
|
|
1224
|
+
<button
|
|
1225
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1226
|
+
type="button"
|
|
1227
|
+
id="context-selector-in-page-content-select-toggle"
|
|
1228
|
+
aria-haspopup="true"
|
|
1229
|
+
aria-expanded="false"
|
|
1230
|
+
aria-labelledby="context-selector-in-page-content-select-label context-selector-in-page-content-select-toggle"
|
|
1231
|
+
>
|
|
1232
|
+
<div class="pf-c-select__toggle-wrapper">
|
|
1233
|
+
<span class="pf-c-select__toggle-text">All applications</span>
|
|
1234
|
+
</div>
|
|
1235
|
+
<span class="pf-c-select__toggle-arrow">
|
|
1236
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1237
|
+
</span>
|
|
1238
|
+
</button>
|
|
1239
|
+
|
|
1240
|
+
<ul
|
|
1241
|
+
class="pf-c-select__menu"
|
|
1242
|
+
role="listbox"
|
|
1243
|
+
aria-labelledby="context-selector-in-page-content-select-label"
|
|
1244
|
+
hidden
|
|
1245
|
+
>
|
|
1246
|
+
<li role="presentation">
|
|
1247
|
+
<button
|
|
1248
|
+
class="pf-c-select__menu-item"
|
|
1249
|
+
role="option"
|
|
1250
|
+
>Running</button>
|
|
1251
|
+
</li>
|
|
1252
|
+
<li role="presentation">
|
|
1253
|
+
<button
|
|
1254
|
+
class="pf-c-select__menu-item pf-m-selected"
|
|
1255
|
+
role="option"
|
|
1256
|
+
aria-selected="true"
|
|
1257
|
+
>
|
|
1258
|
+
Stopped
|
|
1259
|
+
<span class="pf-c-select__menu-item-icon">
|
|
1260
|
+
<i class="fas fa-check" aria-hidden="true"></i>
|
|
1261
|
+
</span>
|
|
1262
|
+
</button>
|
|
1263
|
+
</li>
|
|
1264
|
+
<li role="presentation">
|
|
1265
|
+
<button class="pf-c-select__menu-item" role="option">Down</button>
|
|
1266
|
+
</li>
|
|
1267
|
+
<li role="presentation">
|
|
1268
|
+
<button
|
|
1269
|
+
class="pf-c-select__menu-item"
|
|
1270
|
+
role="option"
|
|
1271
|
+
>Degraded</button>
|
|
1272
|
+
</li>
|
|
1273
|
+
<li role="presentation">
|
|
1274
|
+
<button
|
|
1275
|
+
class="pf-c-select__menu-item"
|
|
1276
|
+
role="option"
|
|
1277
|
+
>Needs maintenance</button>
|
|
1278
|
+
</li>
|
|
1279
|
+
</ul>
|
|
1280
|
+
</div>
|
|
1281
|
+
</div>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
</div>
|
|
1285
|
+
</div>
|
|
1286
|
+
</section>
|
|
1287
|
+
<hr class="pf-c-divider" />
|
|
1288
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1289
|
+
<div class="pf-c-page__main-body">
|
|
1290
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1291
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1292
|
+
<li class="pf-c-breadcrumb__item">
|
|
1293
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1294
|
+
</li>
|
|
1295
|
+
<li class="pf-c-breadcrumb__item">
|
|
1296
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1297
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1298
|
+
</span>
|
|
1299
|
+
|
|
1300
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1301
|
+
</li>
|
|
1302
|
+
<li class="pf-c-breadcrumb__item">
|
|
1303
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1304
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1305
|
+
</span>
|
|
1306
|
+
|
|
1307
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1308
|
+
</li>
|
|
1309
|
+
<li class="pf-c-breadcrumb__item">
|
|
1310
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1311
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1312
|
+
</span>
|
|
1313
|
+
|
|
1314
|
+
<a
|
|
1315
|
+
href="#"
|
|
1316
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1317
|
+
aria-current="page"
|
|
1318
|
+
>Section landing</a>
|
|
1319
|
+
</li>
|
|
1320
|
+
</ol>
|
|
1321
|
+
</nav>
|
|
1322
|
+
</div>
|
|
1323
|
+
</section>
|
|
1324
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1325
|
+
<div class="pf-c-page__main-body">
|
|
1326
|
+
<div class="pf-c-content">
|
|
1327
|
+
<h1>Main title</h1>
|
|
1328
|
+
<p>This is a demo of the page component.</p>
|
|
1329
|
+
</div>
|
|
1330
|
+
</div>
|
|
1331
|
+
</section>
|
|
1332
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1333
|
+
<div class="pf-c-page__main-body">
|
|
1334
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1335
|
+
<div class="pf-l-gallery__item">
|
|
1336
|
+
<div class="pf-c-card">
|
|
1337
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
</div>
|
|
1340
|
+
<div class="pf-l-gallery__item">
|
|
1341
|
+
<div class="pf-c-card">
|
|
1342
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1343
|
+
</div>
|
|
1344
|
+
</div>
|
|
1345
|
+
<div class="pf-l-gallery__item">
|
|
1346
|
+
<div class="pf-c-card">
|
|
1347
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1348
|
+
</div>
|
|
1349
|
+
</div>
|
|
1350
|
+
<div class="pf-l-gallery__item">
|
|
1351
|
+
<div class="pf-c-card">
|
|
1352
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1353
|
+
</div>
|
|
1354
|
+
</div>
|
|
1355
|
+
<div class="pf-l-gallery__item">
|
|
1356
|
+
<div class="pf-c-card">
|
|
1357
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1358
|
+
</div>
|
|
1359
|
+
</div>
|
|
1360
|
+
<div class="pf-l-gallery__item">
|
|
1361
|
+
<div class="pf-c-card">
|
|
1362
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
<div class="pf-l-gallery__item">
|
|
1366
|
+
<div class="pf-c-card">
|
|
1367
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1368
|
+
</div>
|
|
1369
|
+
</div>
|
|
1370
|
+
<div class="pf-l-gallery__item">
|
|
1371
|
+
<div class="pf-c-card">
|
|
1372
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1373
|
+
</div>
|
|
1374
|
+
</div>
|
|
1375
|
+
<div class="pf-l-gallery__item">
|
|
1376
|
+
<div class="pf-c-card">
|
|
1377
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1378
|
+
</div>
|
|
1379
|
+
</div>
|
|
1380
|
+
<div class="pf-l-gallery__item">
|
|
1381
|
+
<div class="pf-c-card">
|
|
1382
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1383
|
+
</div>
|
|
1384
|
+
</div>
|
|
1385
|
+
</div>
|
|
1386
|
+
</div>
|
|
1387
|
+
</section>
|
|
1388
|
+
</main>
|
|
1389
|
+
</div>
|
|
1390
|
+
|
|
1391
|
+
```
|