@patternfly/patternfly 4.184.3 → 4.185.2
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/RELEASE-NOTES.md +22 -0
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/Form/form.css +4 -2
- package/components/Form/form.scss +4 -2
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
- package/docs/demos/Alert/examples/Alert.md +2484 -490
- package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
- package/docs/demos/Banner/examples/Banner.md +2074 -1466
- package/docs/demos/Button/examples/Button.md +33 -21
- package/docs/demos/CardView/examples/CardView.md +1065 -260
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
- package/docs/demos/DataList/examples/DataList.md +3777 -1553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
- package/docs/demos/Masthead/examples/Masthead.md +9 -20
- package/docs/demos/Modal/examples/Modal.md +5521 -34
- package/docs/demos/Nav/examples/Nav.md +6453 -1201
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
- package/docs/demos/Page/examples/Page.md +14 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +26 -65
- package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
- package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
- package/docs/demos/Wizard/examples/Wizard.md +3418 -288
- package/docs/pages/icons.md +1 -0
- package/icons/pf-icons.json +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +11 -4
- package/patternfly.css +11 -4
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -6,186 +6,912 @@ section: demos
|
|
|
6
6
|
### Card view
|
|
7
7
|
|
|
8
8
|
```html isFullscreen
|
|
9
|
-
<div class="pf-c-page" id="card-view-example">
|
|
9
|
+
<div class="pf-c-page" id="card-view-basic-example">
|
|
10
10
|
<a
|
|
11
11
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
|
-
href="#main-content-card-view-example"
|
|
12
|
+
href="#main-content-card-view-basic-example"
|
|
13
13
|
>Skip to content</a>
|
|
14
|
-
<header class="pf-c-
|
|
15
|
-
<
|
|
16
|
-
<
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
<header class="pf-c-masthead" id="card-view-basic-example-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
|
+
<div class="pf-c-masthead__main">
|
|
25
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
26
|
+
<picture
|
|
27
|
+
class="pf-c-brand pf-m-picture"
|
|
28
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
24
29
|
>
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
<source
|
|
31
|
+
media="(min-width: 768px)"
|
|
32
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
33
|
+
/>
|
|
34
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
35
|
+
<img
|
|
36
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
37
|
+
alt="Fallback patternFly default logo"
|
|
38
|
+
/>
|
|
39
|
+
</picture>
|
|
34
40
|
</a>
|
|
35
41
|
</div>
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
>
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
aria-label="Settings"
|
|
46
|
-
>
|
|
47
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
48
|
-
</button>
|
|
49
|
-
</div>
|
|
50
|
-
<div
|
|
51
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
52
|
-
>
|
|
53
|
-
<button
|
|
54
|
-
class="pf-c-button pf-m-plain"
|
|
55
|
-
type="button"
|
|
56
|
-
aria-label="Help"
|
|
57
|
-
>
|
|
58
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
59
|
-
</button>
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
<div class="pf-c-page__header-tools-group">
|
|
63
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
64
|
-
<div class="pf-c-dropdown">
|
|
65
|
-
<button
|
|
66
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
67
|
-
id="card-view-example-dropdown-kebab-1-button"
|
|
68
|
-
aria-expanded="false"
|
|
69
|
-
type="button"
|
|
70
|
-
aria-label="Actions"
|
|
71
|
-
>
|
|
72
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
73
|
-
</button>
|
|
74
|
-
<ul
|
|
75
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
76
|
-
aria-labelledby="card-view-example-dropdown-kebab-1-button"
|
|
77
|
-
hidden
|
|
42
|
+
<div class="pf-c-masthead__content">
|
|
43
|
+
<div
|
|
44
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
45
|
+
id="card-view-basic-example-masthead-toolbar"
|
|
46
|
+
>
|
|
47
|
+
<div class="pf-c-toolbar__content">
|
|
48
|
+
<div class="pf-c-toolbar__content-section">
|
|
49
|
+
<div
|
|
50
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
78
51
|
>
|
|
79
|
-
<
|
|
80
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
81
|
-
</li>
|
|
82
|
-
<li>
|
|
83
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
84
|
-
</li>
|
|
85
|
-
<li>
|
|
86
|
-
<a
|
|
87
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
88
|
-
href="#"
|
|
89
|
-
aria-disabled="true"
|
|
90
|
-
tabindex="-1"
|
|
91
|
-
>Disabled link</a>
|
|
92
|
-
</li>
|
|
93
|
-
<li>
|
|
52
|
+
<div class="pf-c-toolbar__item">
|
|
94
53
|
<button
|
|
95
|
-
class="pf-c-
|
|
54
|
+
class="pf-c-button pf-m-plain"
|
|
96
55
|
type="button"
|
|
97
|
-
|
|
98
|
-
>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
</
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
56
|
+
aria-label="Notifications"
|
|
57
|
+
>
|
|
58
|
+
<span class="pf-c-notification-badge">
|
|
59
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
60
|
+
</span>
|
|
61
|
+
</button>
|
|
62
|
+
</div>
|
|
63
|
+
<div
|
|
64
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
65
|
+
>
|
|
66
|
+
<div class="pf-c-toolbar__item">
|
|
67
|
+
<nav
|
|
68
|
+
class="pf-c-app-launcher"
|
|
69
|
+
aria-label="Application launcher"
|
|
70
|
+
id="card-view-basic-example-masthead-icon-group--app-launcher"
|
|
71
|
+
>
|
|
72
|
+
<button
|
|
73
|
+
class="pf-c-app-launcher__toggle"
|
|
74
|
+
type="button"
|
|
75
|
+
id="card-view-basic-example-masthead-icon-group--app-launcher-button"
|
|
76
|
+
aria-expanded="false"
|
|
77
|
+
aria-label="Application launcher"
|
|
78
|
+
>
|
|
79
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
80
|
+
</button>
|
|
81
|
+
<div
|
|
82
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
83
|
+
hidden
|
|
84
|
+
>
|
|
85
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
86
|
+
<div class="pf-c-search-input">
|
|
87
|
+
<div class="pf-c-search-input__bar">
|
|
88
|
+
<span class="pf-c-search-input__text">
|
|
89
|
+
<span class="pf-c-search-input__icon">
|
|
90
|
+
<i
|
|
91
|
+
class="fas fa-search fa-fw"
|
|
92
|
+
aria-hidden="true"
|
|
93
|
+
></i>
|
|
94
|
+
</span>
|
|
95
|
+
<input
|
|
96
|
+
class="pf-c-search-input__text-input"
|
|
97
|
+
type="text"
|
|
98
|
+
placeholder="Filter by name"
|
|
99
|
+
aria-label="Filter by name"
|
|
100
|
+
/>
|
|
101
|
+
</span>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<section class="pf-c-app-launcher__group">
|
|
106
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
107
|
+
<ul>
|
|
108
|
+
<li
|
|
109
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
110
|
+
>
|
|
111
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
112
|
+
Link 1
|
|
113
|
+
<span
|
|
114
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
115
|
+
>
|
|
116
|
+
<i
|
|
117
|
+
class="fas fa-external-link-alt"
|
|
118
|
+
aria-hidden="true"
|
|
119
|
+
></i>
|
|
120
|
+
</span>
|
|
121
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
122
|
+
</a>
|
|
123
|
+
<button
|
|
124
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
125
|
+
type="button"
|
|
126
|
+
aria-label="Favorite"
|
|
127
|
+
>
|
|
128
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
129
|
+
</button>
|
|
130
|
+
</li>
|
|
131
|
+
<li
|
|
132
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
133
|
+
>
|
|
134
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
135
|
+
Link 2
|
|
136
|
+
<span
|
|
137
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
138
|
+
>
|
|
139
|
+
<i
|
|
140
|
+
class="fas fa-external-link-alt"
|
|
141
|
+
aria-hidden="true"
|
|
142
|
+
></i>
|
|
143
|
+
</span>
|
|
144
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
145
|
+
</a>
|
|
146
|
+
<button
|
|
147
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
148
|
+
type="button"
|
|
149
|
+
aria-label="Favorite"
|
|
150
|
+
>
|
|
151
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
152
|
+
</button>
|
|
153
|
+
</li>
|
|
154
|
+
</ul>
|
|
155
|
+
</section>
|
|
156
|
+
<hr class="pf-c-divider" />
|
|
157
|
+
<section class="pf-c-app-launcher__group">
|
|
158
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
159
|
+
<ul>
|
|
160
|
+
<li
|
|
161
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
162
|
+
>
|
|
163
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
164
|
+
Link 1
|
|
165
|
+
<span
|
|
166
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
167
|
+
>
|
|
168
|
+
<i
|
|
169
|
+
class="fas fa-external-link-alt"
|
|
170
|
+
aria-hidden="true"
|
|
171
|
+
></i>
|
|
172
|
+
</span>
|
|
173
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
174
|
+
</a>
|
|
175
|
+
<button
|
|
176
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
177
|
+
type="button"
|
|
178
|
+
aria-label="Favorite"
|
|
179
|
+
>
|
|
180
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
181
|
+
</button>
|
|
182
|
+
</li>
|
|
183
|
+
<li
|
|
184
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
185
|
+
>
|
|
186
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
187
|
+
Link 2
|
|
188
|
+
<span
|
|
189
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
190
|
+
>
|
|
191
|
+
<i
|
|
192
|
+
class="fas fa-external-link-alt"
|
|
193
|
+
aria-hidden="true"
|
|
194
|
+
></i>
|
|
195
|
+
</span>
|
|
196
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
197
|
+
</a>
|
|
198
|
+
<button
|
|
199
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
200
|
+
type="button"
|
|
201
|
+
aria-label="Favorite"
|
|
202
|
+
>
|
|
203
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
204
|
+
</button>
|
|
205
|
+
</li>
|
|
206
|
+
</ul>
|
|
207
|
+
</section>
|
|
208
|
+
</div>
|
|
209
|
+
</nav>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="pf-c-toolbar__item">
|
|
212
|
+
<div class="pf-c-dropdown">
|
|
213
|
+
<button
|
|
214
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
215
|
+
id="card-view-basic-example-masthead-settings-button"
|
|
216
|
+
aria-expanded="false"
|
|
217
|
+
type="button"
|
|
218
|
+
aria-label="Settings"
|
|
219
|
+
>
|
|
220
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
221
|
+
</button>
|
|
222
|
+
<ul
|
|
223
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
224
|
+
aria-labelledby="card-view-basic-example-masthead-settings-button"
|
|
225
|
+
hidden
|
|
226
|
+
>
|
|
227
|
+
<li>
|
|
228
|
+
<button
|
|
229
|
+
class="pf-c-dropdown__menu-item"
|
|
230
|
+
type="button"
|
|
231
|
+
>Settings</button>
|
|
232
|
+
</li>
|
|
233
|
+
<li>
|
|
234
|
+
<button
|
|
235
|
+
class="pf-c-dropdown__menu-item"
|
|
236
|
+
type="button"
|
|
237
|
+
>Use the beta release</button>
|
|
238
|
+
</li>
|
|
239
|
+
</ul>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="pf-c-toolbar__item">
|
|
243
|
+
<div class="pf-c-dropdown">
|
|
244
|
+
<button
|
|
245
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
246
|
+
id="card-view-basic-example-masthead-help-button"
|
|
247
|
+
aria-expanded="false"
|
|
248
|
+
type="button"
|
|
249
|
+
aria-label="Help"
|
|
250
|
+
>
|
|
251
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
252
|
+
</button>
|
|
253
|
+
<ul
|
|
254
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
255
|
+
aria-labelledby="card-view-basic-example-masthead-help-button"
|
|
256
|
+
hidden
|
|
257
|
+
>
|
|
258
|
+
<li>
|
|
259
|
+
<button
|
|
260
|
+
class="pf-c-dropdown__menu-item"
|
|
261
|
+
type="button"
|
|
262
|
+
>Support options</button>
|
|
263
|
+
</li>
|
|
264
|
+
<li>
|
|
265
|
+
<button
|
|
266
|
+
class="pf-c-dropdown__menu-item"
|
|
267
|
+
type="button"
|
|
268
|
+
>Open support case</button>
|
|
269
|
+
</li>
|
|
270
|
+
<li>
|
|
271
|
+
<button
|
|
272
|
+
class="pf-c-dropdown__menu-item"
|
|
273
|
+
type="button"
|
|
274
|
+
>API documentation</button>
|
|
275
|
+
</li>
|
|
276
|
+
</ul>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
281
|
+
<div class="pf-c-dropdown">
|
|
282
|
+
<button
|
|
283
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
284
|
+
type="button"
|
|
285
|
+
aria-expanded="false"
|
|
286
|
+
aria-label="Actions"
|
|
287
|
+
>
|
|
288
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
289
|
+
</button>
|
|
290
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
291
|
+
<div class="pf-c-menu__content">
|
|
292
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
293
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
294
|
+
<li
|
|
295
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
296
|
+
role="none"
|
|
297
|
+
>
|
|
298
|
+
<button
|
|
299
|
+
class="pf-c-menu__item"
|
|
300
|
+
type="button"
|
|
301
|
+
disabled
|
|
302
|
+
role="menuitem"
|
|
303
|
+
>
|
|
304
|
+
<span class="pf-c-menu__item-description">
|
|
305
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
306
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
307
|
+
</span>
|
|
308
|
+
</button>
|
|
309
|
+
</li>
|
|
310
|
+
<li
|
|
311
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
312
|
+
role="none"
|
|
313
|
+
>
|
|
314
|
+
<button
|
|
315
|
+
class="pf-c-menu__item"
|
|
316
|
+
type="button"
|
|
317
|
+
disabled
|
|
318
|
+
role="menuitem"
|
|
319
|
+
>
|
|
320
|
+
<span class="pf-c-menu__item-description">
|
|
321
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
322
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
323
|
+
</span>
|
|
324
|
+
</button>
|
|
325
|
+
</li>
|
|
326
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
327
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
328
|
+
<button
|
|
329
|
+
class="pf-c-menu__item"
|
|
330
|
+
type="button"
|
|
331
|
+
role="menuitem"
|
|
332
|
+
>
|
|
333
|
+
<span class="pf-c-menu__item-main">
|
|
334
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
335
|
+
</span>
|
|
336
|
+
</button>
|
|
337
|
+
</li>
|
|
338
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
339
|
+
<button
|
|
340
|
+
class="pf-c-menu__item"
|
|
341
|
+
type="button"
|
|
342
|
+
role="menuitem"
|
|
343
|
+
>
|
|
344
|
+
<span class="pf-c-menu__item-main">
|
|
345
|
+
<span
|
|
346
|
+
class="pf-c-menu__item-text"
|
|
347
|
+
>User management</span>
|
|
348
|
+
</span>
|
|
349
|
+
</button>
|
|
350
|
+
</li>
|
|
351
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
352
|
+
<button
|
|
353
|
+
class="pf-c-menu__item"
|
|
354
|
+
type="button"
|
|
355
|
+
role="menuitem"
|
|
356
|
+
>
|
|
357
|
+
<span class="pf-c-menu__item-main">
|
|
358
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
359
|
+
</span>
|
|
360
|
+
</button>
|
|
361
|
+
</li>
|
|
362
|
+
</ul>
|
|
363
|
+
</section>
|
|
364
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
365
|
+
<section class="pf-c-menu__group">
|
|
366
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
367
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
368
|
+
<button
|
|
369
|
+
class="pf-c-menu__item"
|
|
370
|
+
type="button"
|
|
371
|
+
role="menuitem"
|
|
372
|
+
aria-expanded="false"
|
|
373
|
+
>
|
|
374
|
+
<span class="pf-c-menu__item-main">
|
|
375
|
+
<span class="pf-c-menu__item-icon">
|
|
376
|
+
<i
|
|
377
|
+
class="fas fa-fw fa-cog"
|
|
378
|
+
aria-hidden="true"
|
|
379
|
+
></i>
|
|
380
|
+
</span>
|
|
381
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
382
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
383
|
+
<i class="fas fa-angle-right"></i>
|
|
384
|
+
</span>
|
|
385
|
+
</span>
|
|
386
|
+
</button>
|
|
387
|
+
<div class="pf-c-menu" hidden>
|
|
388
|
+
<div class="pf-c-menu__content">
|
|
389
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
390
|
+
<li
|
|
391
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
392
|
+
role="none"
|
|
393
|
+
>
|
|
394
|
+
<button
|
|
395
|
+
class="pf-c-menu__item"
|
|
396
|
+
type="button"
|
|
397
|
+
role="menuitem"
|
|
398
|
+
>
|
|
399
|
+
<span class="pf-c-menu__item-main">
|
|
400
|
+
<span
|
|
401
|
+
class="pf-c-menu__item-toggle-icon"
|
|
402
|
+
>
|
|
403
|
+
<i class="fas fa-angle-left"></i>
|
|
404
|
+
</span>
|
|
405
|
+
<span class="pf-c-menu__item-icon">
|
|
406
|
+
<i
|
|
407
|
+
class="fas fa-fw fa-cog"
|
|
408
|
+
aria-hidden="true"
|
|
409
|
+
></i>
|
|
410
|
+
</span>
|
|
411
|
+
<span
|
|
412
|
+
class="pf-c-menu__item-text"
|
|
413
|
+
>Settings</span>
|
|
414
|
+
</span>
|
|
415
|
+
</button>
|
|
416
|
+
</li>
|
|
417
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
418
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
419
|
+
<a
|
|
420
|
+
class="pf-c-menu__item"
|
|
421
|
+
href="#"
|
|
422
|
+
role="menuitem"
|
|
423
|
+
>
|
|
424
|
+
<span class="pf-c-menu__item-main">
|
|
425
|
+
<span
|
|
426
|
+
class="pf-c-menu__item-text"
|
|
427
|
+
>Customer support</span>
|
|
428
|
+
</span>
|
|
429
|
+
</a>
|
|
430
|
+
</li>
|
|
431
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
432
|
+
<a
|
|
433
|
+
class="pf-c-menu__item"
|
|
434
|
+
href="#"
|
|
435
|
+
role="menuitem"
|
|
436
|
+
>
|
|
437
|
+
<span class="pf-c-menu__item-main">
|
|
438
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
439
|
+
</span>
|
|
440
|
+
</a>
|
|
441
|
+
</li>
|
|
442
|
+
</ul>
|
|
443
|
+
</div>
|
|
444
|
+
</div>
|
|
445
|
+
</li>
|
|
446
|
+
|
|
447
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
448
|
+
<button
|
|
449
|
+
class="pf-c-menu__item"
|
|
450
|
+
type="button"
|
|
451
|
+
role="menuitem"
|
|
452
|
+
aria-expanded="false"
|
|
453
|
+
>
|
|
454
|
+
<span class="pf-c-menu__item-main">
|
|
455
|
+
<span class="pf-c-menu__item-icon">
|
|
456
|
+
<i
|
|
457
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
458
|
+
aria-hidden="true"
|
|
459
|
+
></i>
|
|
460
|
+
</span>
|
|
461
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
462
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
463
|
+
<i class="fas fa-angle-right"></i>
|
|
464
|
+
</span>
|
|
465
|
+
</span>
|
|
466
|
+
</button>
|
|
467
|
+
<div class="pf-c-menu" hidden>
|
|
468
|
+
<div class="pf-c-menu__content">
|
|
469
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
470
|
+
<li
|
|
471
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
472
|
+
role="none"
|
|
473
|
+
>
|
|
474
|
+
<button
|
|
475
|
+
class="pf-c-menu__item"
|
|
476
|
+
type="button"
|
|
477
|
+
role="menuitem"
|
|
478
|
+
>
|
|
479
|
+
<span class="pf-c-menu__item-main">
|
|
480
|
+
<span
|
|
481
|
+
class="pf-c-menu__item-toggle-icon"
|
|
482
|
+
>
|
|
483
|
+
<i class="fas fa-angle-left"></i>
|
|
484
|
+
</span>
|
|
485
|
+
<span class="pf-c-menu__item-icon">
|
|
486
|
+
<i
|
|
487
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
488
|
+
aria-hidden="true"
|
|
489
|
+
></i>
|
|
490
|
+
</span>
|
|
491
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
492
|
+
</span>
|
|
493
|
+
</button>
|
|
494
|
+
</li>
|
|
495
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
496
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
497
|
+
<a
|
|
498
|
+
class="pf-c-menu__item"
|
|
499
|
+
href="#"
|
|
500
|
+
role="menuitem"
|
|
501
|
+
>
|
|
502
|
+
<span class="pf-c-menu__item-main">
|
|
503
|
+
<span
|
|
504
|
+
class="pf-c-menu__item-text"
|
|
505
|
+
>Support options</span>
|
|
506
|
+
</span>
|
|
507
|
+
</a>
|
|
508
|
+
</li>
|
|
509
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
510
|
+
<a
|
|
511
|
+
class="pf-c-menu__item"
|
|
512
|
+
href="#"
|
|
513
|
+
role="menuitem"
|
|
514
|
+
>
|
|
515
|
+
<span class="pf-c-menu__item-main">
|
|
516
|
+
<span
|
|
517
|
+
class="pf-c-menu__item-text"
|
|
518
|
+
>Open support case</span>
|
|
519
|
+
</span>
|
|
520
|
+
</a>
|
|
521
|
+
</li>
|
|
522
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
523
|
+
<a
|
|
524
|
+
class="pf-c-menu__item"
|
|
525
|
+
href="#"
|
|
526
|
+
role="menuitem"
|
|
527
|
+
>
|
|
528
|
+
<span class="pf-c-menu__item-main">
|
|
529
|
+
<span
|
|
530
|
+
class="pf-c-menu__item-text"
|
|
531
|
+
>API documentation</span>
|
|
532
|
+
</span>
|
|
533
|
+
</a>
|
|
534
|
+
</li>
|
|
535
|
+
</ul>
|
|
536
|
+
</div>
|
|
537
|
+
</div>
|
|
538
|
+
</li>
|
|
539
|
+
|
|
540
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
541
|
+
<button
|
|
542
|
+
class="pf-c-menu__item"
|
|
543
|
+
type="button"
|
|
544
|
+
role="menuitem"
|
|
545
|
+
>
|
|
546
|
+
<span class="pf-c-menu__item-main">
|
|
547
|
+
<span class="pf-c-menu__item-icon">
|
|
548
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
549
|
+
</span>
|
|
550
|
+
<span
|
|
551
|
+
class="pf-c-menu__item-text"
|
|
552
|
+
>Application launcher</span>
|
|
553
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
554
|
+
<i class="fas fa-angle-right"></i>
|
|
555
|
+
</span>
|
|
556
|
+
</span>
|
|
557
|
+
</button>
|
|
558
|
+
<div class="pf-c-menu" hidden>
|
|
559
|
+
<div class="pf-c-menu__header">
|
|
560
|
+
<button
|
|
561
|
+
class="pf-c-menu__item"
|
|
562
|
+
type="button"
|
|
563
|
+
role="menuitem"
|
|
564
|
+
>
|
|
565
|
+
<span class="pf-c-menu__item-main">
|
|
566
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
567
|
+
<i class="fas fa-angle-left"></i>
|
|
568
|
+
</span>
|
|
569
|
+
<span class="pf-c-menu__item-icon">
|
|
570
|
+
<i
|
|
571
|
+
class="fas fa-fw fa-th"
|
|
572
|
+
aria-hidden="true"
|
|
573
|
+
></i>
|
|
574
|
+
</span>
|
|
575
|
+
<span
|
|
576
|
+
class="pf-c-menu__item-text"
|
|
577
|
+
>Application launcher</span>
|
|
578
|
+
</span>
|
|
579
|
+
</button>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="pf-c-menu__search">
|
|
582
|
+
<div class="pf-c-menu__search-input">
|
|
583
|
+
<div class="pf-c-search-input">
|
|
584
|
+
<div class="pf-c-search-input__bar">
|
|
585
|
+
<span class="pf-c-search-input__text">
|
|
586
|
+
<span class="pf-c-search-input__icon">
|
|
587
|
+
<i
|
|
588
|
+
class="fas fa-search fa-fw"
|
|
589
|
+
aria-hidden="true"
|
|
590
|
+
></i>
|
|
591
|
+
</span>
|
|
592
|
+
<input
|
|
593
|
+
class="pf-c-search-input__text-input"
|
|
594
|
+
type="text"
|
|
595
|
+
placeholder="Search"
|
|
596
|
+
aria-label="Search"
|
|
597
|
+
/>
|
|
598
|
+
</span>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
<hr class="pf-c-divider" />
|
|
604
|
+
<section class="pf-c-menu__group">
|
|
605
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
606
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
607
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
608
|
+
<a
|
|
609
|
+
class="pf-c-menu__item"
|
|
610
|
+
href="#"
|
|
611
|
+
role="menuitem"
|
|
612
|
+
>
|
|
613
|
+
<span class="pf-c-menu__item-main">
|
|
614
|
+
<span
|
|
615
|
+
class="pf-c-menu__item-text"
|
|
616
|
+
>Link 1</span>
|
|
617
|
+
</span>
|
|
618
|
+
</a>
|
|
619
|
+
<button
|
|
620
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
621
|
+
type="button"
|
|
622
|
+
aria-label="Starred"
|
|
623
|
+
>
|
|
624
|
+
<span class="pf-c-menu__item-action-icon">
|
|
625
|
+
<i
|
|
626
|
+
class="fas fa-star"
|
|
627
|
+
aria-hidden="true"
|
|
628
|
+
></i>
|
|
629
|
+
</span>
|
|
630
|
+
</button>
|
|
631
|
+
</li>
|
|
632
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
633
|
+
<a
|
|
634
|
+
class="pf-c-menu__item"
|
|
635
|
+
href="#"
|
|
636
|
+
role="menuitem"
|
|
637
|
+
target="_blank"
|
|
638
|
+
>
|
|
639
|
+
<span class="pf-c-menu__item-main">
|
|
640
|
+
<span
|
|
641
|
+
class="pf-c-menu__item-text"
|
|
642
|
+
>Link 2</span>
|
|
643
|
+
<span
|
|
644
|
+
class="pf-c-menu__item-external-icon"
|
|
645
|
+
>
|
|
646
|
+
<i
|
|
647
|
+
class="fas fa-external-link-alt"
|
|
648
|
+
aria-hidden="true"
|
|
649
|
+
></i>
|
|
650
|
+
</span>
|
|
651
|
+
<span
|
|
652
|
+
class="pf-screen-reader"
|
|
653
|
+
>(opens new window)</span>
|
|
654
|
+
</span>
|
|
655
|
+
</a>
|
|
656
|
+
<button
|
|
657
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
658
|
+
type="button"
|
|
659
|
+
aria-label="Not starred"
|
|
660
|
+
>
|
|
661
|
+
<span class="pf-c-menu__item-action-icon">
|
|
662
|
+
<i
|
|
663
|
+
class="fas fa-star"
|
|
664
|
+
aria-hidden="true"
|
|
665
|
+
></i>
|
|
666
|
+
</span>
|
|
667
|
+
</button>
|
|
668
|
+
</li>
|
|
669
|
+
</ul>
|
|
670
|
+
</section>
|
|
671
|
+
<hr class="pf-c-divider" />
|
|
672
|
+
<section class="pf-c-menu__group">
|
|
673
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
674
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
675
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
676
|
+
<a
|
|
677
|
+
class="pf-c-menu__item"
|
|
678
|
+
href="#"
|
|
679
|
+
role="menuitem"
|
|
680
|
+
>
|
|
681
|
+
<span class="pf-c-menu__item-main">
|
|
682
|
+
<span
|
|
683
|
+
class="pf-c-menu__item-text"
|
|
684
|
+
>Link 1</span>
|
|
685
|
+
</span>
|
|
686
|
+
</a>
|
|
687
|
+
<button
|
|
688
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
689
|
+
type="button"
|
|
690
|
+
aria-label="Not starred"
|
|
691
|
+
>
|
|
692
|
+
<span class="pf-c-menu__item-action-icon">
|
|
693
|
+
<i
|
|
694
|
+
class="fas fa-star"
|
|
695
|
+
aria-hidden="true"
|
|
696
|
+
></i>
|
|
697
|
+
</span>
|
|
698
|
+
</button>
|
|
699
|
+
</li>
|
|
700
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
701
|
+
<a
|
|
702
|
+
class="pf-c-menu__item"
|
|
703
|
+
href="#"
|
|
704
|
+
role="menuitem"
|
|
705
|
+
target="_blank"
|
|
706
|
+
>
|
|
707
|
+
<span class="pf-c-menu__item-main">
|
|
708
|
+
<span
|
|
709
|
+
class="pf-c-menu__item-text"
|
|
710
|
+
>Link 2</span>
|
|
711
|
+
<span
|
|
712
|
+
class="pf-c-menu__item-external-icon"
|
|
713
|
+
>
|
|
714
|
+
<i
|
|
715
|
+
class="fas fa-external-link-alt"
|
|
716
|
+
aria-hidden="true"
|
|
717
|
+
></i>
|
|
718
|
+
</span>
|
|
719
|
+
<span
|
|
720
|
+
class="pf-screen-reader"
|
|
721
|
+
>(opens new window)</span>
|
|
722
|
+
</span>
|
|
723
|
+
</a>
|
|
724
|
+
<button
|
|
725
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
726
|
+
type="button"
|
|
727
|
+
aria-label="Starred"
|
|
728
|
+
>
|
|
729
|
+
<span class="pf-c-menu__item-action-icon">
|
|
730
|
+
<i
|
|
731
|
+
class="fas fa-star"
|
|
732
|
+
aria-hidden="true"
|
|
733
|
+
></i>
|
|
734
|
+
</span>
|
|
735
|
+
</button>
|
|
736
|
+
</li>
|
|
737
|
+
</ul>
|
|
738
|
+
</section>
|
|
739
|
+
</div>
|
|
740
|
+
</li>
|
|
741
|
+
</ul>
|
|
742
|
+
</section>
|
|
743
|
+
</div>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
749
|
+
<div
|
|
750
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
751
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
752
|
+
>
|
|
142
753
|
<button
|
|
143
|
-
class="pf-c-
|
|
754
|
+
class="pf-c-dropdown__toggle"
|
|
755
|
+
id="card-view-basic-example-masthead-profile-button"
|
|
756
|
+
aria-expanded="false"
|
|
144
757
|
type="button"
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
758
|
+
>
|
|
759
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
760
|
+
<img
|
|
761
|
+
class="pf-c-avatar"
|
|
762
|
+
src="/assets/images/img_avatar.svg"
|
|
763
|
+
alt="Avatar image"
|
|
764
|
+
/>
|
|
765
|
+
</span>
|
|
766
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
767
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
768
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
769
|
+
</span>
|
|
770
|
+
</button>
|
|
771
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
772
|
+
<section class="pf-c-dropdown__group">
|
|
773
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
774
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
775
|
+
<div>123456789</div>
|
|
776
|
+
</div>
|
|
777
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
778
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
779
|
+
<div>mshaksho@redhat.com</div>
|
|
780
|
+
</div>
|
|
781
|
+
</section>
|
|
782
|
+
<hr class="pf-c-divider" />
|
|
783
|
+
<section class="pf-c-dropdown__group">
|
|
784
|
+
<ul>
|
|
785
|
+
<li>
|
|
786
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
787
|
+
</li>
|
|
788
|
+
<li>
|
|
789
|
+
<a
|
|
790
|
+
class="pf-c-dropdown__menu-item"
|
|
791
|
+
href="#"
|
|
792
|
+
>User management</a>
|
|
793
|
+
</li>
|
|
794
|
+
<li>
|
|
795
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
796
|
+
</li>
|
|
797
|
+
</ul>
|
|
798
|
+
</section>
|
|
799
|
+
</div>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
153
802
|
</div>
|
|
154
803
|
</div>
|
|
155
804
|
</div>
|
|
156
|
-
<img
|
|
157
|
-
class="pf-c-avatar"
|
|
158
|
-
src="/assets/images/img_avatar.svg"
|
|
159
|
-
alt="Avatar image"
|
|
160
|
-
/>
|
|
161
805
|
</div>
|
|
162
806
|
</header>
|
|
163
807
|
<div class="pf-c-page__sidebar">
|
|
164
808
|
<div class="pf-c-page__sidebar-body">
|
|
165
809
|
<nav
|
|
166
810
|
class="pf-c-nav"
|
|
167
|
-
id="card-view-example-
|
|
811
|
+
id="card-view-basic-example-expandable-nav"
|
|
168
812
|
aria-label="Global"
|
|
169
813
|
>
|
|
170
814
|
<ul class="pf-c-nav__list">
|
|
171
|
-
<li class="pf-c-nav__item">
|
|
172
|
-
<
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
aria-
|
|
176
|
-
>
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
815
|
+
<li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
|
|
816
|
+
<button
|
|
817
|
+
class="pf-c-nav__link"
|
|
818
|
+
id="card-view-basic-example-expandable-nav-link1"
|
|
819
|
+
aria-expanded="true"
|
|
820
|
+
>
|
|
821
|
+
System panel
|
|
822
|
+
<span class="pf-c-nav__toggle">
|
|
823
|
+
<span class="pf-c-nav__toggle-icon">
|
|
824
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
825
|
+
</span>
|
|
826
|
+
</span>
|
|
827
|
+
</button>
|
|
828
|
+
<section
|
|
829
|
+
class="pf-c-nav__subnav"
|
|
830
|
+
aria-labelledby="card-view-basic-example-expandable-nav-link1"
|
|
831
|
+
>
|
|
832
|
+
<ul class="pf-c-nav__list">
|
|
833
|
+
<li class="pf-c-nav__item">
|
|
834
|
+
<a href="#" class="pf-c-nav__link">Overview</a>
|
|
835
|
+
</li>
|
|
836
|
+
<li class="pf-c-nav__item">
|
|
837
|
+
<a
|
|
838
|
+
href="#"
|
|
839
|
+
class="pf-c-nav__link pf-m-current"
|
|
840
|
+
aria-current="page"
|
|
841
|
+
>Resource usage</a>
|
|
842
|
+
</li>
|
|
843
|
+
<li class="pf-c-nav__item">
|
|
844
|
+
<a href="#" class="pf-c-nav__link">Hypervisors</a>
|
|
845
|
+
</li>
|
|
846
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
847
|
+
|
|
848
|
+
<li class="pf-c-nav__item">
|
|
849
|
+
<a href="#" class="pf-c-nav__link">Instances</a>
|
|
850
|
+
</li>
|
|
851
|
+
<li class="pf-c-nav__item">
|
|
852
|
+
<a href="#" class="pf-c-nav__link">Volumes</a>
|
|
853
|
+
</li>
|
|
854
|
+
<li class="pf-c-nav__item">
|
|
855
|
+
<a href="#" class="pf-c-nav__link">Networks</a>
|
|
856
|
+
</li>
|
|
857
|
+
</ul>
|
|
858
|
+
</section>
|
|
183
859
|
</li>
|
|
184
|
-
<li class="pf-c-nav__item">
|
|
185
|
-
<
|
|
860
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
861
|
+
<button
|
|
862
|
+
class="pf-c-nav__link"
|
|
863
|
+
id="card-view-basic-example-expandable-nav-link2"
|
|
864
|
+
aria-expanded="false"
|
|
865
|
+
>
|
|
866
|
+
Policy
|
|
867
|
+
<span class="pf-c-nav__toggle">
|
|
868
|
+
<span class="pf-c-nav__toggle-icon">
|
|
869
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
870
|
+
</span>
|
|
871
|
+
</span>
|
|
872
|
+
</button>
|
|
873
|
+
<section
|
|
874
|
+
class="pf-c-nav__subnav"
|
|
875
|
+
aria-labelledby="card-view-basic-example-expandable-nav-link2"
|
|
876
|
+
hidden
|
|
877
|
+
>
|
|
878
|
+
<ul class="pf-c-nav__list">
|
|
879
|
+
<li class="pf-c-nav__item">
|
|
880
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
881
|
+
</li>
|
|
882
|
+
<li class="pf-c-nav__item">
|
|
883
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
884
|
+
</li>
|
|
885
|
+
</ul>
|
|
886
|
+
</section>
|
|
186
887
|
</li>
|
|
187
|
-
<li class="pf-c-nav__item">
|
|
188
|
-
<
|
|
888
|
+
<li class="pf-c-nav__item pf-m-expandable">
|
|
889
|
+
<button
|
|
890
|
+
class="pf-c-nav__link"
|
|
891
|
+
id="card-view-basic-example-expandable-nav-link3"
|
|
892
|
+
aria-expanded="false"
|
|
893
|
+
>
|
|
894
|
+
Authentication
|
|
895
|
+
<span class="pf-c-nav__toggle">
|
|
896
|
+
<span class="pf-c-nav__toggle-icon">
|
|
897
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
898
|
+
</span>
|
|
899
|
+
</span>
|
|
900
|
+
</button>
|
|
901
|
+
<section
|
|
902
|
+
class="pf-c-nav__subnav"
|
|
903
|
+
aria-labelledby="card-view-basic-example-expandable-nav-link3"
|
|
904
|
+
hidden
|
|
905
|
+
>
|
|
906
|
+
<ul class="pf-c-nav__list">
|
|
907
|
+
<li class="pf-c-nav__item">
|
|
908
|
+
<a href="#" class="pf-c-nav__link">Subnav link 1</a>
|
|
909
|
+
</li>
|
|
910
|
+
<li class="pf-c-nav__item">
|
|
911
|
+
<a href="#" class="pf-c-nav__link">Subnav link 2</a>
|
|
912
|
+
</li>
|
|
913
|
+
</ul>
|
|
914
|
+
</section>
|
|
189
915
|
</li>
|
|
190
916
|
</ul>
|
|
191
917
|
</nav>
|
|
@@ -194,16 +920,57 @@ section: demos
|
|
|
194
920
|
<main
|
|
195
921
|
class="pf-c-page__main"
|
|
196
922
|
tabindex="-1"
|
|
197
|
-
id="main-content-card-view-example"
|
|
923
|
+
id="main-content-card-view-basic-example"
|
|
198
924
|
>
|
|
199
|
-
<section class="pf-c-page__main-
|
|
200
|
-
<div class="pf-c-
|
|
201
|
-
<
|
|
202
|
-
|
|
925
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
926
|
+
<div class="pf-c-page__main-body">
|
|
927
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
928
|
+
<ol class="pf-c-breadcrumb__list">
|
|
929
|
+
<li class="pf-c-breadcrumb__item">
|
|
930
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
931
|
+
</li>
|
|
932
|
+
<li class="pf-c-breadcrumb__item">
|
|
933
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
934
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
935
|
+
</span>
|
|
936
|
+
|
|
937
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
938
|
+
</li>
|
|
939
|
+
<li class="pf-c-breadcrumb__item">
|
|
940
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
941
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
942
|
+
</span>
|
|
943
|
+
|
|
944
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
945
|
+
</li>
|
|
946
|
+
<li class="pf-c-breadcrumb__item">
|
|
947
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
948
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
949
|
+
</span>
|
|
950
|
+
|
|
951
|
+
<a
|
|
952
|
+
href="#"
|
|
953
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
954
|
+
aria-current="page"
|
|
955
|
+
>Section landing</a>
|
|
956
|
+
</li>
|
|
957
|
+
</ol>
|
|
958
|
+
</nav>
|
|
959
|
+
</div>
|
|
960
|
+
</section>
|
|
961
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
962
|
+
<div class="pf-c-page__main-body">
|
|
963
|
+
<div class="pf-c-content">
|
|
964
|
+
<h1>Main title</h1>
|
|
965
|
+
<p>This is a full page demo.</p>
|
|
966
|
+
</div>
|
|
203
967
|
</div>
|
|
204
968
|
</section>
|
|
205
969
|
<section class="pf-c-page__main-section pf-m-light pf-m-no-padding">
|
|
206
|
-
<div
|
|
970
|
+
<div
|
|
971
|
+
class="pf-c-toolbar pf-m-page-insets"
|
|
972
|
+
id="card-view-basic-example-toolbar"
|
|
973
|
+
>
|
|
207
974
|
<div class="pf-c-toolbar__content">
|
|
208
975
|
<div class="pf-c-toolbar__content-section pf-m-nowrap">
|
|
209
976
|
<div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
|
|
@@ -213,7 +980,7 @@ section: demos
|
|
|
213
980
|
type="button"
|
|
214
981
|
aria-label="Show filters"
|
|
215
982
|
aria-expanded="false"
|
|
216
|
-
aria-controls="-expandable-content"
|
|
983
|
+
aria-controls="card-view-basic-example-toolbar-expandable-content"
|
|
217
984
|
>
|
|
218
985
|
<i class="fas fa-filter" aria-hidden="true"></i>
|
|
219
986
|
</button>
|
|
@@ -223,11 +990,11 @@ section: demos
|
|
|
223
990
|
<div class="pf-c-dropdown__toggle pf-m-split-button">
|
|
224
991
|
<label
|
|
225
992
|
class="pf-c-dropdown__toggle-check"
|
|
226
|
-
for="-bulk-select-toggle-check"
|
|
993
|
+
for="card-view-basic-example-toolbar-bulk-select-toggle-check"
|
|
227
994
|
>
|
|
228
995
|
<input
|
|
229
996
|
type="checkbox"
|
|
230
|
-
id="-bulk-select-toggle-check"
|
|
997
|
+
id="card-view-basic-example-toolbar-bulk-select-toggle-check"
|
|
231
998
|
aria-label="Select all"
|
|
232
999
|
/>
|
|
233
1000
|
</label>
|
|
@@ -236,7 +1003,7 @@ section: demos
|
|
|
236
1003
|
class="pf-c-dropdown__toggle-button"
|
|
237
1004
|
type="button"
|
|
238
1005
|
aria-expanded="false"
|
|
239
|
-
id="-bulk-select-toggle-button"
|
|
1006
|
+
id="card-view-basic-example-toolbar-bulk-select-toggle-button"
|
|
240
1007
|
aria-label="Dropdown toggle"
|
|
241
1008
|
>
|
|
242
1009
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
@@ -267,15 +1034,18 @@ section: demos
|
|
|
267
1034
|
|
|
268
1035
|
<div class="pf-c-toolbar__item">
|
|
269
1036
|
<div class="pf-c-select">
|
|
270
|
-
<span
|
|
1037
|
+
<span
|
|
1038
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-label"
|
|
1039
|
+
hidden
|
|
1040
|
+
>Choose one</span>
|
|
271
1041
|
|
|
272
1042
|
<button
|
|
273
1043
|
class="pf-c-select__toggle"
|
|
274
1044
|
type="button"
|
|
275
|
-
id="-select-checkbox-status-toggle"
|
|
1045
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-toggle"
|
|
276
1046
|
aria-haspopup="true"
|
|
277
1047
|
aria-expanded="false"
|
|
278
|
-
aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
|
|
1048
|
+
aria-labelledby="card-view-basic-example-toolbar-select-checkbox-status-label card-view-basic-example-toolbar-select-checkbox-status-toggle"
|
|
279
1049
|
>
|
|
280
1050
|
<div class="pf-c-select__toggle-wrapper">
|
|
281
1051
|
<span class="pf-c-select__toggle-text">Status</span>
|
|
@@ -292,13 +1062,13 @@ section: demos
|
|
|
292
1062
|
>
|
|
293
1063
|
<label
|
|
294
1064
|
class="pf-c-check pf-c-select__menu-item pf-m-description"
|
|
295
|
-
for="-select-checkbox-status-active"
|
|
1065
|
+
for="card-view-basic-example-toolbar-select-checkbox-status-active"
|
|
296
1066
|
>
|
|
297
1067
|
<input
|
|
298
1068
|
class="pf-c-check__input"
|
|
299
1069
|
type="checkbox"
|
|
300
|
-
id="-select-checkbox-status-active"
|
|
301
|
-
name="-select-checkbox-status-active"
|
|
1070
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-active"
|
|
1071
|
+
name="card-view-basic-example-toolbar-select-checkbox-status-active"
|
|
302
1072
|
/>
|
|
303
1073
|
|
|
304
1074
|
<span class="pf-c-check__label">Active</span>
|
|
@@ -308,13 +1078,13 @@ section: demos
|
|
|
308
1078
|
</label>
|
|
309
1079
|
<label
|
|
310
1080
|
class="pf-c-check pf-c-select__menu-item pf-m-description"
|
|
311
|
-
for="-select-checkbox-status-canceled"
|
|
1081
|
+
for="card-view-basic-example-toolbar-select-checkbox-status-canceled"
|
|
312
1082
|
>
|
|
313
1083
|
<input
|
|
314
1084
|
class="pf-c-check__input"
|
|
315
1085
|
type="checkbox"
|
|
316
|
-
id="-select-checkbox-status-canceled"
|
|
317
|
-
name="-select-checkbox-status-canceled"
|
|
1086
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-canceled"
|
|
1087
|
+
name="card-view-basic-example-toolbar-select-checkbox-status-canceled"
|
|
318
1088
|
/>
|
|
319
1089
|
|
|
320
1090
|
<span class="pf-c-check__label">Canceled</span>
|
|
@@ -324,39 +1094,39 @@ section: demos
|
|
|
324
1094
|
</label>
|
|
325
1095
|
<label
|
|
326
1096
|
class="pf-c-check pf-c-select__menu-item"
|
|
327
|
-
for="-select-checkbox-status-paused"
|
|
1097
|
+
for="card-view-basic-example-toolbar-select-checkbox-status-paused"
|
|
328
1098
|
>
|
|
329
1099
|
<input
|
|
330
1100
|
class="pf-c-check__input"
|
|
331
1101
|
type="checkbox"
|
|
332
|
-
id="-select-checkbox-status-paused"
|
|
333
|
-
name="-select-checkbox-status-paused"
|
|
1102
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-paused"
|
|
1103
|
+
name="card-view-basic-example-toolbar-select-checkbox-status-paused"
|
|
334
1104
|
/>
|
|
335
1105
|
|
|
336
1106
|
<span class="pf-c-check__label">Paused</span>
|
|
337
1107
|
</label>
|
|
338
1108
|
<label
|
|
339
1109
|
class="pf-c-check pf-c-select__menu-item"
|
|
340
|
-
for="-select-checkbox-status-warning"
|
|
1110
|
+
for="card-view-basic-example-toolbar-select-checkbox-status-warning"
|
|
341
1111
|
>
|
|
342
1112
|
<input
|
|
343
1113
|
class="pf-c-check__input"
|
|
344
1114
|
type="checkbox"
|
|
345
|
-
id="-select-checkbox-status-warning"
|
|
346
|
-
name="-select-checkbox-status-warning"
|
|
1115
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-warning"
|
|
1116
|
+
name="card-view-basic-example-toolbar-select-checkbox-status-warning"
|
|
347
1117
|
/>
|
|
348
1118
|
|
|
349
1119
|
<span class="pf-c-check__label">Warning</span>
|
|
350
1120
|
</label>
|
|
351
1121
|
<label
|
|
352
1122
|
class="pf-c-check pf-c-select__menu-item"
|
|
353
|
-
for="-select-checkbox-status-restarted"
|
|
1123
|
+
for="card-view-basic-example-toolbar-select-checkbox-status-restarted"
|
|
354
1124
|
>
|
|
355
1125
|
<input
|
|
356
1126
|
class="pf-c-check__input"
|
|
357
1127
|
type="checkbox"
|
|
358
|
-
id="-select-checkbox-status-restarted"
|
|
359
|
-
name="-select-checkbox-status-restarted"
|
|
1128
|
+
id="card-view-basic-example-toolbar-select-checkbox-status-restarted"
|
|
1129
|
+
name="card-view-basic-example-toolbar-select-checkbox-status-restarted"
|
|
360
1130
|
/>
|
|
361
1131
|
|
|
362
1132
|
<span class="pf-c-check__label">Restarted</span>
|
|
@@ -367,7 +1137,10 @@ section: demos
|
|
|
367
1137
|
</div>
|
|
368
1138
|
</div>
|
|
369
1139
|
|
|
370
|
-
<div
|
|
1140
|
+
<div
|
|
1141
|
+
class="pf-c-overflow-menu"
|
|
1142
|
+
id="card-view-basic-example-toolbar-overflow-menu"
|
|
1143
|
+
>
|
|
371
1144
|
<div
|
|
372
1145
|
class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
|
|
373
1146
|
>
|
|
@@ -385,7 +1158,7 @@ section: demos
|
|
|
385
1158
|
<button
|
|
386
1159
|
class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
|
|
387
1160
|
type="button"
|
|
388
|
-
id="-overflow-menu-dropdown-toggle"
|
|
1161
|
+
id="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
|
|
389
1162
|
aria-label="Dropdown with additional options"
|
|
390
1163
|
aria-expanded="false"
|
|
391
1164
|
>
|
|
@@ -393,7 +1166,7 @@ section: demos
|
|
|
393
1166
|
</button>
|
|
394
1167
|
<ul
|
|
395
1168
|
class="pf-c-dropdown__menu"
|
|
396
|
-
aria-labelledby="-overflow-menu-dropdown-toggle"
|
|
1169
|
+
aria-labelledby="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
|
|
397
1170
|
hidden
|
|
398
1171
|
>
|
|
399
1172
|
<li>
|
|
@@ -410,7 +1183,7 @@ section: demos
|
|
|
410
1183
|
<button
|
|
411
1184
|
class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
|
|
412
1185
|
type="button"
|
|
413
|
-
id="-top-pagination-toggle"
|
|
1186
|
+
id="card-view-basic-example-toolbar-top-pagination-toggle"
|
|
414
1187
|
aria-haspopup="listbox"
|
|
415
1188
|
aria-expanded="false"
|
|
416
1189
|
>
|
|
@@ -424,7 +1197,7 @@ section: demos
|
|
|
424
1197
|
</button>
|
|
425
1198
|
<ul
|
|
426
1199
|
class="pf-c-options-menu__menu"
|
|
427
|
-
aria-labelledby="-top-pagination-toggle"
|
|
1200
|
+
aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
|
|
428
1201
|
hidden
|
|
429
1202
|
>
|
|
430
1203
|
<li>
|
|
@@ -482,7 +1255,7 @@ section: demos
|
|
|
482
1255
|
|
|
483
1256
|
<div
|
|
484
1257
|
class="pf-c-toolbar__expandable-content pf-m-hidden"
|
|
485
|
-
id="-expandable-content"
|
|
1258
|
+
id="card-view-basic-example-toolbar-expandable-content"
|
|
486
1259
|
hidden
|
|
487
1260
|
></div>
|
|
488
1261
|
</div>
|
|
@@ -492,7 +1265,7 @@ section: demos
|
|
|
492
1265
|
<div class="pf-l-gallery pf-m-gutter">
|
|
493
1266
|
<div
|
|
494
1267
|
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
495
|
-
id="card-empty-state"
|
|
1268
|
+
id="card-view-basic-example-gallery-card-empty-state"
|
|
496
1269
|
>
|
|
497
1270
|
<div class="pf-l-bullseye">
|
|
498
1271
|
<div class="pf-c-empty-state pf-m-xs">
|
|
@@ -506,14 +1279,17 @@ section: demos
|
|
|
506
1279
|
</div>
|
|
507
1280
|
</div>
|
|
508
1281
|
</div>
|
|
509
|
-
<div
|
|
1282
|
+
<div
|
|
1283
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1284
|
+
id="card-view-basic-example-gallery-card-1"
|
|
1285
|
+
>
|
|
510
1286
|
<div class="pf-c-card__header">
|
|
511
1287
|
<img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
|
|
512
1288
|
<div class="pf-c-card__actions">
|
|
513
1289
|
<div class="pf-c-dropdown">
|
|
514
1290
|
<button
|
|
515
1291
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
516
|
-
id="card-1-dropdown-kebab-button"
|
|
1292
|
+
id="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
|
|
517
1293
|
aria-expanded="false"
|
|
518
1294
|
type="button"
|
|
519
1295
|
aria-label="Actions"
|
|
@@ -522,7 +1298,7 @@ section: demos
|
|
|
522
1298
|
</button>
|
|
523
1299
|
<ul
|
|
524
1300
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
525
|
-
aria-labelledby="card-1-dropdown-kebab-button"
|
|
1301
|
+
aria-labelledby="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
|
|
526
1302
|
hidden
|
|
527
1303
|
>
|
|
528
1304
|
<li>
|
|
@@ -559,15 +1335,17 @@ section: demos
|
|
|
559
1335
|
<input
|
|
560
1336
|
class="pf-c-check__input"
|
|
561
1337
|
type="checkbox"
|
|
562
|
-
id="card-1-check"
|
|
563
|
-
name="card-1-check"
|
|
564
|
-
aria-labelledby="card-1-check-label"
|
|
1338
|
+
id="card-view-basic-example-gallery-card-1-check"
|
|
1339
|
+
name="card-view-basic-example-gallery-card-1-check"
|
|
1340
|
+
aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
|
|
565
1341
|
/>
|
|
566
1342
|
</div>
|
|
567
1343
|
</div>
|
|
568
1344
|
</div>
|
|
569
1345
|
<div class="pf-c-card__title">
|
|
570
|
-
<p
|
|
1346
|
+
<p
|
|
1347
|
+
id="card-view-basic-example-gallery-card-1-check-label"
|
|
1348
|
+
>Patternfly</p>
|
|
571
1349
|
<div class="pf-c-content">
|
|
572
1350
|
<small>Provided by Red Hat</small>
|
|
573
1351
|
</div>
|
|
@@ -576,7 +1354,10 @@ section: demos
|
|
|
576
1354
|
class="pf-c-card__body"
|
|
577
1355
|
>PatternFly is a community project that promotes design commonality and improves user experience.</div>
|
|
578
1356
|
</div>
|
|
579
|
-
<div
|
|
1357
|
+
<div
|
|
1358
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1359
|
+
id="card-view-basic-example-gallery-card-2"
|
|
1360
|
+
>
|
|
580
1361
|
<div class="pf-c-card__header">
|
|
581
1362
|
<img
|
|
582
1363
|
src="/assets/images/activemq-core_200x150.png"
|
|
@@ -587,7 +1368,7 @@ section: demos
|
|
|
587
1368
|
<div class="pf-c-dropdown">
|
|
588
1369
|
<button
|
|
589
1370
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
590
|
-
id="card-2-dropdown-kebab-button"
|
|
1371
|
+
id="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
|
|
591
1372
|
aria-expanded="false"
|
|
592
1373
|
type="button"
|
|
593
1374
|
aria-label="Actions"
|
|
@@ -596,7 +1377,7 @@ section: demos
|
|
|
596
1377
|
</button>
|
|
597
1378
|
<ul
|
|
598
1379
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
599
|
-
aria-labelledby="card-2-dropdown-kebab-button"
|
|
1380
|
+
aria-labelledby="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
|
|
600
1381
|
hidden
|
|
601
1382
|
>
|
|
602
1383
|
<li>
|
|
@@ -633,15 +1414,15 @@ section: demos
|
|
|
633
1414
|
<input
|
|
634
1415
|
class="pf-c-check__input"
|
|
635
1416
|
type="checkbox"
|
|
636
|
-
id="card-2-check"
|
|
637
|
-
name="card-2-check"
|
|
638
|
-
aria-labelledby="card-2-check-label"
|
|
1417
|
+
id="card-view-basic-example-gallery-card-2-check"
|
|
1418
|
+
name="card-view-basic-example-gallery-card-2-check"
|
|
1419
|
+
aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
|
|
639
1420
|
/>
|
|
640
1421
|
</div>
|
|
641
1422
|
</div>
|
|
642
1423
|
</div>
|
|
643
1424
|
<div class="pf-c-card__title">
|
|
644
|
-
<p id="card-2-check-label">ActiveMQ</p>
|
|
1425
|
+
<p id="card-view-basic-example-gallery-card-2-check-label">ActiveMQ</p>
|
|
645
1426
|
<div class="pf-c-content">
|
|
646
1427
|
<small>Provided by Red Hat</small>
|
|
647
1428
|
</div>
|
|
@@ -650,7 +1431,10 @@ section: demos
|
|
|
650
1431
|
class="pf-c-card__body"
|
|
651
1432
|
>The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
|
|
652
1433
|
</div>
|
|
653
|
-
<div
|
|
1434
|
+
<div
|
|
1435
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1436
|
+
id="card-view-basic-example-gallery-card-3"
|
|
1437
|
+
>
|
|
654
1438
|
<div class="pf-c-card__header">
|
|
655
1439
|
<img
|
|
656
1440
|
src="/assets/images/camel-spark_200x150.png"
|
|
@@ -661,7 +1445,7 @@ section: demos
|
|
|
661
1445
|
<div class="pf-c-dropdown">
|
|
662
1446
|
<button
|
|
663
1447
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
664
|
-
id="card-3-dropdown-kebab-button"
|
|
1448
|
+
id="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
|
|
665
1449
|
aria-expanded="false"
|
|
666
1450
|
type="button"
|
|
667
1451
|
aria-label="Actions"
|
|
@@ -670,7 +1454,7 @@ section: demos
|
|
|
670
1454
|
</button>
|
|
671
1455
|
<ul
|
|
672
1456
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
673
|
-
aria-labelledby="card-3-dropdown-kebab-button"
|
|
1457
|
+
aria-labelledby="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
|
|
674
1458
|
hidden
|
|
675
1459
|
>
|
|
676
1460
|
<li>
|
|
@@ -707,15 +1491,17 @@ section: demos
|
|
|
707
1491
|
<input
|
|
708
1492
|
class="pf-c-check__input"
|
|
709
1493
|
type="checkbox"
|
|
710
|
-
id="card-3-check"
|
|
711
|
-
name="card-3-check"
|
|
712
|
-
aria-labelledby="card-3-check-label"
|
|
1494
|
+
id="card-view-basic-example-gallery-card-3-check"
|
|
1495
|
+
name="card-view-basic-example-gallery-card-3-check"
|
|
1496
|
+
aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
|
|
713
1497
|
/>
|
|
714
1498
|
</div>
|
|
715
1499
|
</div>
|
|
716
1500
|
</div>
|
|
717
1501
|
<div class="pf-c-card__title">
|
|
718
|
-
<p
|
|
1502
|
+
<p
|
|
1503
|
+
id="card-view-basic-example-gallery-card-3-check-label"
|
|
1504
|
+
>Apache Spark</p>
|
|
719
1505
|
<div class="pf-c-content">
|
|
720
1506
|
<small>Provided by Red Hat</small>
|
|
721
1507
|
</div>
|
|
@@ -724,7 +1510,10 @@ section: demos
|
|
|
724
1510
|
class="pf-c-card__body"
|
|
725
1511
|
>This documentation page covers the Apache Spark component for the Apache Camel.</div>
|
|
726
1512
|
</div>
|
|
727
|
-
<div
|
|
1513
|
+
<div
|
|
1514
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1515
|
+
id="card-view-basic-example-gallery-card-4"
|
|
1516
|
+
>
|
|
728
1517
|
<div class="pf-c-card__header">
|
|
729
1518
|
<img
|
|
730
1519
|
src="/assets/images/camel-avro_200x150.png"
|
|
@@ -735,7 +1524,7 @@ section: demos
|
|
|
735
1524
|
<div class="pf-c-dropdown">
|
|
736
1525
|
<button
|
|
737
1526
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
738
|
-
id="card-4-dropdown-kebab-button"
|
|
1527
|
+
id="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
|
|
739
1528
|
aria-expanded="false"
|
|
740
1529
|
type="button"
|
|
741
1530
|
aria-label="Actions"
|
|
@@ -744,7 +1533,7 @@ section: demos
|
|
|
744
1533
|
</button>
|
|
745
1534
|
<ul
|
|
746
1535
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
747
|
-
aria-labelledby="card-4-dropdown-kebab-button"
|
|
1536
|
+
aria-labelledby="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
|
|
748
1537
|
hidden
|
|
749
1538
|
>
|
|
750
1539
|
<li>
|
|
@@ -781,15 +1570,15 @@ section: demos
|
|
|
781
1570
|
<input
|
|
782
1571
|
class="pf-c-check__input"
|
|
783
1572
|
type="checkbox"
|
|
784
|
-
id="card-4-check"
|
|
785
|
-
name="card-4-check"
|
|
786
|
-
aria-labelledby="card-4-check-label"
|
|
1573
|
+
id="card-view-basic-example-gallery-card-4-check"
|
|
1574
|
+
name="card-view-basic-example-gallery-card-4-check"
|
|
1575
|
+
aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
|
|
787
1576
|
/>
|
|
788
1577
|
</div>
|
|
789
1578
|
</div>
|
|
790
1579
|
</div>
|
|
791
1580
|
<div class="pf-c-card__title">
|
|
792
|
-
<p id="card-4-check-label">Avro</p>
|
|
1581
|
+
<p id="card-view-basic-example-gallery-card-4-check-label">Avro</p>
|
|
793
1582
|
<div class="pf-c-content">
|
|
794
1583
|
<small>Provided by Red Hat</small>
|
|
795
1584
|
</div>
|
|
@@ -800,7 +1589,7 @@ section: demos
|
|
|
800
1589
|
</div>
|
|
801
1590
|
<div
|
|
802
1591
|
class="pf-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
|
|
803
|
-
id="card-5"
|
|
1592
|
+
id="card-view-basic-example-gallery-card-5"
|
|
804
1593
|
>
|
|
805
1594
|
<div class="pf-c-card__header">
|
|
806
1595
|
<img
|
|
@@ -812,7 +1601,7 @@ section: demos
|
|
|
812
1601
|
<div class="pf-c-dropdown">
|
|
813
1602
|
<button
|
|
814
1603
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
815
|
-
id="card-5-dropdown-kebab-button"
|
|
1604
|
+
id="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
|
|
816
1605
|
aria-expanded="false"
|
|
817
1606
|
type="button"
|
|
818
1607
|
aria-label="Actions"
|
|
@@ -821,7 +1610,7 @@ section: demos
|
|
|
821
1610
|
</button>
|
|
822
1611
|
<ul
|
|
823
1612
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
824
|
-
aria-labelledby="card-5-dropdown-kebab-button"
|
|
1613
|
+
aria-labelledby="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
|
|
825
1614
|
hidden
|
|
826
1615
|
>
|
|
827
1616
|
<li>
|
|
@@ -858,15 +1647,17 @@ section: demos
|
|
|
858
1647
|
<input
|
|
859
1648
|
class="pf-c-check__input"
|
|
860
1649
|
type="checkbox"
|
|
861
|
-
id="card-5-check"
|
|
862
|
-
name="card-5-check"
|
|
863
|
-
aria-labelledby="card-5-check-label"
|
|
1650
|
+
id="card-view-basic-example-gallery-card-5-check"
|
|
1651
|
+
name="card-view-basic-example-gallery-card-5-check"
|
|
1652
|
+
aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
|
|
864
1653
|
/>
|
|
865
1654
|
</div>
|
|
866
1655
|
</div>
|
|
867
1656
|
</div>
|
|
868
1657
|
<div class="pf-c-card__title">
|
|
869
|
-
<p
|
|
1658
|
+
<p
|
|
1659
|
+
id="card-view-basic-example-gallery-card-5-check-label"
|
|
1660
|
+
>Azure Services</p>
|
|
870
1661
|
<div class="pf-c-content">
|
|
871
1662
|
<small>Provided by Red Hat</small>
|
|
872
1663
|
</div>
|
|
@@ -877,7 +1668,7 @@ section: demos
|
|
|
877
1668
|
</div>
|
|
878
1669
|
<div
|
|
879
1670
|
class="pf-c-card pf-m-non-selectable-raised pf-m-compact"
|
|
880
|
-
id="card-6"
|
|
1671
|
+
id="card-view-basic-example-gallery-card-6"
|
|
881
1672
|
>
|
|
882
1673
|
<div class="pf-c-card__header">
|
|
883
1674
|
<img
|
|
@@ -889,7 +1680,7 @@ section: demos
|
|
|
889
1680
|
<div class="pf-c-dropdown">
|
|
890
1681
|
<button
|
|
891
1682
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
892
|
-
id="card-6-dropdown-kebab-button"
|
|
1683
|
+
id="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
|
|
893
1684
|
aria-expanded="false"
|
|
894
1685
|
type="button"
|
|
895
1686
|
aria-label="Actions"
|
|
@@ -898,7 +1689,7 @@ section: demos
|
|
|
898
1689
|
</button>
|
|
899
1690
|
<ul
|
|
900
1691
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
901
|
-
aria-labelledby="card-6-dropdown-kebab-button"
|
|
1692
|
+
aria-labelledby="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
|
|
902
1693
|
hidden
|
|
903
1694
|
>
|
|
904
1695
|
<li>
|
|
@@ -935,16 +1726,16 @@ section: demos
|
|
|
935
1726
|
<input
|
|
936
1727
|
class="pf-c-check__input"
|
|
937
1728
|
type="checkbox"
|
|
938
|
-
id="card-6-check"
|
|
939
|
-
name="card-6-check"
|
|
1729
|
+
id="card-view-basic-example-gallery-card-6-check"
|
|
1730
|
+
name="card-view-basic-example-gallery-card-6-check"
|
|
940
1731
|
disabled
|
|
941
|
-
aria-labelledby="card-6-check-label"
|
|
1732
|
+
aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
|
|
942
1733
|
/>
|
|
943
1734
|
</div>
|
|
944
1735
|
</div>
|
|
945
1736
|
</div>
|
|
946
1737
|
<div class="pf-c-card__title">
|
|
947
|
-
<p id="card-6-check-label">Crypto</p>
|
|
1738
|
+
<p id="card-view-basic-example-gallery-card-6-check-label">Crypto</p>
|
|
948
1739
|
<div class="pf-c-content">
|
|
949
1740
|
<small>Provided by Red Hat</small>
|
|
950
1741
|
</div>
|
|
@@ -953,7 +1744,10 @@ section: demos
|
|
|
953
1744
|
class="pf-c-card__body"
|
|
954
1745
|
>For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
|
|
955
1746
|
</div>
|
|
956
|
-
<div
|
|
1747
|
+
<div
|
|
1748
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1749
|
+
id="card-view-basic-example-gallery-card-7"
|
|
1750
|
+
>
|
|
957
1751
|
<div class="pf-c-card__header">
|
|
958
1752
|
<img
|
|
959
1753
|
src="/assets/images/camel-dropbox_200x150.png"
|
|
@@ -964,7 +1758,7 @@ section: demos
|
|
|
964
1758
|
<div class="pf-c-dropdown">
|
|
965
1759
|
<button
|
|
966
1760
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
967
|
-
id="card-7-dropdown-kebab-button"
|
|
1761
|
+
id="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
|
|
968
1762
|
aria-expanded="false"
|
|
969
1763
|
type="button"
|
|
970
1764
|
aria-label="Actions"
|
|
@@ -973,7 +1767,7 @@ section: demos
|
|
|
973
1767
|
</button>
|
|
974
1768
|
<ul
|
|
975
1769
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
976
|
-
aria-labelledby="card-7-dropdown-kebab-button"
|
|
1770
|
+
aria-labelledby="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
|
|
977
1771
|
hidden
|
|
978
1772
|
>
|
|
979
1773
|
<li>
|
|
@@ -1010,15 +1804,15 @@ section: demos
|
|
|
1010
1804
|
<input
|
|
1011
1805
|
class="pf-c-check__input"
|
|
1012
1806
|
type="checkbox"
|
|
1013
|
-
id="card-7-check"
|
|
1014
|
-
name="card-7-check"
|
|
1015
|
-
aria-labelledby="card-7-check-label"
|
|
1807
|
+
id="card-view-basic-example-gallery-card-7-check"
|
|
1808
|
+
name="card-view-basic-example-gallery-card-7-check"
|
|
1809
|
+
aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
|
|
1016
1810
|
/>
|
|
1017
1811
|
</div>
|
|
1018
1812
|
</div>
|
|
1019
1813
|
</div>
|
|
1020
1814
|
<div class="pf-c-card__title">
|
|
1021
|
-
<p id="card-7-check-label">DropBox</p>
|
|
1815
|
+
<p id="card-view-basic-example-gallery-card-7-check-label">DropBox</p>
|
|
1022
1816
|
<div class="pf-c-content">
|
|
1023
1817
|
<small>Provided by Red Hat</small>
|
|
1024
1818
|
</div>
|
|
@@ -1027,7 +1821,10 @@ section: demos
|
|
|
1027
1821
|
class="pf-c-card__body"
|
|
1028
1822
|
>The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
|
|
1029
1823
|
</div>
|
|
1030
|
-
<div
|
|
1824
|
+
<div
|
|
1825
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1826
|
+
id="card-view-basic-example-gallery-card-8"
|
|
1827
|
+
>
|
|
1031
1828
|
<div class="pf-c-card__header">
|
|
1032
1829
|
<img
|
|
1033
1830
|
src="/assets/images/camel-infinispan_200x150.png"
|
|
@@ -1038,7 +1835,7 @@ section: demos
|
|
|
1038
1835
|
<div class="pf-c-dropdown">
|
|
1039
1836
|
<button
|
|
1040
1837
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1041
|
-
id="card-8-dropdown-kebab-button"
|
|
1838
|
+
id="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
|
|
1042
1839
|
aria-expanded="false"
|
|
1043
1840
|
type="button"
|
|
1044
1841
|
aria-label="Actions"
|
|
@@ -1047,7 +1844,7 @@ section: demos
|
|
|
1047
1844
|
</button>
|
|
1048
1845
|
<ul
|
|
1049
1846
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1050
|
-
aria-labelledby="card-8-dropdown-kebab-button"
|
|
1847
|
+
aria-labelledby="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
|
|
1051
1848
|
hidden
|
|
1052
1849
|
>
|
|
1053
1850
|
<li>
|
|
@@ -1084,15 +1881,17 @@ section: demos
|
|
|
1084
1881
|
<input
|
|
1085
1882
|
class="pf-c-check__input"
|
|
1086
1883
|
type="checkbox"
|
|
1087
|
-
id="card-8-check"
|
|
1088
|
-
name="card-8-check"
|
|
1089
|
-
aria-labelledby="card-8-check-label"
|
|
1884
|
+
id="card-view-basic-example-gallery-card-8-check"
|
|
1885
|
+
name="card-view-basic-example-gallery-card-8-check"
|
|
1886
|
+
aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
|
|
1090
1887
|
/>
|
|
1091
1888
|
</div>
|
|
1092
1889
|
</div>
|
|
1093
1890
|
</div>
|
|
1094
1891
|
<div class="pf-c-card__title">
|
|
1095
|
-
<p
|
|
1892
|
+
<p
|
|
1893
|
+
id="card-view-basic-example-gallery-card-8-check-label"
|
|
1894
|
+
>JBoss Data Grid</p>
|
|
1096
1895
|
<div class="pf-c-content">
|
|
1097
1896
|
<small>Provided by Red Hat</small>
|
|
1098
1897
|
</div>
|
|
@@ -1101,7 +1900,10 @@ section: demos
|
|
|
1101
1900
|
class="pf-c-card__body"
|
|
1102
1901
|
>Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
|
|
1103
1902
|
</div>
|
|
1104
|
-
<div
|
|
1903
|
+
<div
|
|
1904
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1905
|
+
id="card-view-basic-example-gallery-card-9"
|
|
1906
|
+
>
|
|
1105
1907
|
<div class="pf-c-card__header">
|
|
1106
1908
|
<img
|
|
1107
1909
|
src="/assets/images/FuseConnector_Icons_REST.png"
|
|
@@ -1112,7 +1914,7 @@ section: demos
|
|
|
1112
1914
|
<div class="pf-c-dropdown">
|
|
1113
1915
|
<button
|
|
1114
1916
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1115
|
-
id="card-9-dropdown-kebab-button"
|
|
1917
|
+
id="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
|
|
1116
1918
|
aria-expanded="false"
|
|
1117
1919
|
type="button"
|
|
1118
1920
|
aria-label="Actions"
|
|
@@ -1121,7 +1923,7 @@ section: demos
|
|
|
1121
1923
|
</button>
|
|
1122
1924
|
<ul
|
|
1123
1925
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1124
|
-
aria-labelledby="card-9-dropdown-kebab-button"
|
|
1926
|
+
aria-labelledby="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
|
|
1125
1927
|
hidden
|
|
1126
1928
|
>
|
|
1127
1929
|
<li>
|
|
@@ -1158,15 +1960,15 @@ section: demos
|
|
|
1158
1960
|
<input
|
|
1159
1961
|
class="pf-c-check__input"
|
|
1160
1962
|
type="checkbox"
|
|
1161
|
-
id="card-9-check"
|
|
1162
|
-
name="card-9-check"
|
|
1163
|
-
aria-labelledby="card-9-check-label"
|
|
1963
|
+
id="card-view-basic-example-gallery-card-9-check"
|
|
1964
|
+
name="card-view-basic-example-gallery-card-9-check"
|
|
1965
|
+
aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
|
|
1164
1966
|
/>
|
|
1165
1967
|
</div>
|
|
1166
1968
|
</div>
|
|
1167
1969
|
</div>
|
|
1168
1970
|
<div class="pf-c-card__title">
|
|
1169
|
-
<p id="card-9-check-label">REST</p>
|
|
1971
|
+
<p id="card-view-basic-example-gallery-card-9-check-label">REST</p>
|
|
1170
1972
|
<div class="pf-c-content">
|
|
1171
1973
|
<small>Provided by Red Hat</small>
|
|
1172
1974
|
</div>
|
|
@@ -1176,7 +1978,10 @@ section: demos
|
|
|
1176
1978
|
From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
|
|
1177
1979
|
</div>
|
|
1178
1980
|
</div>
|
|
1179
|
-
<div
|
|
1981
|
+
<div
|
|
1982
|
+
class="pf-c-card pf-m-selectable-raised pf-m-compact"
|
|
1983
|
+
id="card-view-basic-example-gallery-card-10"
|
|
1984
|
+
>
|
|
1180
1985
|
<div class="pf-c-card__header">
|
|
1181
1986
|
<img
|
|
1182
1987
|
src="/assets/images/camel-swagger-java_200x150.png"
|
|
@@ -1187,7 +1992,7 @@ section: demos
|
|
|
1187
1992
|
<div class="pf-c-dropdown">
|
|
1188
1993
|
<button
|
|
1189
1994
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1190
|
-
id="card-10-dropdown-kebab-button"
|
|
1995
|
+
id="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
|
|
1191
1996
|
aria-expanded="false"
|
|
1192
1997
|
type="button"
|
|
1193
1998
|
aria-label="Actions"
|
|
@@ -1196,7 +2001,7 @@ section: demos
|
|
|
1196
2001
|
</button>
|
|
1197
2002
|
<ul
|
|
1198
2003
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1199
|
-
aria-labelledby="card-10-dropdown-kebab-button"
|
|
2004
|
+
aria-labelledby="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
|
|
1200
2005
|
hidden
|
|
1201
2006
|
>
|
|
1202
2007
|
<li>
|
|
@@ -1233,15 +2038,15 @@ section: demos
|
|
|
1233
2038
|
<input
|
|
1234
2039
|
class="pf-c-check__input"
|
|
1235
2040
|
type="checkbox"
|
|
1236
|
-
id="card-10-check"
|
|
1237
|
-
name="card-10-check"
|
|
1238
|
-
aria-labelledby="card-10-check-label"
|
|
2041
|
+
id="card-view-basic-example-gallery-card-10-check"
|
|
2042
|
+
name="card-view-basic-example-gallery-card-10-check"
|
|
2043
|
+
aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
|
|
1239
2044
|
/>
|
|
1240
2045
|
</div>
|
|
1241
2046
|
</div>
|
|
1242
2047
|
</div>
|
|
1243
2048
|
<div class="pf-c-card__title">
|
|
1244
|
-
<p id="card-10-check-label">SWAGGER</p>
|
|
2049
|
+
<p id="card-view-basic-example-gallery-card-10-check-label">SWAGGER</p>
|
|
1245
2050
|
<div class="pf-c-content">
|
|
1246
2051
|
<small>Provided by Red Hat</small>
|
|
1247
2052
|
</div>
|