@patternfly/patternfly 4.184.1 → 4.185.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/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/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/components/Form/examples/Form.md +118 -47
- package/docs/components/MenuToggle/examples/MenuToggle.md +17 -0
- package/docs/components/ModalBox/examples/ModalBox.md +1 -0
- package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
- package/docs/components/Page/examples/Page.md +9 -8
- package/docs/components/Pagination/examples/Pagination.css +3 -0
- package/docs/components/Pagination/examples/Pagination.md +136 -158
- package/docs/components/Toolbar/examples/Toolbar.md +22 -26
- package/docs/components/Wizard/examples/Wizard.md +19 -18
- 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 +1086 -285
- 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 +3703 -1495
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/Form/examples/BasicForms.md +40 -8
- 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 +5525 -35
- 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 +15 -35
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6829 -2373
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +253 -338
- package/docs/demos/Tabs/examples/Tabs.md +8171 -2943
- package/docs/demos/Toolbar/examples/Toolbar.md +885 -253
- package/docs/demos/Wizard/examples/Wizard.md +3422 -292
- 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 +7 -2
- package/patternfly-theme-dark.css +21 -21
- package/patternfly.css +7 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/themes/dark/_patternfly-theme-dark.scss +119 -0
- package/themes/dark/_variables.scss +94 -0
- package/themes/dark/colors.scss +16 -0
- package/themes/dark/globals.scss +7 -0
- package/themes/dark/mixins.scss +5 -0
- package/themes/dark/placeholders.scss +30 -0
- package/themes/dark/scss-variables.scss +85 -0
- package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
- package/components/Accordion/themes/dark/accordion.css +0 -0
- package/components/Alert/themes/dark/alert.css +0 -0
- package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
- package/components/Badge/themes/dark/badge.css +0 -0
- package/components/Banner/themes/dark/banner.css +0 -0
- package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
- package/components/Button/themes/dark/button.css +0 -0
- package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
- package/components/Chip/themes/dark/chip.css +0 -0
- package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
- package/components/CodeEditor/themes/dark/code-editor.css +0 -0
- package/components/ContextSelector/themes/dark/context-selector.css +0 -0
- package/components/DataList/themes/dark/data-list.css +0 -0
- package/components/DatePicker/themes/dark/date-picker.css +0 -0
- package/components/Drawer/themes/dark/drawer.css +0 -0
- package/components/Dropdown/themes/dark/dropdown.css +0 -0
- package/components/Form/themes/dark/form.css +0 -0
- package/components/FormControl/themes/dark/form-control.css +0 -0
- package/components/HelperText/themes/dark/helper-text.css +0 -0
- package/components/Hint/themes/dark/hint.css +0 -0
- package/components/InputGroup/themes/dark/input-group.css +0 -0
- package/components/Label/themes/dark/label.css +0 -0
- package/components/LogViewer/themes/dark/log-viewer.css +0 -0
- package/components/Login/themes/dark/login.css +0 -0
- package/components/Masthead/themes/dark/masthead.css +0 -0
- package/components/Menu/themes/dark/menu.css +0 -0
- package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
- package/components/ModalBox/themes/dark/modal-box.css +0 -0
- package/components/Nav/themes/dark/nav.css +0 -0
- package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
- package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
- package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
- package/components/Page/themes/dark/page.css +0 -0
- package/components/Pagination/themes/dark/pagination.css +0 -0
- package/components/Popover/themes/dark/popover.css +0 -0
- package/components/Progress/themes/dark/progress.css +0 -0
- package/components/SearchInput/themes/dark/search-input.css +0 -0
- package/components/Select/themes/dark/select.css +0 -0
- package/components/SimpleList/themes/dark/simple-list.css +0 -0
- package/components/Skeleton/themes/dark/skeleton.css +0 -0
- package/components/Switch/themes/dark/switch.css +0 -0
- package/components/Table/themes/dark/table.css +0 -0
- package/components/Tabs/themes/dark/tabs.css +0 -0
- package/components/Tile/themes/dark/tile.css +0 -0
- package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
- package/components/Tooltip/themes/dark/tooltip.css +0 -0
- package/components/TreeView/themes/dark/tree-view.css +0 -0
- package/components/Wizard/themes/dark/wizard.css +0 -0
|
@@ -7,176 +7,821 @@ wrapperTag: div
|
|
|
7
7
|
### Collapsed
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
|
-
<div class="pf-c-page" id="drawer-collapsed">
|
|
10
|
+
<div class="pf-c-page" id="drawer-collapsed-example">
|
|
11
11
|
<a
|
|
12
12
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
13
|
-
href="#main-content-drawer-collapsed"
|
|
13
|
+
href="#main-content-drawer-collapsed-example"
|
|
14
14
|
>Skip to content</a>
|
|
15
|
-
<header class="pf-c-
|
|
16
|
-
<
|
|
17
|
-
<
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
<header class="pf-c-masthead" id="drawer-collapsed-example-masthead">
|
|
16
|
+
<span class="pf-c-masthead__toggle">
|
|
17
|
+
<button
|
|
18
|
+
class="pf-c-button pf-m-plain"
|
|
19
|
+
type="button"
|
|
20
|
+
aria-label="Global navigation"
|
|
21
|
+
>
|
|
22
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
23
|
+
</button>
|
|
24
|
+
</span>
|
|
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;"
|
|
25
30
|
>
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
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>
|
|
35
41
|
</a>
|
|
36
42
|
</div>
|
|
37
|
-
<div class="pf-c-
|
|
38
|
-
<div
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
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="drawer-collapsed-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="drawer-collapsed-dropdown-kebab-1-button"
|
|
77
|
-
hidden
|
|
43
|
+
<div class="pf-c-masthead__content">
|
|
44
|
+
<div
|
|
45
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
46
|
+
id="drawer-collapsed-example-masthead-toolbar"
|
|
47
|
+
>
|
|
48
|
+
<div class="pf-c-toolbar__content">
|
|
49
|
+
<div class="pf-c-toolbar__content-section">
|
|
50
|
+
<div
|
|
51
|
+
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
52
|
>
|
|
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>
|
|
53
|
+
<div class="pf-c-toolbar__item">
|
|
94
54
|
<button
|
|
95
|
-
class="pf-c-
|
|
55
|
+
class="pf-c-button pf-m-plain"
|
|
96
56
|
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
|
-
|
|
57
|
+
aria-label="Notifications"
|
|
58
|
+
>
|
|
59
|
+
<span class="pf-c-notification-badge">
|
|
60
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
61
|
+
</span>
|
|
62
|
+
</button>
|
|
63
|
+
</div>
|
|
64
|
+
<div
|
|
65
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
66
|
+
>
|
|
67
|
+
<div class="pf-c-toolbar__item">
|
|
68
|
+
<nav
|
|
69
|
+
class="pf-c-app-launcher"
|
|
70
|
+
aria-label="Application launcher"
|
|
71
|
+
id="drawer-collapsed-example-masthead-icon-group--app-launcher"
|
|
72
|
+
>
|
|
73
|
+
<button
|
|
74
|
+
class="pf-c-app-launcher__toggle"
|
|
75
|
+
type="button"
|
|
76
|
+
id="drawer-collapsed-example-masthead-icon-group--app-launcher-button"
|
|
77
|
+
aria-expanded="false"
|
|
78
|
+
aria-label="Application launcher"
|
|
79
|
+
>
|
|
80
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
81
|
+
</button>
|
|
82
|
+
<div
|
|
83
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
84
|
+
hidden
|
|
85
|
+
>
|
|
86
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
87
|
+
<div class="pf-c-search-input">
|
|
88
|
+
<div class="pf-c-search-input__bar">
|
|
89
|
+
<span class="pf-c-search-input__text">
|
|
90
|
+
<span class="pf-c-search-input__icon">
|
|
91
|
+
<i
|
|
92
|
+
class="fas fa-search fa-fw"
|
|
93
|
+
aria-hidden="true"
|
|
94
|
+
></i>
|
|
95
|
+
</span>
|
|
96
|
+
<input
|
|
97
|
+
class="pf-c-search-input__text-input"
|
|
98
|
+
type="text"
|
|
99
|
+
placeholder="Filter by name"
|
|
100
|
+
aria-label="Filter by name"
|
|
101
|
+
/>
|
|
102
|
+
</span>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<section class="pf-c-app-launcher__group">
|
|
107
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
108
|
+
<ul>
|
|
109
|
+
<li
|
|
110
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
111
|
+
>
|
|
112
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
113
|
+
Link 1
|
|
114
|
+
<span
|
|
115
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
116
|
+
>
|
|
117
|
+
<i
|
|
118
|
+
class="fas fa-external-link-alt"
|
|
119
|
+
aria-hidden="true"
|
|
120
|
+
></i>
|
|
121
|
+
</span>
|
|
122
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
123
|
+
</a>
|
|
124
|
+
<button
|
|
125
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
126
|
+
type="button"
|
|
127
|
+
aria-label="Favorite"
|
|
128
|
+
>
|
|
129
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
130
|
+
</button>
|
|
131
|
+
</li>
|
|
132
|
+
<li
|
|
133
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
134
|
+
>
|
|
135
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
136
|
+
Link 2
|
|
137
|
+
<span
|
|
138
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
139
|
+
>
|
|
140
|
+
<i
|
|
141
|
+
class="fas fa-external-link-alt"
|
|
142
|
+
aria-hidden="true"
|
|
143
|
+
></i>
|
|
144
|
+
</span>
|
|
145
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
146
|
+
</a>
|
|
147
|
+
<button
|
|
148
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
149
|
+
type="button"
|
|
150
|
+
aria-label="Favorite"
|
|
151
|
+
>
|
|
152
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
153
|
+
</button>
|
|
154
|
+
</li>
|
|
155
|
+
</ul>
|
|
156
|
+
</section>
|
|
157
|
+
<hr class="pf-c-divider" />
|
|
158
|
+
<section class="pf-c-app-launcher__group">
|
|
159
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
160
|
+
<ul>
|
|
161
|
+
<li
|
|
162
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
163
|
+
>
|
|
164
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
165
|
+
Link 1
|
|
166
|
+
<span
|
|
167
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
168
|
+
>
|
|
169
|
+
<i
|
|
170
|
+
class="fas fa-external-link-alt"
|
|
171
|
+
aria-hidden="true"
|
|
172
|
+
></i>
|
|
173
|
+
</span>
|
|
174
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
175
|
+
</a>
|
|
176
|
+
<button
|
|
177
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
178
|
+
type="button"
|
|
179
|
+
aria-label="Favorite"
|
|
180
|
+
>
|
|
181
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
182
|
+
</button>
|
|
183
|
+
</li>
|
|
184
|
+
<li
|
|
185
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
186
|
+
>
|
|
187
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
188
|
+
Link 2
|
|
189
|
+
<span
|
|
190
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
191
|
+
>
|
|
192
|
+
<i
|
|
193
|
+
class="fas fa-external-link-alt"
|
|
194
|
+
aria-hidden="true"
|
|
195
|
+
></i>
|
|
196
|
+
</span>
|
|
197
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
198
|
+
</a>
|
|
199
|
+
<button
|
|
200
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
201
|
+
type="button"
|
|
202
|
+
aria-label="Favorite"
|
|
203
|
+
>
|
|
204
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
205
|
+
</button>
|
|
206
|
+
</li>
|
|
207
|
+
</ul>
|
|
208
|
+
</section>
|
|
209
|
+
</div>
|
|
210
|
+
</nav>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="pf-c-toolbar__item">
|
|
213
|
+
<div class="pf-c-dropdown">
|
|
214
|
+
<button
|
|
215
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
216
|
+
id="drawer-collapsed-example-masthead-settings-button"
|
|
217
|
+
aria-expanded="false"
|
|
218
|
+
type="button"
|
|
219
|
+
aria-label="Settings"
|
|
220
|
+
>
|
|
221
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
222
|
+
</button>
|
|
223
|
+
<ul
|
|
224
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
225
|
+
aria-labelledby="drawer-collapsed-example-masthead-settings-button"
|
|
226
|
+
hidden
|
|
227
|
+
>
|
|
228
|
+
<li>
|
|
229
|
+
<button
|
|
230
|
+
class="pf-c-dropdown__menu-item"
|
|
231
|
+
type="button"
|
|
232
|
+
>Settings</button>
|
|
233
|
+
</li>
|
|
234
|
+
<li>
|
|
235
|
+
<button
|
|
236
|
+
class="pf-c-dropdown__menu-item"
|
|
237
|
+
type="button"
|
|
238
|
+
>Use the beta release</button>
|
|
239
|
+
</li>
|
|
240
|
+
</ul>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
<div class="pf-c-toolbar__item">
|
|
244
|
+
<div class="pf-c-dropdown">
|
|
245
|
+
<button
|
|
246
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
247
|
+
id="drawer-collapsed-example-masthead-help-button"
|
|
248
|
+
aria-expanded="false"
|
|
249
|
+
type="button"
|
|
250
|
+
aria-label="Help"
|
|
251
|
+
>
|
|
252
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
253
|
+
</button>
|
|
254
|
+
<ul
|
|
255
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
256
|
+
aria-labelledby="drawer-collapsed-example-masthead-help-button"
|
|
257
|
+
hidden
|
|
258
|
+
>
|
|
259
|
+
<li>
|
|
260
|
+
<button
|
|
261
|
+
class="pf-c-dropdown__menu-item"
|
|
262
|
+
type="button"
|
|
263
|
+
>Support options</button>
|
|
264
|
+
</li>
|
|
265
|
+
<li>
|
|
266
|
+
<button
|
|
267
|
+
class="pf-c-dropdown__menu-item"
|
|
268
|
+
type="button"
|
|
269
|
+
>Open support case</button>
|
|
270
|
+
</li>
|
|
271
|
+
<li>
|
|
272
|
+
<button
|
|
273
|
+
class="pf-c-dropdown__menu-item"
|
|
274
|
+
type="button"
|
|
275
|
+
>API documentation</button>
|
|
276
|
+
</li>
|
|
277
|
+
</ul>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
282
|
+
<div class="pf-c-dropdown">
|
|
283
|
+
<button
|
|
284
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
285
|
+
type="button"
|
|
286
|
+
aria-expanded="false"
|
|
287
|
+
aria-label="Actions"
|
|
288
|
+
>
|
|
289
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
290
|
+
</button>
|
|
291
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
292
|
+
<div class="pf-c-menu__content">
|
|
293
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
294
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
295
|
+
<li
|
|
296
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
297
|
+
role="none"
|
|
298
|
+
>
|
|
299
|
+
<button
|
|
300
|
+
class="pf-c-menu__item"
|
|
301
|
+
type="button"
|
|
302
|
+
disabled
|
|
303
|
+
role="menuitem"
|
|
304
|
+
>
|
|
305
|
+
<span class="pf-c-menu__item-description">
|
|
306
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
307
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
308
|
+
</span>
|
|
309
|
+
</button>
|
|
310
|
+
</li>
|
|
311
|
+
<li
|
|
312
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
313
|
+
role="none"
|
|
314
|
+
>
|
|
315
|
+
<button
|
|
316
|
+
class="pf-c-menu__item"
|
|
317
|
+
type="button"
|
|
318
|
+
disabled
|
|
319
|
+
role="menuitem"
|
|
320
|
+
>
|
|
321
|
+
<span class="pf-c-menu__item-description">
|
|
322
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
323
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
324
|
+
</span>
|
|
325
|
+
</button>
|
|
326
|
+
</li>
|
|
327
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
328
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
329
|
+
<button
|
|
330
|
+
class="pf-c-menu__item"
|
|
331
|
+
type="button"
|
|
332
|
+
role="menuitem"
|
|
333
|
+
>
|
|
334
|
+
<span class="pf-c-menu__item-main">
|
|
335
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
336
|
+
</span>
|
|
337
|
+
</button>
|
|
338
|
+
</li>
|
|
339
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
340
|
+
<button
|
|
341
|
+
class="pf-c-menu__item"
|
|
342
|
+
type="button"
|
|
343
|
+
role="menuitem"
|
|
344
|
+
>
|
|
345
|
+
<span class="pf-c-menu__item-main">
|
|
346
|
+
<span
|
|
347
|
+
class="pf-c-menu__item-text"
|
|
348
|
+
>User management</span>
|
|
349
|
+
</span>
|
|
350
|
+
</button>
|
|
351
|
+
</li>
|
|
352
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
353
|
+
<button
|
|
354
|
+
class="pf-c-menu__item"
|
|
355
|
+
type="button"
|
|
356
|
+
role="menuitem"
|
|
357
|
+
>
|
|
358
|
+
<span class="pf-c-menu__item-main">
|
|
359
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
360
|
+
</span>
|
|
361
|
+
</button>
|
|
362
|
+
</li>
|
|
363
|
+
</ul>
|
|
364
|
+
</section>
|
|
365
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
366
|
+
<section class="pf-c-menu__group">
|
|
367
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
368
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
369
|
+
<button
|
|
370
|
+
class="pf-c-menu__item"
|
|
371
|
+
type="button"
|
|
372
|
+
role="menuitem"
|
|
373
|
+
aria-expanded="false"
|
|
374
|
+
>
|
|
375
|
+
<span class="pf-c-menu__item-main">
|
|
376
|
+
<span class="pf-c-menu__item-icon">
|
|
377
|
+
<i
|
|
378
|
+
class="fas fa-fw fa-cog"
|
|
379
|
+
aria-hidden="true"
|
|
380
|
+
></i>
|
|
381
|
+
</span>
|
|
382
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
383
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
384
|
+
<i class="fas fa-angle-right"></i>
|
|
385
|
+
</span>
|
|
386
|
+
</span>
|
|
387
|
+
</button>
|
|
388
|
+
<div class="pf-c-menu" hidden>
|
|
389
|
+
<div class="pf-c-menu__content">
|
|
390
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
391
|
+
<li
|
|
392
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
393
|
+
role="none"
|
|
394
|
+
>
|
|
395
|
+
<button
|
|
396
|
+
class="pf-c-menu__item"
|
|
397
|
+
type="button"
|
|
398
|
+
role="menuitem"
|
|
399
|
+
>
|
|
400
|
+
<span class="pf-c-menu__item-main">
|
|
401
|
+
<span
|
|
402
|
+
class="pf-c-menu__item-toggle-icon"
|
|
403
|
+
>
|
|
404
|
+
<i class="fas fa-angle-left"></i>
|
|
405
|
+
</span>
|
|
406
|
+
<span class="pf-c-menu__item-icon">
|
|
407
|
+
<i
|
|
408
|
+
class="fas fa-fw fa-cog"
|
|
409
|
+
aria-hidden="true"
|
|
410
|
+
></i>
|
|
411
|
+
</span>
|
|
412
|
+
<span
|
|
413
|
+
class="pf-c-menu__item-text"
|
|
414
|
+
>Settings</span>
|
|
415
|
+
</span>
|
|
416
|
+
</button>
|
|
417
|
+
</li>
|
|
418
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
419
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
420
|
+
<a
|
|
421
|
+
class="pf-c-menu__item"
|
|
422
|
+
href="#"
|
|
423
|
+
role="menuitem"
|
|
424
|
+
>
|
|
425
|
+
<span class="pf-c-menu__item-main">
|
|
426
|
+
<span
|
|
427
|
+
class="pf-c-menu__item-text"
|
|
428
|
+
>Customer support</span>
|
|
429
|
+
</span>
|
|
430
|
+
</a>
|
|
431
|
+
</li>
|
|
432
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
433
|
+
<a
|
|
434
|
+
class="pf-c-menu__item"
|
|
435
|
+
href="#"
|
|
436
|
+
role="menuitem"
|
|
437
|
+
>
|
|
438
|
+
<span class="pf-c-menu__item-main">
|
|
439
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
440
|
+
</span>
|
|
441
|
+
</a>
|
|
442
|
+
</li>
|
|
443
|
+
</ul>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</li>
|
|
447
|
+
|
|
448
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
449
|
+
<button
|
|
450
|
+
class="pf-c-menu__item"
|
|
451
|
+
type="button"
|
|
452
|
+
role="menuitem"
|
|
453
|
+
aria-expanded="false"
|
|
454
|
+
>
|
|
455
|
+
<span class="pf-c-menu__item-main">
|
|
456
|
+
<span class="pf-c-menu__item-icon">
|
|
457
|
+
<i
|
|
458
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
459
|
+
aria-hidden="true"
|
|
460
|
+
></i>
|
|
461
|
+
</span>
|
|
462
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
463
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
464
|
+
<i class="fas fa-angle-right"></i>
|
|
465
|
+
</span>
|
|
466
|
+
</span>
|
|
467
|
+
</button>
|
|
468
|
+
<div class="pf-c-menu" hidden>
|
|
469
|
+
<div class="pf-c-menu__content">
|
|
470
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
471
|
+
<li
|
|
472
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
473
|
+
role="none"
|
|
474
|
+
>
|
|
475
|
+
<button
|
|
476
|
+
class="pf-c-menu__item"
|
|
477
|
+
type="button"
|
|
478
|
+
role="menuitem"
|
|
479
|
+
>
|
|
480
|
+
<span class="pf-c-menu__item-main">
|
|
481
|
+
<span
|
|
482
|
+
class="pf-c-menu__item-toggle-icon"
|
|
483
|
+
>
|
|
484
|
+
<i class="fas fa-angle-left"></i>
|
|
485
|
+
</span>
|
|
486
|
+
<span class="pf-c-menu__item-icon">
|
|
487
|
+
<i
|
|
488
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
489
|
+
aria-hidden="true"
|
|
490
|
+
></i>
|
|
491
|
+
</span>
|
|
492
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
493
|
+
</span>
|
|
494
|
+
</button>
|
|
495
|
+
</li>
|
|
496
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
497
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
498
|
+
<a
|
|
499
|
+
class="pf-c-menu__item"
|
|
500
|
+
href="#"
|
|
501
|
+
role="menuitem"
|
|
502
|
+
>
|
|
503
|
+
<span class="pf-c-menu__item-main">
|
|
504
|
+
<span
|
|
505
|
+
class="pf-c-menu__item-text"
|
|
506
|
+
>Support options</span>
|
|
507
|
+
</span>
|
|
508
|
+
</a>
|
|
509
|
+
</li>
|
|
510
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
511
|
+
<a
|
|
512
|
+
class="pf-c-menu__item"
|
|
513
|
+
href="#"
|
|
514
|
+
role="menuitem"
|
|
515
|
+
>
|
|
516
|
+
<span class="pf-c-menu__item-main">
|
|
517
|
+
<span
|
|
518
|
+
class="pf-c-menu__item-text"
|
|
519
|
+
>Open support case</span>
|
|
520
|
+
</span>
|
|
521
|
+
</a>
|
|
522
|
+
</li>
|
|
523
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
524
|
+
<a
|
|
525
|
+
class="pf-c-menu__item"
|
|
526
|
+
href="#"
|
|
527
|
+
role="menuitem"
|
|
528
|
+
>
|
|
529
|
+
<span class="pf-c-menu__item-main">
|
|
530
|
+
<span
|
|
531
|
+
class="pf-c-menu__item-text"
|
|
532
|
+
>API documentation</span>
|
|
533
|
+
</span>
|
|
534
|
+
</a>
|
|
535
|
+
</li>
|
|
536
|
+
</ul>
|
|
537
|
+
</div>
|
|
538
|
+
</div>
|
|
539
|
+
</li>
|
|
540
|
+
|
|
541
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
542
|
+
<button
|
|
543
|
+
class="pf-c-menu__item"
|
|
544
|
+
type="button"
|
|
545
|
+
role="menuitem"
|
|
546
|
+
>
|
|
547
|
+
<span class="pf-c-menu__item-main">
|
|
548
|
+
<span class="pf-c-menu__item-icon">
|
|
549
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
550
|
+
</span>
|
|
551
|
+
<span
|
|
552
|
+
class="pf-c-menu__item-text"
|
|
553
|
+
>Application launcher</span>
|
|
554
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
555
|
+
<i class="fas fa-angle-right"></i>
|
|
556
|
+
</span>
|
|
557
|
+
</span>
|
|
558
|
+
</button>
|
|
559
|
+
<div class="pf-c-menu" hidden>
|
|
560
|
+
<div class="pf-c-menu__header">
|
|
561
|
+
<button
|
|
562
|
+
class="pf-c-menu__item"
|
|
563
|
+
type="button"
|
|
564
|
+
role="menuitem"
|
|
565
|
+
>
|
|
566
|
+
<span class="pf-c-menu__item-main">
|
|
567
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
568
|
+
<i class="fas fa-angle-left"></i>
|
|
569
|
+
</span>
|
|
570
|
+
<span class="pf-c-menu__item-icon">
|
|
571
|
+
<i
|
|
572
|
+
class="fas fa-fw fa-th"
|
|
573
|
+
aria-hidden="true"
|
|
574
|
+
></i>
|
|
575
|
+
</span>
|
|
576
|
+
<span
|
|
577
|
+
class="pf-c-menu__item-text"
|
|
578
|
+
>Application launcher</span>
|
|
579
|
+
</span>
|
|
580
|
+
</button>
|
|
581
|
+
</div>
|
|
582
|
+
<div class="pf-c-menu__search">
|
|
583
|
+
<div class="pf-c-menu__search-input">
|
|
584
|
+
<div class="pf-c-search-input">
|
|
585
|
+
<div class="pf-c-search-input__bar">
|
|
586
|
+
<span class="pf-c-search-input__text">
|
|
587
|
+
<span class="pf-c-search-input__icon">
|
|
588
|
+
<i
|
|
589
|
+
class="fas fa-search fa-fw"
|
|
590
|
+
aria-hidden="true"
|
|
591
|
+
></i>
|
|
592
|
+
</span>
|
|
593
|
+
<input
|
|
594
|
+
class="pf-c-search-input__text-input"
|
|
595
|
+
type="text"
|
|
596
|
+
placeholder="Search"
|
|
597
|
+
aria-label="Search"
|
|
598
|
+
/>
|
|
599
|
+
</span>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
<hr class="pf-c-divider" />
|
|
605
|
+
<section class="pf-c-menu__group">
|
|
606
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
607
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
608
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
609
|
+
<a
|
|
610
|
+
class="pf-c-menu__item"
|
|
611
|
+
href="#"
|
|
612
|
+
role="menuitem"
|
|
613
|
+
>
|
|
614
|
+
<span class="pf-c-menu__item-main">
|
|
615
|
+
<span
|
|
616
|
+
class="pf-c-menu__item-text"
|
|
617
|
+
>Link 1</span>
|
|
618
|
+
</span>
|
|
619
|
+
</a>
|
|
620
|
+
<button
|
|
621
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
622
|
+
type="button"
|
|
623
|
+
aria-label="Starred"
|
|
624
|
+
>
|
|
625
|
+
<span class="pf-c-menu__item-action-icon">
|
|
626
|
+
<i
|
|
627
|
+
class="fas fa-star"
|
|
628
|
+
aria-hidden="true"
|
|
629
|
+
></i>
|
|
630
|
+
</span>
|
|
631
|
+
</button>
|
|
632
|
+
</li>
|
|
633
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
634
|
+
<a
|
|
635
|
+
class="pf-c-menu__item"
|
|
636
|
+
href="#"
|
|
637
|
+
role="menuitem"
|
|
638
|
+
target="_blank"
|
|
639
|
+
>
|
|
640
|
+
<span class="pf-c-menu__item-main">
|
|
641
|
+
<span
|
|
642
|
+
class="pf-c-menu__item-text"
|
|
643
|
+
>Link 2</span>
|
|
644
|
+
<span
|
|
645
|
+
class="pf-c-menu__item-external-icon"
|
|
646
|
+
>
|
|
647
|
+
<i
|
|
648
|
+
class="fas fa-external-link-alt"
|
|
649
|
+
aria-hidden="true"
|
|
650
|
+
></i>
|
|
651
|
+
</span>
|
|
652
|
+
<span
|
|
653
|
+
class="pf-screen-reader"
|
|
654
|
+
>(opens new window)</span>
|
|
655
|
+
</span>
|
|
656
|
+
</a>
|
|
657
|
+
<button
|
|
658
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
659
|
+
type="button"
|
|
660
|
+
aria-label="Not starred"
|
|
661
|
+
>
|
|
662
|
+
<span class="pf-c-menu__item-action-icon">
|
|
663
|
+
<i
|
|
664
|
+
class="fas fa-star"
|
|
665
|
+
aria-hidden="true"
|
|
666
|
+
></i>
|
|
667
|
+
</span>
|
|
668
|
+
</button>
|
|
669
|
+
</li>
|
|
670
|
+
</ul>
|
|
671
|
+
</section>
|
|
672
|
+
<hr class="pf-c-divider" />
|
|
673
|
+
<section class="pf-c-menu__group">
|
|
674
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
675
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
676
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
677
|
+
<a
|
|
678
|
+
class="pf-c-menu__item"
|
|
679
|
+
href="#"
|
|
680
|
+
role="menuitem"
|
|
681
|
+
>
|
|
682
|
+
<span class="pf-c-menu__item-main">
|
|
683
|
+
<span
|
|
684
|
+
class="pf-c-menu__item-text"
|
|
685
|
+
>Link 1</span>
|
|
686
|
+
</span>
|
|
687
|
+
</a>
|
|
688
|
+
<button
|
|
689
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
690
|
+
type="button"
|
|
691
|
+
aria-label="Not starred"
|
|
692
|
+
>
|
|
693
|
+
<span class="pf-c-menu__item-action-icon">
|
|
694
|
+
<i
|
|
695
|
+
class="fas fa-star"
|
|
696
|
+
aria-hidden="true"
|
|
697
|
+
></i>
|
|
698
|
+
</span>
|
|
699
|
+
</button>
|
|
700
|
+
</li>
|
|
701
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
702
|
+
<a
|
|
703
|
+
class="pf-c-menu__item"
|
|
704
|
+
href="#"
|
|
705
|
+
role="menuitem"
|
|
706
|
+
target="_blank"
|
|
707
|
+
>
|
|
708
|
+
<span class="pf-c-menu__item-main">
|
|
709
|
+
<span
|
|
710
|
+
class="pf-c-menu__item-text"
|
|
711
|
+
>Link 2</span>
|
|
712
|
+
<span
|
|
713
|
+
class="pf-c-menu__item-external-icon"
|
|
714
|
+
>
|
|
715
|
+
<i
|
|
716
|
+
class="fas fa-external-link-alt"
|
|
717
|
+
aria-hidden="true"
|
|
718
|
+
></i>
|
|
719
|
+
</span>
|
|
720
|
+
<span
|
|
721
|
+
class="pf-screen-reader"
|
|
722
|
+
>(opens new window)</span>
|
|
723
|
+
</span>
|
|
724
|
+
</a>
|
|
725
|
+
<button
|
|
726
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
727
|
+
type="button"
|
|
728
|
+
aria-label="Starred"
|
|
729
|
+
>
|
|
730
|
+
<span class="pf-c-menu__item-action-icon">
|
|
731
|
+
<i
|
|
732
|
+
class="fas fa-star"
|
|
733
|
+
aria-hidden="true"
|
|
734
|
+
></i>
|
|
735
|
+
</span>
|
|
736
|
+
</button>
|
|
737
|
+
</li>
|
|
738
|
+
</ul>
|
|
739
|
+
</section>
|
|
740
|
+
</div>
|
|
741
|
+
</li>
|
|
742
|
+
</ul>
|
|
743
|
+
</section>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
750
|
+
<div
|
|
751
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
752
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
753
|
+
>
|
|
142
754
|
<button
|
|
143
|
-
class="pf-c-
|
|
755
|
+
class="pf-c-dropdown__toggle"
|
|
756
|
+
id="drawer-collapsed-example-masthead-profile-button"
|
|
757
|
+
aria-expanded="false"
|
|
144
758
|
type="button"
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
759
|
+
>
|
|
760
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
761
|
+
<img
|
|
762
|
+
class="pf-c-avatar"
|
|
763
|
+
src="/assets/images/img_avatar.svg"
|
|
764
|
+
alt="Avatar image"
|
|
765
|
+
/>
|
|
766
|
+
</span>
|
|
767
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
768
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
769
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
770
|
+
</span>
|
|
771
|
+
</button>
|
|
772
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
773
|
+
<section class="pf-c-dropdown__group">
|
|
774
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
775
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
776
|
+
<div>123456789</div>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
779
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
780
|
+
<div>mshaksho@redhat.com</div>
|
|
781
|
+
</div>
|
|
782
|
+
</section>
|
|
783
|
+
<hr class="pf-c-divider" />
|
|
784
|
+
<section class="pf-c-dropdown__group">
|
|
785
|
+
<ul>
|
|
786
|
+
<li>
|
|
787
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
788
|
+
</li>
|
|
789
|
+
<li>
|
|
790
|
+
<a
|
|
791
|
+
class="pf-c-dropdown__menu-item"
|
|
792
|
+
href="#"
|
|
793
|
+
>User management</a>
|
|
794
|
+
</li>
|
|
795
|
+
<li>
|
|
796
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
797
|
+
</li>
|
|
798
|
+
</ul>
|
|
799
|
+
</section>
|
|
800
|
+
</div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
153
803
|
</div>
|
|
154
804
|
</div>
|
|
155
805
|
</div>
|
|
156
|
-
<img
|
|
157
|
-
class="pf-c-avatar"
|
|
158
|
-
src="/assets/images/img_avatar.svg"
|
|
159
|
-
alt="Avatar image"
|
|
160
|
-
/>
|
|
161
806
|
</div>
|
|
162
807
|
</header>
|
|
163
808
|
<div class="pf-c-page__sidebar">
|
|
164
809
|
<div class="pf-c-page__sidebar-body">
|
|
165
810
|
<nav
|
|
166
811
|
class="pf-c-nav"
|
|
167
|
-
id="drawer-collapsed-primary-nav"
|
|
812
|
+
id="drawer-collapsed-example-primary-nav"
|
|
168
813
|
aria-label="Global"
|
|
169
814
|
>
|
|
170
815
|
<ul class="pf-c-nav__list">
|
|
816
|
+
<li class="pf-c-nav__item">
|
|
817
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
818
|
+
</li>
|
|
171
819
|
<li class="pf-c-nav__item">
|
|
172
820
|
<a
|
|
173
821
|
href="#"
|
|
174
822
|
class="pf-c-nav__link pf-m-current"
|
|
175
823
|
aria-current="page"
|
|
176
|
-
>
|
|
177
|
-
</li>
|
|
178
|
-
<li class="pf-c-nav__item">
|
|
179
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
824
|
+
>Policy</a>
|
|
180
825
|
</li>
|
|
181
826
|
<li class="pf-c-nav__item">
|
|
182
827
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -196,7 +841,11 @@ wrapperTag: div
|
|
|
196
841
|
<div class="pf-c-drawer__main">
|
|
197
842
|
<div class="pf-c-drawer__content">
|
|
198
843
|
<div class="pf-c-drawer__body">
|
|
199
|
-
<main
|
|
844
|
+
<main
|
|
845
|
+
class="pf-c-page__main"
|
|
846
|
+
tabindex="-1"
|
|
847
|
+
id="main-content-drawer-collapsed-example"
|
|
848
|
+
>
|
|
200
849
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
201
850
|
<div class="pf-c-page__main-body">
|
|
202
851
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -282,9 +931,181 @@ wrapperTag: div
|
|
|
282
931
|
</main>
|
|
283
932
|
</div>
|
|
284
933
|
</div>
|
|
285
|
-
<div class="pf-c-drawer__panel pf-m-width-33" hidden>
|
|
934
|
+
<div class="pf-c-drawer__panel pf-m-width-33-on-lg" hidden>
|
|
286
935
|
<div class="pf-c-drawer__body">
|
|
287
|
-
<
|
|
936
|
+
<div class="pf-c-drawer__head">
|
|
937
|
+
<div class="pf-c-drawer__actions">
|
|
938
|
+
<div class="pf-c-dropdown">
|
|
939
|
+
<button
|
|
940
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
941
|
+
id="-button"
|
|
942
|
+
aria-expanded="false"
|
|
943
|
+
type="button"
|
|
944
|
+
aria-label="Actions"
|
|
945
|
+
>
|
|
946
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
947
|
+
</button>
|
|
948
|
+
<ul
|
|
949
|
+
class="pf-c-dropdown__menu"
|
|
950
|
+
aria-labelledby="-button"
|
|
951
|
+
hidden
|
|
952
|
+
>
|
|
953
|
+
<li>
|
|
954
|
+
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
955
|
+
</li>
|
|
956
|
+
<li>
|
|
957
|
+
<button
|
|
958
|
+
class="pf-c-dropdown__menu-item"
|
|
959
|
+
type="button"
|
|
960
|
+
>Action</button>
|
|
961
|
+
</li>
|
|
962
|
+
<li>
|
|
963
|
+
<a
|
|
964
|
+
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
965
|
+
href="#"
|
|
966
|
+
aria-disabled="true"
|
|
967
|
+
tabindex="-1"
|
|
968
|
+
>Disabled link</a>
|
|
969
|
+
</li>
|
|
970
|
+
<li>
|
|
971
|
+
<button
|
|
972
|
+
class="pf-c-dropdown__menu-item"
|
|
973
|
+
type="button"
|
|
974
|
+
disabled
|
|
975
|
+
>Disabled action</button>
|
|
976
|
+
</li>
|
|
977
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
978
|
+
<li>
|
|
979
|
+
<a
|
|
980
|
+
class="pf-c-dropdown__menu-item"
|
|
981
|
+
href="#"
|
|
982
|
+
>Separated link</a>
|
|
983
|
+
</li>
|
|
984
|
+
</ul>
|
|
985
|
+
</div>
|
|
986
|
+
<div class="pf-c-drawer__close">
|
|
987
|
+
<button
|
|
988
|
+
class="pf-c-button pf-m-plain"
|
|
989
|
+
type="button"
|
|
990
|
+
aria-label="Close drawer panel"
|
|
991
|
+
>
|
|
992
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
993
|
+
</button>
|
|
994
|
+
</div>
|
|
995
|
+
</div>
|
|
996
|
+
<div class="pf-l-flex pf-m-space-items-sm">
|
|
997
|
+
<div class="pf-l-flex__item">
|
|
998
|
+
<span class="pf-c-label pf-m-blue pf-m-compact">
|
|
999
|
+
<span class="pf-c-label__content">DC</span>
|
|
1000
|
+
</span>
|
|
1001
|
+
</div>
|
|
1002
|
+
<div class="pf-l-flex__item">
|
|
1003
|
+
<h2
|
|
1004
|
+
class="pf-c-title pf-m-xl"
|
|
1005
|
+
id="drawer-collapsed-example-drawer-label"
|
|
1006
|
+
>mary-test</h2>
|
|
1007
|
+
</div>
|
|
1008
|
+
</div>
|
|
1009
|
+
</div>
|
|
1010
|
+
</div>
|
|
1011
|
+
<div class="pf-c-drawer__body pf-m-no-padding">
|
|
1012
|
+
<div class="pf-c-tabs pf-m-box pf-m-fill">
|
|
1013
|
+
<ul class="pf-c-tabs__list">
|
|
1014
|
+
<li class="pf-c-tabs__item pf-m-current">
|
|
1015
|
+
<button
|
|
1016
|
+
class="pf-c-tabs__link"
|
|
1017
|
+
id="drawer-collapsed-example-panel-tabs-tab1-link"
|
|
1018
|
+
>
|
|
1019
|
+
<span class="pf-c-tabs__item-text">Overview</span>
|
|
1020
|
+
</button>
|
|
1021
|
+
</li>
|
|
1022
|
+
<li class="pf-c-tabs__item">
|
|
1023
|
+
<button
|
|
1024
|
+
class="pf-c-tabs__link"
|
|
1025
|
+
id="drawer-collapsed-example-panel-tabs-tab2-link"
|
|
1026
|
+
>
|
|
1027
|
+
<span class="pf-c-tabs__item-text">Activity</span>
|
|
1028
|
+
</button>
|
|
1029
|
+
</li>
|
|
1030
|
+
</ul>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
<div class="pf-c-drawer__body">
|
|
1034
|
+
<section
|
|
1035
|
+
class="pf-c-tab-content"
|
|
1036
|
+
id="drawer-collapsed-example-panel-tabs-tab1-panel"
|
|
1037
|
+
aria-labelledby="drawer-collapsed-example-panel-tabs-tab1-link"
|
|
1038
|
+
role="tabpanel"
|
|
1039
|
+
tabindex="0"
|
|
1040
|
+
>
|
|
1041
|
+
<div class="pf-c-tab-content__body">
|
|
1042
|
+
<div class="pf-l-flex pf-m-column pf-m-space-items-lg">
|
|
1043
|
+
<div class="pf-l-flex__item">
|
|
1044
|
+
<p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p>
|
|
1045
|
+
</div>
|
|
1046
|
+
<div class="pf-l-flex__item">
|
|
1047
|
+
<div class="pf-c-progress" id="-progress-example1">
|
|
1048
|
+
<div
|
|
1049
|
+
class="pf-c-progress__description"
|
|
1050
|
+
id="-progress-example1-description"
|
|
1051
|
+
>Capacity</div>
|
|
1052
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
1053
|
+
<span class="pf-c-progress__measure">33%</span>
|
|
1054
|
+
</div>
|
|
1055
|
+
<div
|
|
1056
|
+
class="pf-c-progress__bar"
|
|
1057
|
+
role="progressbar"
|
|
1058
|
+
aria-valuemin="0"
|
|
1059
|
+
aria-valuemax="100"
|
|
1060
|
+
aria-valuenow="33"
|
|
1061
|
+
aria-labelledby="-progress-example1-description"
|
|
1062
|
+
aria-label="Progress 1"
|
|
1063
|
+
>
|
|
1064
|
+
<div
|
|
1065
|
+
class="pf-c-progress__indicator"
|
|
1066
|
+
style="width:33%;"
|
|
1067
|
+
></div>
|
|
1068
|
+
</div>
|
|
1069
|
+
</div>
|
|
1070
|
+
</div>
|
|
1071
|
+
<div class="pf-l-flex__item">
|
|
1072
|
+
<div class="pf-c-progress" id="-progress-example2">
|
|
1073
|
+
<div
|
|
1074
|
+
class="pf-c-progress__description"
|
|
1075
|
+
id="-progress-example2-description"
|
|
1076
|
+
>Modules</div>
|
|
1077
|
+
<div class="pf-c-progress__status" aria-hidden="true">
|
|
1078
|
+
<span class="pf-c-progress__measure">66%</span>
|
|
1079
|
+
</div>
|
|
1080
|
+
<div
|
|
1081
|
+
class="pf-c-progress__bar"
|
|
1082
|
+
role="progressbar"
|
|
1083
|
+
aria-valuemin="0"
|
|
1084
|
+
aria-valuemax="100"
|
|
1085
|
+
aria-valuenow="66"
|
|
1086
|
+
aria-labelledby="-progress-example2-description"
|
|
1087
|
+
aria-label="Progress 2"
|
|
1088
|
+
>
|
|
1089
|
+
<div
|
|
1090
|
+
class="pf-c-progress__indicator"
|
|
1091
|
+
style="width:66%;"
|
|
1092
|
+
></div>
|
|
1093
|
+
</div>
|
|
1094
|
+
</div>
|
|
1095
|
+
</div>
|
|
1096
|
+
</div>
|
|
1097
|
+
</div>
|
|
1098
|
+
</section>
|
|
1099
|
+
<section
|
|
1100
|
+
class="pf-c-tab-content"
|
|
1101
|
+
id="drawer-collapsed-example-panel-tabs-tab2-panel"
|
|
1102
|
+
aria-labelledby="drawer-collapsed-example-panel-tabs-tab2-link"
|
|
1103
|
+
role="tabpanel"
|
|
1104
|
+
tabindex="0"
|
|
1105
|
+
hidden
|
|
1106
|
+
>
|
|
1107
|
+
<div class="pf-c-tab-content__body">Panel 2</div>
|
|
1108
|
+
</section>
|
|
288
1109
|
</div>
|
|
289
1110
|
</div>
|
|
290
1111
|
</div>
|
|
@@ -297,176 +1118,821 @@ wrapperTag: div
|
|
|
297
1118
|
### Expanded
|
|
298
1119
|
|
|
299
1120
|
```html isFullscreen
|
|
300
|
-
<div class="pf-c-page" id="drawer-expanded">
|
|
1121
|
+
<div class="pf-c-page" id="drawer-expanded-example">
|
|
301
1122
|
<a
|
|
302
1123
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
303
|
-
href="#main-content-drawer-expanded"
|
|
1124
|
+
href="#main-content-drawer-expanded-example"
|
|
304
1125
|
>Skip to content</a>
|
|
305
|
-
<header class="pf-c-
|
|
306
|
-
<
|
|
307
|
-
<
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
1126
|
+
<header class="pf-c-masthead" id="drawer-expanded-example-masthead">
|
|
1127
|
+
<span class="pf-c-masthead__toggle">
|
|
1128
|
+
<button
|
|
1129
|
+
class="pf-c-button pf-m-plain"
|
|
1130
|
+
type="button"
|
|
1131
|
+
aria-label="Global navigation"
|
|
1132
|
+
>
|
|
1133
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1134
|
+
</button>
|
|
1135
|
+
</span>
|
|
1136
|
+
<div class="pf-c-masthead__main">
|
|
1137
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1138
|
+
<picture
|
|
1139
|
+
class="pf-c-brand pf-m-picture"
|
|
1140
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
315
1141
|
>
|
|
316
|
-
<
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
1142
|
+
<source
|
|
1143
|
+
media="(min-width: 768px)"
|
|
1144
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1145
|
+
/>
|
|
1146
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1147
|
+
<img
|
|
1148
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1149
|
+
alt="Fallback patternFly default logo"
|
|
1150
|
+
/>
|
|
1151
|
+
</picture>
|
|
325
1152
|
</a>
|
|
326
1153
|
</div>
|
|
327
|
-
<div class="pf-c-
|
|
328
|
-
<div
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
>
|
|
337
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
338
|
-
</button>
|
|
339
|
-
</div>
|
|
340
|
-
<div
|
|
341
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
342
|
-
>
|
|
343
|
-
<button
|
|
344
|
-
class="pf-c-button pf-m-plain"
|
|
345
|
-
type="button"
|
|
346
|
-
aria-label="Help"
|
|
347
|
-
>
|
|
348
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
349
|
-
</button>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
<div class="pf-c-page__header-tools-group">
|
|
353
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
354
|
-
<div class="pf-c-dropdown">
|
|
355
|
-
<button
|
|
356
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
357
|
-
id="drawer-expanded-dropdown-kebab-1-button"
|
|
358
|
-
aria-expanded="false"
|
|
359
|
-
type="button"
|
|
360
|
-
aria-label="Actions"
|
|
361
|
-
>
|
|
362
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
363
|
-
</button>
|
|
364
|
-
<ul
|
|
365
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
366
|
-
aria-labelledby="drawer-expanded-dropdown-kebab-1-button"
|
|
367
|
-
hidden
|
|
1154
|
+
<div class="pf-c-masthead__content">
|
|
1155
|
+
<div
|
|
1156
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1157
|
+
id="drawer-expanded-example-masthead-toolbar"
|
|
1158
|
+
>
|
|
1159
|
+
<div class="pf-c-toolbar__content">
|
|
1160
|
+
<div class="pf-c-toolbar__content-section">
|
|
1161
|
+
<div
|
|
1162
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
368
1163
|
>
|
|
369
|
-
<
|
|
370
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
371
|
-
</li>
|
|
372
|
-
<li>
|
|
373
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
374
|
-
</li>
|
|
375
|
-
<li>
|
|
376
|
-
<a
|
|
377
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
378
|
-
href="#"
|
|
379
|
-
aria-disabled="true"
|
|
380
|
-
tabindex="-1"
|
|
381
|
-
>Disabled link</a>
|
|
382
|
-
</li>
|
|
383
|
-
<li>
|
|
1164
|
+
<div class="pf-c-toolbar__item">
|
|
384
1165
|
<button
|
|
385
|
-
class="pf-c-
|
|
1166
|
+
class="pf-c-button pf-m-plain"
|
|
386
1167
|
type="button"
|
|
387
|
-
|
|
388
|
-
>
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
</
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
1168
|
+
aria-label="Notifications"
|
|
1169
|
+
>
|
|
1170
|
+
<span class="pf-c-notification-badge">
|
|
1171
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1172
|
+
</span>
|
|
1173
|
+
</button>
|
|
1174
|
+
</div>
|
|
1175
|
+
<div
|
|
1176
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1177
|
+
>
|
|
1178
|
+
<div class="pf-c-toolbar__item">
|
|
1179
|
+
<nav
|
|
1180
|
+
class="pf-c-app-launcher"
|
|
1181
|
+
aria-label="Application launcher"
|
|
1182
|
+
id="drawer-expanded-example-masthead-icon-group--app-launcher"
|
|
1183
|
+
>
|
|
1184
|
+
<button
|
|
1185
|
+
class="pf-c-app-launcher__toggle"
|
|
1186
|
+
type="button"
|
|
1187
|
+
id="drawer-expanded-example-masthead-icon-group--app-launcher-button"
|
|
1188
|
+
aria-expanded="false"
|
|
1189
|
+
aria-label="Application launcher"
|
|
1190
|
+
>
|
|
1191
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1192
|
+
</button>
|
|
1193
|
+
<div
|
|
1194
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1195
|
+
hidden
|
|
1196
|
+
>
|
|
1197
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1198
|
+
<div class="pf-c-search-input">
|
|
1199
|
+
<div class="pf-c-search-input__bar">
|
|
1200
|
+
<span class="pf-c-search-input__text">
|
|
1201
|
+
<span class="pf-c-search-input__icon">
|
|
1202
|
+
<i
|
|
1203
|
+
class="fas fa-search fa-fw"
|
|
1204
|
+
aria-hidden="true"
|
|
1205
|
+
></i>
|
|
1206
|
+
</span>
|
|
1207
|
+
<input
|
|
1208
|
+
class="pf-c-search-input__text-input"
|
|
1209
|
+
type="text"
|
|
1210
|
+
placeholder="Filter by name"
|
|
1211
|
+
aria-label="Filter by name"
|
|
1212
|
+
/>
|
|
1213
|
+
</span>
|
|
1214
|
+
</div>
|
|
1215
|
+
</div>
|
|
1216
|
+
</div>
|
|
1217
|
+
<section class="pf-c-app-launcher__group">
|
|
1218
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1219
|
+
<ul>
|
|
1220
|
+
<li
|
|
1221
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1222
|
+
>
|
|
1223
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1224
|
+
Link 1
|
|
1225
|
+
<span
|
|
1226
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1227
|
+
>
|
|
1228
|
+
<i
|
|
1229
|
+
class="fas fa-external-link-alt"
|
|
1230
|
+
aria-hidden="true"
|
|
1231
|
+
></i>
|
|
1232
|
+
</span>
|
|
1233
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1234
|
+
</a>
|
|
1235
|
+
<button
|
|
1236
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1237
|
+
type="button"
|
|
1238
|
+
aria-label="Favorite"
|
|
1239
|
+
>
|
|
1240
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1241
|
+
</button>
|
|
1242
|
+
</li>
|
|
1243
|
+
<li
|
|
1244
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1245
|
+
>
|
|
1246
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1247
|
+
Link 2
|
|
1248
|
+
<span
|
|
1249
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1250
|
+
>
|
|
1251
|
+
<i
|
|
1252
|
+
class="fas fa-external-link-alt"
|
|
1253
|
+
aria-hidden="true"
|
|
1254
|
+
></i>
|
|
1255
|
+
</span>
|
|
1256
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1257
|
+
</a>
|
|
1258
|
+
<button
|
|
1259
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1260
|
+
type="button"
|
|
1261
|
+
aria-label="Favorite"
|
|
1262
|
+
>
|
|
1263
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1264
|
+
</button>
|
|
1265
|
+
</li>
|
|
1266
|
+
</ul>
|
|
1267
|
+
</section>
|
|
1268
|
+
<hr class="pf-c-divider" />
|
|
1269
|
+
<section class="pf-c-app-launcher__group">
|
|
1270
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1271
|
+
<ul>
|
|
1272
|
+
<li
|
|
1273
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1274
|
+
>
|
|
1275
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1276
|
+
Link 1
|
|
1277
|
+
<span
|
|
1278
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1279
|
+
>
|
|
1280
|
+
<i
|
|
1281
|
+
class="fas fa-external-link-alt"
|
|
1282
|
+
aria-hidden="true"
|
|
1283
|
+
></i>
|
|
1284
|
+
</span>
|
|
1285
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1286
|
+
</a>
|
|
1287
|
+
<button
|
|
1288
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1289
|
+
type="button"
|
|
1290
|
+
aria-label="Favorite"
|
|
1291
|
+
>
|
|
1292
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1293
|
+
</button>
|
|
1294
|
+
</li>
|
|
1295
|
+
<li
|
|
1296
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1297
|
+
>
|
|
1298
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1299
|
+
Link 2
|
|
1300
|
+
<span
|
|
1301
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1302
|
+
>
|
|
1303
|
+
<i
|
|
1304
|
+
class="fas fa-external-link-alt"
|
|
1305
|
+
aria-hidden="true"
|
|
1306
|
+
></i>
|
|
1307
|
+
</span>
|
|
1308
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1309
|
+
</a>
|
|
1310
|
+
<button
|
|
1311
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1312
|
+
type="button"
|
|
1313
|
+
aria-label="Favorite"
|
|
1314
|
+
>
|
|
1315
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1316
|
+
</button>
|
|
1317
|
+
</li>
|
|
1318
|
+
</ul>
|
|
1319
|
+
</section>
|
|
1320
|
+
</div>
|
|
1321
|
+
</nav>
|
|
1322
|
+
</div>
|
|
1323
|
+
<div class="pf-c-toolbar__item">
|
|
1324
|
+
<div class="pf-c-dropdown">
|
|
1325
|
+
<button
|
|
1326
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1327
|
+
id="drawer-expanded-example-masthead-settings-button"
|
|
1328
|
+
aria-expanded="false"
|
|
1329
|
+
type="button"
|
|
1330
|
+
aria-label="Settings"
|
|
1331
|
+
>
|
|
1332
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1333
|
+
</button>
|
|
1334
|
+
<ul
|
|
1335
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1336
|
+
aria-labelledby="drawer-expanded-example-masthead-settings-button"
|
|
1337
|
+
hidden
|
|
1338
|
+
>
|
|
1339
|
+
<li>
|
|
1340
|
+
<button
|
|
1341
|
+
class="pf-c-dropdown__menu-item"
|
|
1342
|
+
type="button"
|
|
1343
|
+
>Settings</button>
|
|
1344
|
+
</li>
|
|
1345
|
+
<li>
|
|
1346
|
+
<button
|
|
1347
|
+
class="pf-c-dropdown__menu-item"
|
|
1348
|
+
type="button"
|
|
1349
|
+
>Use the beta release</button>
|
|
1350
|
+
</li>
|
|
1351
|
+
</ul>
|
|
1352
|
+
</div>
|
|
1353
|
+
</div>
|
|
1354
|
+
<div class="pf-c-toolbar__item">
|
|
1355
|
+
<div class="pf-c-dropdown">
|
|
1356
|
+
<button
|
|
1357
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1358
|
+
id="drawer-expanded-example-masthead-help-button"
|
|
1359
|
+
aria-expanded="false"
|
|
1360
|
+
type="button"
|
|
1361
|
+
aria-label="Help"
|
|
1362
|
+
>
|
|
1363
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1364
|
+
</button>
|
|
1365
|
+
<ul
|
|
1366
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1367
|
+
aria-labelledby="drawer-expanded-example-masthead-help-button"
|
|
1368
|
+
hidden
|
|
1369
|
+
>
|
|
1370
|
+
<li>
|
|
1371
|
+
<button
|
|
1372
|
+
class="pf-c-dropdown__menu-item"
|
|
1373
|
+
type="button"
|
|
1374
|
+
>Support options</button>
|
|
1375
|
+
</li>
|
|
1376
|
+
<li>
|
|
1377
|
+
<button
|
|
1378
|
+
class="pf-c-dropdown__menu-item"
|
|
1379
|
+
type="button"
|
|
1380
|
+
>Open support case</button>
|
|
1381
|
+
</li>
|
|
1382
|
+
<li>
|
|
1383
|
+
<button
|
|
1384
|
+
class="pf-c-dropdown__menu-item"
|
|
1385
|
+
type="button"
|
|
1386
|
+
>API documentation</button>
|
|
1387
|
+
</li>
|
|
1388
|
+
</ul>
|
|
1389
|
+
</div>
|
|
1390
|
+
</div>
|
|
1391
|
+
</div>
|
|
1392
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1393
|
+
<div class="pf-c-dropdown">
|
|
1394
|
+
<button
|
|
1395
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1396
|
+
type="button"
|
|
1397
|
+
aria-expanded="false"
|
|
1398
|
+
aria-label="Actions"
|
|
1399
|
+
>
|
|
1400
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1401
|
+
</button>
|
|
1402
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1403
|
+
<div class="pf-c-menu__content">
|
|
1404
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1405
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1406
|
+
<li
|
|
1407
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1408
|
+
role="none"
|
|
1409
|
+
>
|
|
1410
|
+
<button
|
|
1411
|
+
class="pf-c-menu__item"
|
|
1412
|
+
type="button"
|
|
1413
|
+
disabled
|
|
1414
|
+
role="menuitem"
|
|
1415
|
+
>
|
|
1416
|
+
<span class="pf-c-menu__item-description">
|
|
1417
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1418
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1419
|
+
</span>
|
|
1420
|
+
</button>
|
|
1421
|
+
</li>
|
|
1422
|
+
<li
|
|
1423
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1424
|
+
role="none"
|
|
1425
|
+
>
|
|
1426
|
+
<button
|
|
1427
|
+
class="pf-c-menu__item"
|
|
1428
|
+
type="button"
|
|
1429
|
+
disabled
|
|
1430
|
+
role="menuitem"
|
|
1431
|
+
>
|
|
1432
|
+
<span class="pf-c-menu__item-description">
|
|
1433
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1434
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1435
|
+
</span>
|
|
1436
|
+
</button>
|
|
1437
|
+
</li>
|
|
1438
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1439
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1440
|
+
<button
|
|
1441
|
+
class="pf-c-menu__item"
|
|
1442
|
+
type="button"
|
|
1443
|
+
role="menuitem"
|
|
1444
|
+
>
|
|
1445
|
+
<span class="pf-c-menu__item-main">
|
|
1446
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1447
|
+
</span>
|
|
1448
|
+
</button>
|
|
1449
|
+
</li>
|
|
1450
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1451
|
+
<button
|
|
1452
|
+
class="pf-c-menu__item"
|
|
1453
|
+
type="button"
|
|
1454
|
+
role="menuitem"
|
|
1455
|
+
>
|
|
1456
|
+
<span class="pf-c-menu__item-main">
|
|
1457
|
+
<span
|
|
1458
|
+
class="pf-c-menu__item-text"
|
|
1459
|
+
>User management</span>
|
|
1460
|
+
</span>
|
|
1461
|
+
</button>
|
|
1462
|
+
</li>
|
|
1463
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1464
|
+
<button
|
|
1465
|
+
class="pf-c-menu__item"
|
|
1466
|
+
type="button"
|
|
1467
|
+
role="menuitem"
|
|
1468
|
+
>
|
|
1469
|
+
<span class="pf-c-menu__item-main">
|
|
1470
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1471
|
+
</span>
|
|
1472
|
+
</button>
|
|
1473
|
+
</li>
|
|
1474
|
+
</ul>
|
|
1475
|
+
</section>
|
|
1476
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1477
|
+
<section class="pf-c-menu__group">
|
|
1478
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1479
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1480
|
+
<button
|
|
1481
|
+
class="pf-c-menu__item"
|
|
1482
|
+
type="button"
|
|
1483
|
+
role="menuitem"
|
|
1484
|
+
aria-expanded="false"
|
|
1485
|
+
>
|
|
1486
|
+
<span class="pf-c-menu__item-main">
|
|
1487
|
+
<span class="pf-c-menu__item-icon">
|
|
1488
|
+
<i
|
|
1489
|
+
class="fas fa-fw fa-cog"
|
|
1490
|
+
aria-hidden="true"
|
|
1491
|
+
></i>
|
|
1492
|
+
</span>
|
|
1493
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1494
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1495
|
+
<i class="fas fa-angle-right"></i>
|
|
1496
|
+
</span>
|
|
1497
|
+
</span>
|
|
1498
|
+
</button>
|
|
1499
|
+
<div class="pf-c-menu" hidden>
|
|
1500
|
+
<div class="pf-c-menu__content">
|
|
1501
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1502
|
+
<li
|
|
1503
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1504
|
+
role="none"
|
|
1505
|
+
>
|
|
1506
|
+
<button
|
|
1507
|
+
class="pf-c-menu__item"
|
|
1508
|
+
type="button"
|
|
1509
|
+
role="menuitem"
|
|
1510
|
+
>
|
|
1511
|
+
<span class="pf-c-menu__item-main">
|
|
1512
|
+
<span
|
|
1513
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1514
|
+
>
|
|
1515
|
+
<i class="fas fa-angle-left"></i>
|
|
1516
|
+
</span>
|
|
1517
|
+
<span class="pf-c-menu__item-icon">
|
|
1518
|
+
<i
|
|
1519
|
+
class="fas fa-fw fa-cog"
|
|
1520
|
+
aria-hidden="true"
|
|
1521
|
+
></i>
|
|
1522
|
+
</span>
|
|
1523
|
+
<span
|
|
1524
|
+
class="pf-c-menu__item-text"
|
|
1525
|
+
>Settings</span>
|
|
1526
|
+
</span>
|
|
1527
|
+
</button>
|
|
1528
|
+
</li>
|
|
1529
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1530
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1531
|
+
<a
|
|
1532
|
+
class="pf-c-menu__item"
|
|
1533
|
+
href="#"
|
|
1534
|
+
role="menuitem"
|
|
1535
|
+
>
|
|
1536
|
+
<span class="pf-c-menu__item-main">
|
|
1537
|
+
<span
|
|
1538
|
+
class="pf-c-menu__item-text"
|
|
1539
|
+
>Customer support</span>
|
|
1540
|
+
</span>
|
|
1541
|
+
</a>
|
|
1542
|
+
</li>
|
|
1543
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1544
|
+
<a
|
|
1545
|
+
class="pf-c-menu__item"
|
|
1546
|
+
href="#"
|
|
1547
|
+
role="menuitem"
|
|
1548
|
+
>
|
|
1549
|
+
<span class="pf-c-menu__item-main">
|
|
1550
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1551
|
+
</span>
|
|
1552
|
+
</a>
|
|
1553
|
+
</li>
|
|
1554
|
+
</ul>
|
|
1555
|
+
</div>
|
|
1556
|
+
</div>
|
|
1557
|
+
</li>
|
|
1558
|
+
|
|
1559
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1560
|
+
<button
|
|
1561
|
+
class="pf-c-menu__item"
|
|
1562
|
+
type="button"
|
|
1563
|
+
role="menuitem"
|
|
1564
|
+
aria-expanded="false"
|
|
1565
|
+
>
|
|
1566
|
+
<span class="pf-c-menu__item-main">
|
|
1567
|
+
<span class="pf-c-menu__item-icon">
|
|
1568
|
+
<i
|
|
1569
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1570
|
+
aria-hidden="true"
|
|
1571
|
+
></i>
|
|
1572
|
+
</span>
|
|
1573
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1574
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1575
|
+
<i class="fas fa-angle-right"></i>
|
|
1576
|
+
</span>
|
|
1577
|
+
</span>
|
|
1578
|
+
</button>
|
|
1579
|
+
<div class="pf-c-menu" hidden>
|
|
1580
|
+
<div class="pf-c-menu__content">
|
|
1581
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1582
|
+
<li
|
|
1583
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1584
|
+
role="none"
|
|
1585
|
+
>
|
|
1586
|
+
<button
|
|
1587
|
+
class="pf-c-menu__item"
|
|
1588
|
+
type="button"
|
|
1589
|
+
role="menuitem"
|
|
1590
|
+
>
|
|
1591
|
+
<span class="pf-c-menu__item-main">
|
|
1592
|
+
<span
|
|
1593
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1594
|
+
>
|
|
1595
|
+
<i class="fas fa-angle-left"></i>
|
|
1596
|
+
</span>
|
|
1597
|
+
<span class="pf-c-menu__item-icon">
|
|
1598
|
+
<i
|
|
1599
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1600
|
+
aria-hidden="true"
|
|
1601
|
+
></i>
|
|
1602
|
+
</span>
|
|
1603
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1604
|
+
</span>
|
|
1605
|
+
</button>
|
|
1606
|
+
</li>
|
|
1607
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1608
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1609
|
+
<a
|
|
1610
|
+
class="pf-c-menu__item"
|
|
1611
|
+
href="#"
|
|
1612
|
+
role="menuitem"
|
|
1613
|
+
>
|
|
1614
|
+
<span class="pf-c-menu__item-main">
|
|
1615
|
+
<span
|
|
1616
|
+
class="pf-c-menu__item-text"
|
|
1617
|
+
>Support options</span>
|
|
1618
|
+
</span>
|
|
1619
|
+
</a>
|
|
1620
|
+
</li>
|
|
1621
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1622
|
+
<a
|
|
1623
|
+
class="pf-c-menu__item"
|
|
1624
|
+
href="#"
|
|
1625
|
+
role="menuitem"
|
|
1626
|
+
>
|
|
1627
|
+
<span class="pf-c-menu__item-main">
|
|
1628
|
+
<span
|
|
1629
|
+
class="pf-c-menu__item-text"
|
|
1630
|
+
>Open support case</span>
|
|
1631
|
+
</span>
|
|
1632
|
+
</a>
|
|
1633
|
+
</li>
|
|
1634
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1635
|
+
<a
|
|
1636
|
+
class="pf-c-menu__item"
|
|
1637
|
+
href="#"
|
|
1638
|
+
role="menuitem"
|
|
1639
|
+
>
|
|
1640
|
+
<span class="pf-c-menu__item-main">
|
|
1641
|
+
<span
|
|
1642
|
+
class="pf-c-menu__item-text"
|
|
1643
|
+
>API documentation</span>
|
|
1644
|
+
</span>
|
|
1645
|
+
</a>
|
|
1646
|
+
</li>
|
|
1647
|
+
</ul>
|
|
1648
|
+
</div>
|
|
1649
|
+
</div>
|
|
1650
|
+
</li>
|
|
1651
|
+
|
|
1652
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1653
|
+
<button
|
|
1654
|
+
class="pf-c-menu__item"
|
|
1655
|
+
type="button"
|
|
1656
|
+
role="menuitem"
|
|
1657
|
+
>
|
|
1658
|
+
<span class="pf-c-menu__item-main">
|
|
1659
|
+
<span class="pf-c-menu__item-icon">
|
|
1660
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1661
|
+
</span>
|
|
1662
|
+
<span
|
|
1663
|
+
class="pf-c-menu__item-text"
|
|
1664
|
+
>Application launcher</span>
|
|
1665
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1666
|
+
<i class="fas fa-angle-right"></i>
|
|
1667
|
+
</span>
|
|
1668
|
+
</span>
|
|
1669
|
+
</button>
|
|
1670
|
+
<div class="pf-c-menu" hidden>
|
|
1671
|
+
<div class="pf-c-menu__header">
|
|
1672
|
+
<button
|
|
1673
|
+
class="pf-c-menu__item"
|
|
1674
|
+
type="button"
|
|
1675
|
+
role="menuitem"
|
|
1676
|
+
>
|
|
1677
|
+
<span class="pf-c-menu__item-main">
|
|
1678
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1679
|
+
<i class="fas fa-angle-left"></i>
|
|
1680
|
+
</span>
|
|
1681
|
+
<span class="pf-c-menu__item-icon">
|
|
1682
|
+
<i
|
|
1683
|
+
class="fas fa-fw fa-th"
|
|
1684
|
+
aria-hidden="true"
|
|
1685
|
+
></i>
|
|
1686
|
+
</span>
|
|
1687
|
+
<span
|
|
1688
|
+
class="pf-c-menu__item-text"
|
|
1689
|
+
>Application launcher</span>
|
|
1690
|
+
</span>
|
|
1691
|
+
</button>
|
|
1692
|
+
</div>
|
|
1693
|
+
<div class="pf-c-menu__search">
|
|
1694
|
+
<div class="pf-c-menu__search-input">
|
|
1695
|
+
<div class="pf-c-search-input">
|
|
1696
|
+
<div class="pf-c-search-input__bar">
|
|
1697
|
+
<span class="pf-c-search-input__text">
|
|
1698
|
+
<span class="pf-c-search-input__icon">
|
|
1699
|
+
<i
|
|
1700
|
+
class="fas fa-search fa-fw"
|
|
1701
|
+
aria-hidden="true"
|
|
1702
|
+
></i>
|
|
1703
|
+
</span>
|
|
1704
|
+
<input
|
|
1705
|
+
class="pf-c-search-input__text-input"
|
|
1706
|
+
type="text"
|
|
1707
|
+
placeholder="Search"
|
|
1708
|
+
aria-label="Search"
|
|
1709
|
+
/>
|
|
1710
|
+
</span>
|
|
1711
|
+
</div>
|
|
1712
|
+
</div>
|
|
1713
|
+
</div>
|
|
1714
|
+
</div>
|
|
1715
|
+
<hr class="pf-c-divider" />
|
|
1716
|
+
<section class="pf-c-menu__group">
|
|
1717
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1718
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1719
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1720
|
+
<a
|
|
1721
|
+
class="pf-c-menu__item"
|
|
1722
|
+
href="#"
|
|
1723
|
+
role="menuitem"
|
|
1724
|
+
>
|
|
1725
|
+
<span class="pf-c-menu__item-main">
|
|
1726
|
+
<span
|
|
1727
|
+
class="pf-c-menu__item-text"
|
|
1728
|
+
>Link 1</span>
|
|
1729
|
+
</span>
|
|
1730
|
+
</a>
|
|
1731
|
+
<button
|
|
1732
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1733
|
+
type="button"
|
|
1734
|
+
aria-label="Starred"
|
|
1735
|
+
>
|
|
1736
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1737
|
+
<i
|
|
1738
|
+
class="fas fa-star"
|
|
1739
|
+
aria-hidden="true"
|
|
1740
|
+
></i>
|
|
1741
|
+
</span>
|
|
1742
|
+
</button>
|
|
1743
|
+
</li>
|
|
1744
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1745
|
+
<a
|
|
1746
|
+
class="pf-c-menu__item"
|
|
1747
|
+
href="#"
|
|
1748
|
+
role="menuitem"
|
|
1749
|
+
target="_blank"
|
|
1750
|
+
>
|
|
1751
|
+
<span class="pf-c-menu__item-main">
|
|
1752
|
+
<span
|
|
1753
|
+
class="pf-c-menu__item-text"
|
|
1754
|
+
>Link 2</span>
|
|
1755
|
+
<span
|
|
1756
|
+
class="pf-c-menu__item-external-icon"
|
|
1757
|
+
>
|
|
1758
|
+
<i
|
|
1759
|
+
class="fas fa-external-link-alt"
|
|
1760
|
+
aria-hidden="true"
|
|
1761
|
+
></i>
|
|
1762
|
+
</span>
|
|
1763
|
+
<span
|
|
1764
|
+
class="pf-screen-reader"
|
|
1765
|
+
>(opens new window)</span>
|
|
1766
|
+
</span>
|
|
1767
|
+
</a>
|
|
1768
|
+
<button
|
|
1769
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1770
|
+
type="button"
|
|
1771
|
+
aria-label="Not starred"
|
|
1772
|
+
>
|
|
1773
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1774
|
+
<i
|
|
1775
|
+
class="fas fa-star"
|
|
1776
|
+
aria-hidden="true"
|
|
1777
|
+
></i>
|
|
1778
|
+
</span>
|
|
1779
|
+
</button>
|
|
1780
|
+
</li>
|
|
1781
|
+
</ul>
|
|
1782
|
+
</section>
|
|
1783
|
+
<hr class="pf-c-divider" />
|
|
1784
|
+
<section class="pf-c-menu__group">
|
|
1785
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1786
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1787
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1788
|
+
<a
|
|
1789
|
+
class="pf-c-menu__item"
|
|
1790
|
+
href="#"
|
|
1791
|
+
role="menuitem"
|
|
1792
|
+
>
|
|
1793
|
+
<span class="pf-c-menu__item-main">
|
|
1794
|
+
<span
|
|
1795
|
+
class="pf-c-menu__item-text"
|
|
1796
|
+
>Link 1</span>
|
|
1797
|
+
</span>
|
|
1798
|
+
</a>
|
|
1799
|
+
<button
|
|
1800
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1801
|
+
type="button"
|
|
1802
|
+
aria-label="Not starred"
|
|
1803
|
+
>
|
|
1804
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1805
|
+
<i
|
|
1806
|
+
class="fas fa-star"
|
|
1807
|
+
aria-hidden="true"
|
|
1808
|
+
></i>
|
|
1809
|
+
</span>
|
|
1810
|
+
</button>
|
|
1811
|
+
</li>
|
|
1812
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1813
|
+
<a
|
|
1814
|
+
class="pf-c-menu__item"
|
|
1815
|
+
href="#"
|
|
1816
|
+
role="menuitem"
|
|
1817
|
+
target="_blank"
|
|
1818
|
+
>
|
|
1819
|
+
<span class="pf-c-menu__item-main">
|
|
1820
|
+
<span
|
|
1821
|
+
class="pf-c-menu__item-text"
|
|
1822
|
+
>Link 2</span>
|
|
1823
|
+
<span
|
|
1824
|
+
class="pf-c-menu__item-external-icon"
|
|
1825
|
+
>
|
|
1826
|
+
<i
|
|
1827
|
+
class="fas fa-external-link-alt"
|
|
1828
|
+
aria-hidden="true"
|
|
1829
|
+
></i>
|
|
1830
|
+
</span>
|
|
1831
|
+
<span
|
|
1832
|
+
class="pf-screen-reader"
|
|
1833
|
+
>(opens new window)</span>
|
|
1834
|
+
</span>
|
|
1835
|
+
</a>
|
|
1836
|
+
<button
|
|
1837
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1838
|
+
type="button"
|
|
1839
|
+
aria-label="Starred"
|
|
1840
|
+
>
|
|
1841
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1842
|
+
<i
|
|
1843
|
+
class="fas fa-star"
|
|
1844
|
+
aria-hidden="true"
|
|
1845
|
+
></i>
|
|
1846
|
+
</span>
|
|
1847
|
+
</button>
|
|
1848
|
+
</li>
|
|
1849
|
+
</ul>
|
|
1850
|
+
</section>
|
|
1851
|
+
</div>
|
|
1852
|
+
</li>
|
|
1853
|
+
</ul>
|
|
1854
|
+
</section>
|
|
1855
|
+
</div>
|
|
1856
|
+
</div>
|
|
1857
|
+
</div>
|
|
1858
|
+
</div>
|
|
1859
|
+
</div>
|
|
1860
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1861
|
+
<div
|
|
1862
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1863
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1864
|
+
>
|
|
432
1865
|
<button
|
|
433
|
-
class="pf-c-
|
|
1866
|
+
class="pf-c-dropdown__toggle"
|
|
1867
|
+
id="drawer-expanded-example-masthead-profile-button"
|
|
1868
|
+
aria-expanded="false"
|
|
434
1869
|
type="button"
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
1870
|
+
>
|
|
1871
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1872
|
+
<img
|
|
1873
|
+
class="pf-c-avatar"
|
|
1874
|
+
src="/assets/images/img_avatar.svg"
|
|
1875
|
+
alt="Avatar image"
|
|
1876
|
+
/>
|
|
1877
|
+
</span>
|
|
1878
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1879
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1880
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1881
|
+
</span>
|
|
1882
|
+
</button>
|
|
1883
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1884
|
+
<section class="pf-c-dropdown__group">
|
|
1885
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1886
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1887
|
+
<div>123456789</div>
|
|
1888
|
+
</div>
|
|
1889
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1890
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1891
|
+
<div>mshaksho@redhat.com</div>
|
|
1892
|
+
</div>
|
|
1893
|
+
</section>
|
|
1894
|
+
<hr class="pf-c-divider" />
|
|
1895
|
+
<section class="pf-c-dropdown__group">
|
|
1896
|
+
<ul>
|
|
1897
|
+
<li>
|
|
1898
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1899
|
+
</li>
|
|
1900
|
+
<li>
|
|
1901
|
+
<a
|
|
1902
|
+
class="pf-c-dropdown__menu-item"
|
|
1903
|
+
href="#"
|
|
1904
|
+
>User management</a>
|
|
1905
|
+
</li>
|
|
1906
|
+
<li>
|
|
1907
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1908
|
+
</li>
|
|
1909
|
+
</ul>
|
|
1910
|
+
</section>
|
|
1911
|
+
</div>
|
|
1912
|
+
</div>
|
|
1913
|
+
</div>
|
|
443
1914
|
</div>
|
|
444
1915
|
</div>
|
|
445
1916
|
</div>
|
|
446
|
-
<img
|
|
447
|
-
class="pf-c-avatar"
|
|
448
|
-
src="/assets/images/img_avatar.svg"
|
|
449
|
-
alt="Avatar image"
|
|
450
|
-
/>
|
|
451
1917
|
</div>
|
|
452
1918
|
</header>
|
|
453
1919
|
<div class="pf-c-page__sidebar">
|
|
454
1920
|
<div class="pf-c-page__sidebar-body">
|
|
455
1921
|
<nav
|
|
456
1922
|
class="pf-c-nav"
|
|
457
|
-
id="drawer-expanded-primary-nav"
|
|
1923
|
+
id="drawer-expanded-example-primary-nav"
|
|
458
1924
|
aria-label="Global"
|
|
459
1925
|
>
|
|
460
1926
|
<ul class="pf-c-nav__list">
|
|
1927
|
+
<li class="pf-c-nav__item">
|
|
1928
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1929
|
+
</li>
|
|
461
1930
|
<li class="pf-c-nav__item">
|
|
462
1931
|
<a
|
|
463
1932
|
href="#"
|
|
464
1933
|
class="pf-c-nav__link pf-m-current"
|
|
465
1934
|
aria-current="page"
|
|
466
|
-
>
|
|
467
|
-
</li>
|
|
468
|
-
<li class="pf-c-nav__item">
|
|
469
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
1935
|
+
>Policy</a>
|
|
470
1936
|
</li>
|
|
471
1937
|
<li class="pf-c-nav__item">
|
|
472
1938
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -486,7 +1952,11 @@ wrapperTag: div
|
|
|
486
1952
|
<div class="pf-c-drawer__main">
|
|
487
1953
|
<div class="pf-c-drawer__content">
|
|
488
1954
|
<div class="pf-c-drawer__body">
|
|
489
|
-
<main
|
|
1955
|
+
<main
|
|
1956
|
+
class="pf-c-page__main"
|
|
1957
|
+
tabindex="-1"
|
|
1958
|
+
id="main-content-drawer-expanded-example"
|
|
1959
|
+
>
|
|
490
1960
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
491
1961
|
<div class="pf-c-page__main-body">
|
|
492
1962
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -572,10 +2042,8 @@ wrapperTag: div
|
|
|
572
2042
|
</main>
|
|
573
2043
|
</div>
|
|
574
2044
|
</div>
|
|
575
|
-
<div class="pf-c-drawer__panel
|
|
576
|
-
<div class="pf-c-drawer__body">
|
|
577
|
-
<p>drawer panel</p>
|
|
578
|
-
</div>
|
|
2045
|
+
<div class="pf-c-drawer__panel">
|
|
2046
|
+
<div class="pf-c-drawer__body">drawer panel</div>
|
|
579
2047
|
</div>
|
|
580
2048
|
</div>
|
|
581
2049
|
</div>
|
|
@@ -587,176 +2055,821 @@ wrapperTag: div
|
|
|
587
2055
|
### Expanded bottom
|
|
588
2056
|
|
|
589
2057
|
```html isFullscreen
|
|
590
|
-
<div class="pf-c-page" id="drawer-expanded-bottom">
|
|
2058
|
+
<div class="pf-c-page" id="drawer-expanded-bottom-example">
|
|
591
2059
|
<a
|
|
592
2060
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
593
|
-
href="#main-content-drawer-expanded-bottom"
|
|
2061
|
+
href="#main-content-drawer-expanded-bottom-example"
|
|
594
2062
|
>Skip to content</a>
|
|
595
|
-
<header class="pf-c-
|
|
596
|
-
<
|
|
597
|
-
<
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
2063
|
+
<header class="pf-c-masthead" id="drawer-expanded-bottom-example-masthead">
|
|
2064
|
+
<span class="pf-c-masthead__toggle">
|
|
2065
|
+
<button
|
|
2066
|
+
class="pf-c-button pf-m-plain"
|
|
2067
|
+
type="button"
|
|
2068
|
+
aria-label="Global navigation"
|
|
2069
|
+
>
|
|
2070
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2071
|
+
</button>
|
|
2072
|
+
</span>
|
|
2073
|
+
<div class="pf-c-masthead__main">
|
|
2074
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
2075
|
+
<picture
|
|
2076
|
+
class="pf-c-brand pf-m-picture"
|
|
2077
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
605
2078
|
>
|
|
606
|
-
<
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
2079
|
+
<source
|
|
2080
|
+
media="(min-width: 768px)"
|
|
2081
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
2082
|
+
/>
|
|
2083
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
2084
|
+
<img
|
|
2085
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
2086
|
+
alt="Fallback patternFly default logo"
|
|
2087
|
+
/>
|
|
2088
|
+
</picture>
|
|
615
2089
|
</a>
|
|
616
2090
|
</div>
|
|
617
|
-
<div class="pf-c-
|
|
618
|
-
<div
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
>
|
|
627
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
628
|
-
</button>
|
|
629
|
-
</div>
|
|
630
|
-
<div
|
|
631
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
632
|
-
>
|
|
633
|
-
<button
|
|
634
|
-
class="pf-c-button pf-m-plain"
|
|
635
|
-
type="button"
|
|
636
|
-
aria-label="Help"
|
|
637
|
-
>
|
|
638
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
639
|
-
</button>
|
|
640
|
-
</div>
|
|
641
|
-
</div>
|
|
642
|
-
<div class="pf-c-page__header-tools-group">
|
|
643
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
644
|
-
<div class="pf-c-dropdown">
|
|
645
|
-
<button
|
|
646
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
647
|
-
id="drawer-expanded-bottom-dropdown-kebab-1-button"
|
|
648
|
-
aria-expanded="false"
|
|
649
|
-
type="button"
|
|
650
|
-
aria-label="Actions"
|
|
651
|
-
>
|
|
652
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
653
|
-
</button>
|
|
654
|
-
<ul
|
|
655
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
656
|
-
aria-labelledby="drawer-expanded-bottom-dropdown-kebab-1-button"
|
|
657
|
-
hidden
|
|
2091
|
+
<div class="pf-c-masthead__content">
|
|
2092
|
+
<div
|
|
2093
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2094
|
+
id="drawer-expanded-bottom-example-masthead-toolbar"
|
|
2095
|
+
>
|
|
2096
|
+
<div class="pf-c-toolbar__content">
|
|
2097
|
+
<div class="pf-c-toolbar__content-section">
|
|
2098
|
+
<div
|
|
2099
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
658
2100
|
>
|
|
659
|
-
<
|
|
660
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
661
|
-
</li>
|
|
662
|
-
<li>
|
|
663
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
664
|
-
</li>
|
|
665
|
-
<li>
|
|
666
|
-
<a
|
|
667
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
668
|
-
href="#"
|
|
669
|
-
aria-disabled="true"
|
|
670
|
-
tabindex="-1"
|
|
671
|
-
>Disabled link</a>
|
|
672
|
-
</li>
|
|
673
|
-
<li>
|
|
2101
|
+
<div class="pf-c-toolbar__item">
|
|
674
2102
|
<button
|
|
675
|
-
class="pf-c-
|
|
2103
|
+
class="pf-c-button pf-m-plain"
|
|
676
2104
|
type="button"
|
|
677
|
-
|
|
678
|
-
>
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
</
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
2105
|
+
aria-label="Notifications"
|
|
2106
|
+
>
|
|
2107
|
+
<span class="pf-c-notification-badge">
|
|
2108
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
2109
|
+
</span>
|
|
2110
|
+
</button>
|
|
2111
|
+
</div>
|
|
2112
|
+
<div
|
|
2113
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
2114
|
+
>
|
|
2115
|
+
<div class="pf-c-toolbar__item">
|
|
2116
|
+
<nav
|
|
2117
|
+
class="pf-c-app-launcher"
|
|
2118
|
+
aria-label="Application launcher"
|
|
2119
|
+
id="drawer-expanded-bottom-example-masthead-icon-group--app-launcher"
|
|
2120
|
+
>
|
|
2121
|
+
<button
|
|
2122
|
+
class="pf-c-app-launcher__toggle"
|
|
2123
|
+
type="button"
|
|
2124
|
+
id="drawer-expanded-bottom-example-masthead-icon-group--app-launcher-button"
|
|
2125
|
+
aria-expanded="false"
|
|
2126
|
+
aria-label="Application launcher"
|
|
2127
|
+
>
|
|
2128
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
2129
|
+
</button>
|
|
2130
|
+
<div
|
|
2131
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
2132
|
+
hidden
|
|
2133
|
+
>
|
|
2134
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
2135
|
+
<div class="pf-c-search-input">
|
|
2136
|
+
<div class="pf-c-search-input__bar">
|
|
2137
|
+
<span class="pf-c-search-input__text">
|
|
2138
|
+
<span class="pf-c-search-input__icon">
|
|
2139
|
+
<i
|
|
2140
|
+
class="fas fa-search fa-fw"
|
|
2141
|
+
aria-hidden="true"
|
|
2142
|
+
></i>
|
|
2143
|
+
</span>
|
|
2144
|
+
<input
|
|
2145
|
+
class="pf-c-search-input__text-input"
|
|
2146
|
+
type="text"
|
|
2147
|
+
placeholder="Filter by name"
|
|
2148
|
+
aria-label="Filter by name"
|
|
2149
|
+
/>
|
|
2150
|
+
</span>
|
|
2151
|
+
</div>
|
|
2152
|
+
</div>
|
|
2153
|
+
</div>
|
|
2154
|
+
<section class="pf-c-app-launcher__group">
|
|
2155
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
2156
|
+
<ul>
|
|
2157
|
+
<li
|
|
2158
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2159
|
+
>
|
|
2160
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2161
|
+
Link 1
|
|
2162
|
+
<span
|
|
2163
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2164
|
+
>
|
|
2165
|
+
<i
|
|
2166
|
+
class="fas fa-external-link-alt"
|
|
2167
|
+
aria-hidden="true"
|
|
2168
|
+
></i>
|
|
2169
|
+
</span>
|
|
2170
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2171
|
+
</a>
|
|
2172
|
+
<button
|
|
2173
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2174
|
+
type="button"
|
|
2175
|
+
aria-label="Favorite"
|
|
2176
|
+
>
|
|
2177
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2178
|
+
</button>
|
|
2179
|
+
</li>
|
|
2180
|
+
<li
|
|
2181
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2182
|
+
>
|
|
2183
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2184
|
+
Link 2
|
|
2185
|
+
<span
|
|
2186
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2187
|
+
>
|
|
2188
|
+
<i
|
|
2189
|
+
class="fas fa-external-link-alt"
|
|
2190
|
+
aria-hidden="true"
|
|
2191
|
+
></i>
|
|
2192
|
+
</span>
|
|
2193
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2194
|
+
</a>
|
|
2195
|
+
<button
|
|
2196
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2197
|
+
type="button"
|
|
2198
|
+
aria-label="Favorite"
|
|
2199
|
+
>
|
|
2200
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2201
|
+
</button>
|
|
2202
|
+
</li>
|
|
2203
|
+
</ul>
|
|
2204
|
+
</section>
|
|
2205
|
+
<hr class="pf-c-divider" />
|
|
2206
|
+
<section class="pf-c-app-launcher__group">
|
|
2207
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
2208
|
+
<ul>
|
|
2209
|
+
<li
|
|
2210
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
2211
|
+
>
|
|
2212
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2213
|
+
Link 1
|
|
2214
|
+
<span
|
|
2215
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2216
|
+
>
|
|
2217
|
+
<i
|
|
2218
|
+
class="fas fa-external-link-alt"
|
|
2219
|
+
aria-hidden="true"
|
|
2220
|
+
></i>
|
|
2221
|
+
</span>
|
|
2222
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2223
|
+
</a>
|
|
2224
|
+
<button
|
|
2225
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2226
|
+
type="button"
|
|
2227
|
+
aria-label="Favorite"
|
|
2228
|
+
>
|
|
2229
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2230
|
+
</button>
|
|
2231
|
+
</li>
|
|
2232
|
+
<li
|
|
2233
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
2234
|
+
>
|
|
2235
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
2236
|
+
Link 2
|
|
2237
|
+
<span
|
|
2238
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
2239
|
+
>
|
|
2240
|
+
<i
|
|
2241
|
+
class="fas fa-external-link-alt"
|
|
2242
|
+
aria-hidden="true"
|
|
2243
|
+
></i>
|
|
2244
|
+
</span>
|
|
2245
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
2246
|
+
</a>
|
|
2247
|
+
<button
|
|
2248
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
2249
|
+
type="button"
|
|
2250
|
+
aria-label="Favorite"
|
|
2251
|
+
>
|
|
2252
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
2253
|
+
</button>
|
|
2254
|
+
</li>
|
|
2255
|
+
</ul>
|
|
2256
|
+
</section>
|
|
2257
|
+
</div>
|
|
2258
|
+
</nav>
|
|
2259
|
+
</div>
|
|
2260
|
+
<div class="pf-c-toolbar__item">
|
|
2261
|
+
<div class="pf-c-dropdown">
|
|
2262
|
+
<button
|
|
2263
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2264
|
+
id="drawer-expanded-bottom-example-masthead-settings-button"
|
|
2265
|
+
aria-expanded="false"
|
|
2266
|
+
type="button"
|
|
2267
|
+
aria-label="Settings"
|
|
2268
|
+
>
|
|
2269
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2270
|
+
</button>
|
|
2271
|
+
<ul
|
|
2272
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2273
|
+
aria-labelledby="drawer-expanded-bottom-example-masthead-settings-button"
|
|
2274
|
+
hidden
|
|
2275
|
+
>
|
|
2276
|
+
<li>
|
|
2277
|
+
<button
|
|
2278
|
+
class="pf-c-dropdown__menu-item"
|
|
2279
|
+
type="button"
|
|
2280
|
+
>Settings</button>
|
|
2281
|
+
</li>
|
|
2282
|
+
<li>
|
|
2283
|
+
<button
|
|
2284
|
+
class="pf-c-dropdown__menu-item"
|
|
2285
|
+
type="button"
|
|
2286
|
+
>Use the beta release</button>
|
|
2287
|
+
</li>
|
|
2288
|
+
</ul>
|
|
2289
|
+
</div>
|
|
2290
|
+
</div>
|
|
2291
|
+
<div class="pf-c-toolbar__item">
|
|
2292
|
+
<div class="pf-c-dropdown">
|
|
2293
|
+
<button
|
|
2294
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2295
|
+
id="drawer-expanded-bottom-example-masthead-help-button"
|
|
2296
|
+
aria-expanded="false"
|
|
2297
|
+
type="button"
|
|
2298
|
+
aria-label="Help"
|
|
2299
|
+
>
|
|
2300
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
2301
|
+
</button>
|
|
2302
|
+
<ul
|
|
2303
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2304
|
+
aria-labelledby="drawer-expanded-bottom-example-masthead-help-button"
|
|
2305
|
+
hidden
|
|
2306
|
+
>
|
|
2307
|
+
<li>
|
|
2308
|
+
<button
|
|
2309
|
+
class="pf-c-dropdown__menu-item"
|
|
2310
|
+
type="button"
|
|
2311
|
+
>Support options</button>
|
|
2312
|
+
</li>
|
|
2313
|
+
<li>
|
|
2314
|
+
<button
|
|
2315
|
+
class="pf-c-dropdown__menu-item"
|
|
2316
|
+
type="button"
|
|
2317
|
+
>Open support case</button>
|
|
2318
|
+
</li>
|
|
2319
|
+
<li>
|
|
2320
|
+
<button
|
|
2321
|
+
class="pf-c-dropdown__menu-item"
|
|
2322
|
+
type="button"
|
|
2323
|
+
>API documentation</button>
|
|
2324
|
+
</li>
|
|
2325
|
+
</ul>
|
|
2326
|
+
</div>
|
|
2327
|
+
</div>
|
|
2328
|
+
</div>
|
|
2329
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
2330
|
+
<div class="pf-c-dropdown">
|
|
2331
|
+
<button
|
|
2332
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
2333
|
+
type="button"
|
|
2334
|
+
aria-expanded="false"
|
|
2335
|
+
aria-label="Actions"
|
|
2336
|
+
>
|
|
2337
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2338
|
+
</button>
|
|
2339
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
2340
|
+
<div class="pf-c-menu__content">
|
|
2341
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
2342
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2343
|
+
<li
|
|
2344
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2345
|
+
role="none"
|
|
2346
|
+
>
|
|
2347
|
+
<button
|
|
2348
|
+
class="pf-c-menu__item"
|
|
2349
|
+
type="button"
|
|
2350
|
+
disabled
|
|
2351
|
+
role="menuitem"
|
|
2352
|
+
>
|
|
2353
|
+
<span class="pf-c-menu__item-description">
|
|
2354
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2355
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
2356
|
+
</span>
|
|
2357
|
+
</button>
|
|
2358
|
+
</li>
|
|
2359
|
+
<li
|
|
2360
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
2361
|
+
role="none"
|
|
2362
|
+
>
|
|
2363
|
+
<button
|
|
2364
|
+
class="pf-c-menu__item"
|
|
2365
|
+
type="button"
|
|
2366
|
+
disabled
|
|
2367
|
+
role="menuitem"
|
|
2368
|
+
>
|
|
2369
|
+
<span class="pf-c-menu__item-description">
|
|
2370
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2371
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
2372
|
+
</span>
|
|
2373
|
+
</button>
|
|
2374
|
+
</li>
|
|
2375
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2376
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2377
|
+
<button
|
|
2378
|
+
class="pf-c-menu__item"
|
|
2379
|
+
type="button"
|
|
2380
|
+
role="menuitem"
|
|
2381
|
+
>
|
|
2382
|
+
<span class="pf-c-menu__item-main">
|
|
2383
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
2384
|
+
</span>
|
|
2385
|
+
</button>
|
|
2386
|
+
</li>
|
|
2387
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2388
|
+
<button
|
|
2389
|
+
class="pf-c-menu__item"
|
|
2390
|
+
type="button"
|
|
2391
|
+
role="menuitem"
|
|
2392
|
+
>
|
|
2393
|
+
<span class="pf-c-menu__item-main">
|
|
2394
|
+
<span
|
|
2395
|
+
class="pf-c-menu__item-text"
|
|
2396
|
+
>User management</span>
|
|
2397
|
+
</span>
|
|
2398
|
+
</button>
|
|
2399
|
+
</li>
|
|
2400
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2401
|
+
<button
|
|
2402
|
+
class="pf-c-menu__item"
|
|
2403
|
+
type="button"
|
|
2404
|
+
role="menuitem"
|
|
2405
|
+
>
|
|
2406
|
+
<span class="pf-c-menu__item-main">
|
|
2407
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
2408
|
+
</span>
|
|
2409
|
+
</button>
|
|
2410
|
+
</li>
|
|
2411
|
+
</ul>
|
|
2412
|
+
</section>
|
|
2413
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
2414
|
+
<section class="pf-c-menu__group">
|
|
2415
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2416
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2417
|
+
<button
|
|
2418
|
+
class="pf-c-menu__item"
|
|
2419
|
+
type="button"
|
|
2420
|
+
role="menuitem"
|
|
2421
|
+
aria-expanded="false"
|
|
2422
|
+
>
|
|
2423
|
+
<span class="pf-c-menu__item-main">
|
|
2424
|
+
<span class="pf-c-menu__item-icon">
|
|
2425
|
+
<i
|
|
2426
|
+
class="fas fa-fw fa-cog"
|
|
2427
|
+
aria-hidden="true"
|
|
2428
|
+
></i>
|
|
2429
|
+
</span>
|
|
2430
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
2431
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2432
|
+
<i class="fas fa-angle-right"></i>
|
|
2433
|
+
</span>
|
|
2434
|
+
</span>
|
|
2435
|
+
</button>
|
|
2436
|
+
<div class="pf-c-menu" hidden>
|
|
2437
|
+
<div class="pf-c-menu__content">
|
|
2438
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2439
|
+
<li
|
|
2440
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2441
|
+
role="none"
|
|
2442
|
+
>
|
|
2443
|
+
<button
|
|
2444
|
+
class="pf-c-menu__item"
|
|
2445
|
+
type="button"
|
|
2446
|
+
role="menuitem"
|
|
2447
|
+
>
|
|
2448
|
+
<span class="pf-c-menu__item-main">
|
|
2449
|
+
<span
|
|
2450
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2451
|
+
>
|
|
2452
|
+
<i class="fas fa-angle-left"></i>
|
|
2453
|
+
</span>
|
|
2454
|
+
<span class="pf-c-menu__item-icon">
|
|
2455
|
+
<i
|
|
2456
|
+
class="fas fa-fw fa-cog"
|
|
2457
|
+
aria-hidden="true"
|
|
2458
|
+
></i>
|
|
2459
|
+
</span>
|
|
2460
|
+
<span
|
|
2461
|
+
class="pf-c-menu__item-text"
|
|
2462
|
+
>Settings</span>
|
|
2463
|
+
</span>
|
|
2464
|
+
</button>
|
|
2465
|
+
</li>
|
|
2466
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2467
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2468
|
+
<a
|
|
2469
|
+
class="pf-c-menu__item"
|
|
2470
|
+
href="#"
|
|
2471
|
+
role="menuitem"
|
|
2472
|
+
>
|
|
2473
|
+
<span class="pf-c-menu__item-main">
|
|
2474
|
+
<span
|
|
2475
|
+
class="pf-c-menu__item-text"
|
|
2476
|
+
>Customer support</span>
|
|
2477
|
+
</span>
|
|
2478
|
+
</a>
|
|
2479
|
+
</li>
|
|
2480
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2481
|
+
<a
|
|
2482
|
+
class="pf-c-menu__item"
|
|
2483
|
+
href="#"
|
|
2484
|
+
role="menuitem"
|
|
2485
|
+
>
|
|
2486
|
+
<span class="pf-c-menu__item-main">
|
|
2487
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
2488
|
+
</span>
|
|
2489
|
+
</a>
|
|
2490
|
+
</li>
|
|
2491
|
+
</ul>
|
|
2492
|
+
</div>
|
|
2493
|
+
</div>
|
|
2494
|
+
</li>
|
|
2495
|
+
|
|
2496
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2497
|
+
<button
|
|
2498
|
+
class="pf-c-menu__item"
|
|
2499
|
+
type="button"
|
|
2500
|
+
role="menuitem"
|
|
2501
|
+
aria-expanded="false"
|
|
2502
|
+
>
|
|
2503
|
+
<span class="pf-c-menu__item-main">
|
|
2504
|
+
<span class="pf-c-menu__item-icon">
|
|
2505
|
+
<i
|
|
2506
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2507
|
+
aria-hidden="true"
|
|
2508
|
+
></i>
|
|
2509
|
+
</span>
|
|
2510
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2511
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2512
|
+
<i class="fas fa-angle-right"></i>
|
|
2513
|
+
</span>
|
|
2514
|
+
</span>
|
|
2515
|
+
</button>
|
|
2516
|
+
<div class="pf-c-menu" hidden>
|
|
2517
|
+
<div class="pf-c-menu__content">
|
|
2518
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2519
|
+
<li
|
|
2520
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
2521
|
+
role="none"
|
|
2522
|
+
>
|
|
2523
|
+
<button
|
|
2524
|
+
class="pf-c-menu__item"
|
|
2525
|
+
type="button"
|
|
2526
|
+
role="menuitem"
|
|
2527
|
+
>
|
|
2528
|
+
<span class="pf-c-menu__item-main">
|
|
2529
|
+
<span
|
|
2530
|
+
class="pf-c-menu__item-toggle-icon"
|
|
2531
|
+
>
|
|
2532
|
+
<i class="fas fa-angle-left"></i>
|
|
2533
|
+
</span>
|
|
2534
|
+
<span class="pf-c-menu__item-icon">
|
|
2535
|
+
<i
|
|
2536
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
2537
|
+
aria-hidden="true"
|
|
2538
|
+
></i>
|
|
2539
|
+
</span>
|
|
2540
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
2541
|
+
</span>
|
|
2542
|
+
</button>
|
|
2543
|
+
</li>
|
|
2544
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
2545
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2546
|
+
<a
|
|
2547
|
+
class="pf-c-menu__item"
|
|
2548
|
+
href="#"
|
|
2549
|
+
role="menuitem"
|
|
2550
|
+
>
|
|
2551
|
+
<span class="pf-c-menu__item-main">
|
|
2552
|
+
<span
|
|
2553
|
+
class="pf-c-menu__item-text"
|
|
2554
|
+
>Support options</span>
|
|
2555
|
+
</span>
|
|
2556
|
+
</a>
|
|
2557
|
+
</li>
|
|
2558
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2559
|
+
<a
|
|
2560
|
+
class="pf-c-menu__item"
|
|
2561
|
+
href="#"
|
|
2562
|
+
role="menuitem"
|
|
2563
|
+
>
|
|
2564
|
+
<span class="pf-c-menu__item-main">
|
|
2565
|
+
<span
|
|
2566
|
+
class="pf-c-menu__item-text"
|
|
2567
|
+
>Open support case</span>
|
|
2568
|
+
</span>
|
|
2569
|
+
</a>
|
|
2570
|
+
</li>
|
|
2571
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2572
|
+
<a
|
|
2573
|
+
class="pf-c-menu__item"
|
|
2574
|
+
href="#"
|
|
2575
|
+
role="menuitem"
|
|
2576
|
+
>
|
|
2577
|
+
<span class="pf-c-menu__item-main">
|
|
2578
|
+
<span
|
|
2579
|
+
class="pf-c-menu__item-text"
|
|
2580
|
+
>API documentation</span>
|
|
2581
|
+
</span>
|
|
2582
|
+
</a>
|
|
2583
|
+
</li>
|
|
2584
|
+
</ul>
|
|
2585
|
+
</div>
|
|
2586
|
+
</div>
|
|
2587
|
+
</li>
|
|
2588
|
+
|
|
2589
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2590
|
+
<button
|
|
2591
|
+
class="pf-c-menu__item"
|
|
2592
|
+
type="button"
|
|
2593
|
+
role="menuitem"
|
|
2594
|
+
>
|
|
2595
|
+
<span class="pf-c-menu__item-main">
|
|
2596
|
+
<span class="pf-c-menu__item-icon">
|
|
2597
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
2598
|
+
</span>
|
|
2599
|
+
<span
|
|
2600
|
+
class="pf-c-menu__item-text"
|
|
2601
|
+
>Application launcher</span>
|
|
2602
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2603
|
+
<i class="fas fa-angle-right"></i>
|
|
2604
|
+
</span>
|
|
2605
|
+
</span>
|
|
2606
|
+
</button>
|
|
2607
|
+
<div class="pf-c-menu" hidden>
|
|
2608
|
+
<div class="pf-c-menu__header">
|
|
2609
|
+
<button
|
|
2610
|
+
class="pf-c-menu__item"
|
|
2611
|
+
type="button"
|
|
2612
|
+
role="menuitem"
|
|
2613
|
+
>
|
|
2614
|
+
<span class="pf-c-menu__item-main">
|
|
2615
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
2616
|
+
<i class="fas fa-angle-left"></i>
|
|
2617
|
+
</span>
|
|
2618
|
+
<span class="pf-c-menu__item-icon">
|
|
2619
|
+
<i
|
|
2620
|
+
class="fas fa-fw fa-th"
|
|
2621
|
+
aria-hidden="true"
|
|
2622
|
+
></i>
|
|
2623
|
+
</span>
|
|
2624
|
+
<span
|
|
2625
|
+
class="pf-c-menu__item-text"
|
|
2626
|
+
>Application launcher</span>
|
|
2627
|
+
</span>
|
|
2628
|
+
</button>
|
|
2629
|
+
</div>
|
|
2630
|
+
<div class="pf-c-menu__search">
|
|
2631
|
+
<div class="pf-c-menu__search-input">
|
|
2632
|
+
<div class="pf-c-search-input">
|
|
2633
|
+
<div class="pf-c-search-input__bar">
|
|
2634
|
+
<span class="pf-c-search-input__text">
|
|
2635
|
+
<span class="pf-c-search-input__icon">
|
|
2636
|
+
<i
|
|
2637
|
+
class="fas fa-search fa-fw"
|
|
2638
|
+
aria-hidden="true"
|
|
2639
|
+
></i>
|
|
2640
|
+
</span>
|
|
2641
|
+
<input
|
|
2642
|
+
class="pf-c-search-input__text-input"
|
|
2643
|
+
type="text"
|
|
2644
|
+
placeholder="Search"
|
|
2645
|
+
aria-label="Search"
|
|
2646
|
+
/>
|
|
2647
|
+
</span>
|
|
2648
|
+
</div>
|
|
2649
|
+
</div>
|
|
2650
|
+
</div>
|
|
2651
|
+
</div>
|
|
2652
|
+
<hr class="pf-c-divider" />
|
|
2653
|
+
<section class="pf-c-menu__group">
|
|
2654
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2655
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2656
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2657
|
+
<a
|
|
2658
|
+
class="pf-c-menu__item"
|
|
2659
|
+
href="#"
|
|
2660
|
+
role="menuitem"
|
|
2661
|
+
>
|
|
2662
|
+
<span class="pf-c-menu__item-main">
|
|
2663
|
+
<span
|
|
2664
|
+
class="pf-c-menu__item-text"
|
|
2665
|
+
>Link 1</span>
|
|
2666
|
+
</span>
|
|
2667
|
+
</a>
|
|
2668
|
+
<button
|
|
2669
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2670
|
+
type="button"
|
|
2671
|
+
aria-label="Starred"
|
|
2672
|
+
>
|
|
2673
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2674
|
+
<i
|
|
2675
|
+
class="fas fa-star"
|
|
2676
|
+
aria-hidden="true"
|
|
2677
|
+
></i>
|
|
2678
|
+
</span>
|
|
2679
|
+
</button>
|
|
2680
|
+
</li>
|
|
2681
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2682
|
+
<a
|
|
2683
|
+
class="pf-c-menu__item"
|
|
2684
|
+
href="#"
|
|
2685
|
+
role="menuitem"
|
|
2686
|
+
target="_blank"
|
|
2687
|
+
>
|
|
2688
|
+
<span class="pf-c-menu__item-main">
|
|
2689
|
+
<span
|
|
2690
|
+
class="pf-c-menu__item-text"
|
|
2691
|
+
>Link 2</span>
|
|
2692
|
+
<span
|
|
2693
|
+
class="pf-c-menu__item-external-icon"
|
|
2694
|
+
>
|
|
2695
|
+
<i
|
|
2696
|
+
class="fas fa-external-link-alt"
|
|
2697
|
+
aria-hidden="true"
|
|
2698
|
+
></i>
|
|
2699
|
+
</span>
|
|
2700
|
+
<span
|
|
2701
|
+
class="pf-screen-reader"
|
|
2702
|
+
>(opens new window)</span>
|
|
2703
|
+
</span>
|
|
2704
|
+
</a>
|
|
2705
|
+
<button
|
|
2706
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2707
|
+
type="button"
|
|
2708
|
+
aria-label="Not starred"
|
|
2709
|
+
>
|
|
2710
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2711
|
+
<i
|
|
2712
|
+
class="fas fa-star"
|
|
2713
|
+
aria-hidden="true"
|
|
2714
|
+
></i>
|
|
2715
|
+
</span>
|
|
2716
|
+
</button>
|
|
2717
|
+
</li>
|
|
2718
|
+
</ul>
|
|
2719
|
+
</section>
|
|
2720
|
+
<hr class="pf-c-divider" />
|
|
2721
|
+
<section class="pf-c-menu__group">
|
|
2722
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2723
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2724
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2725
|
+
<a
|
|
2726
|
+
class="pf-c-menu__item"
|
|
2727
|
+
href="#"
|
|
2728
|
+
role="menuitem"
|
|
2729
|
+
>
|
|
2730
|
+
<span class="pf-c-menu__item-main">
|
|
2731
|
+
<span
|
|
2732
|
+
class="pf-c-menu__item-text"
|
|
2733
|
+
>Link 1</span>
|
|
2734
|
+
</span>
|
|
2735
|
+
</a>
|
|
2736
|
+
<button
|
|
2737
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2738
|
+
type="button"
|
|
2739
|
+
aria-label="Not starred"
|
|
2740
|
+
>
|
|
2741
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2742
|
+
<i
|
|
2743
|
+
class="fas fa-star"
|
|
2744
|
+
aria-hidden="true"
|
|
2745
|
+
></i>
|
|
2746
|
+
</span>
|
|
2747
|
+
</button>
|
|
2748
|
+
</li>
|
|
2749
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2750
|
+
<a
|
|
2751
|
+
class="pf-c-menu__item"
|
|
2752
|
+
href="#"
|
|
2753
|
+
role="menuitem"
|
|
2754
|
+
target="_blank"
|
|
2755
|
+
>
|
|
2756
|
+
<span class="pf-c-menu__item-main">
|
|
2757
|
+
<span
|
|
2758
|
+
class="pf-c-menu__item-text"
|
|
2759
|
+
>Link 2</span>
|
|
2760
|
+
<span
|
|
2761
|
+
class="pf-c-menu__item-external-icon"
|
|
2762
|
+
>
|
|
2763
|
+
<i
|
|
2764
|
+
class="fas fa-external-link-alt"
|
|
2765
|
+
aria-hidden="true"
|
|
2766
|
+
></i>
|
|
2767
|
+
</span>
|
|
2768
|
+
<span
|
|
2769
|
+
class="pf-screen-reader"
|
|
2770
|
+
>(opens new window)</span>
|
|
2771
|
+
</span>
|
|
2772
|
+
</a>
|
|
2773
|
+
<button
|
|
2774
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2775
|
+
type="button"
|
|
2776
|
+
aria-label="Starred"
|
|
2777
|
+
>
|
|
2778
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2779
|
+
<i
|
|
2780
|
+
class="fas fa-star"
|
|
2781
|
+
aria-hidden="true"
|
|
2782
|
+
></i>
|
|
2783
|
+
</span>
|
|
2784
|
+
</button>
|
|
2785
|
+
</li>
|
|
2786
|
+
</ul>
|
|
2787
|
+
</section>
|
|
2788
|
+
</div>
|
|
2789
|
+
</li>
|
|
2790
|
+
</ul>
|
|
2791
|
+
</section>
|
|
2792
|
+
</div>
|
|
2793
|
+
</div>
|
|
2794
|
+
</div>
|
|
2795
|
+
</div>
|
|
2796
|
+
</div>
|
|
2797
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2798
|
+
<div
|
|
2799
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2800
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2801
|
+
>
|
|
722
2802
|
<button
|
|
723
|
-
class="pf-c-
|
|
2803
|
+
class="pf-c-dropdown__toggle"
|
|
2804
|
+
id="drawer-expanded-bottom-example-masthead-profile-button"
|
|
2805
|
+
aria-expanded="false"
|
|
724
2806
|
type="button"
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
2807
|
+
>
|
|
2808
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2809
|
+
<img
|
|
2810
|
+
class="pf-c-avatar"
|
|
2811
|
+
src="/assets/images/img_avatar.svg"
|
|
2812
|
+
alt="Avatar image"
|
|
2813
|
+
/>
|
|
2814
|
+
</span>
|
|
2815
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2816
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2817
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2818
|
+
</span>
|
|
2819
|
+
</button>
|
|
2820
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
2821
|
+
<section class="pf-c-dropdown__group">
|
|
2822
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2823
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2824
|
+
<div>123456789</div>
|
|
2825
|
+
</div>
|
|
2826
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2827
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2828
|
+
<div>mshaksho@redhat.com</div>
|
|
2829
|
+
</div>
|
|
2830
|
+
</section>
|
|
2831
|
+
<hr class="pf-c-divider" />
|
|
2832
|
+
<section class="pf-c-dropdown__group">
|
|
2833
|
+
<ul>
|
|
2834
|
+
<li>
|
|
2835
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2836
|
+
</li>
|
|
2837
|
+
<li>
|
|
2838
|
+
<a
|
|
2839
|
+
class="pf-c-dropdown__menu-item"
|
|
2840
|
+
href="#"
|
|
2841
|
+
>User management</a>
|
|
2842
|
+
</li>
|
|
2843
|
+
<li>
|
|
2844
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2845
|
+
</li>
|
|
2846
|
+
</ul>
|
|
2847
|
+
</section>
|
|
2848
|
+
</div>
|
|
2849
|
+
</div>
|
|
2850
|
+
</div>
|
|
733
2851
|
</div>
|
|
734
2852
|
</div>
|
|
735
2853
|
</div>
|
|
736
|
-
<img
|
|
737
|
-
class="pf-c-avatar"
|
|
738
|
-
src="/assets/images/img_avatar.svg"
|
|
739
|
-
alt="Avatar image"
|
|
740
|
-
/>
|
|
741
2854
|
</div>
|
|
742
2855
|
</header>
|
|
743
2856
|
<div class="pf-c-page__sidebar">
|
|
744
2857
|
<div class="pf-c-page__sidebar-body">
|
|
745
2858
|
<nav
|
|
746
2859
|
class="pf-c-nav"
|
|
747
|
-
id="drawer-expanded-bottom-primary-nav"
|
|
2860
|
+
id="drawer-expanded-bottom-example-primary-nav"
|
|
748
2861
|
aria-label="Global"
|
|
749
2862
|
>
|
|
750
2863
|
<ul class="pf-c-nav__list">
|
|
2864
|
+
<li class="pf-c-nav__item">
|
|
2865
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
2866
|
+
</li>
|
|
751
2867
|
<li class="pf-c-nav__item">
|
|
752
2868
|
<a
|
|
753
2869
|
href="#"
|
|
754
2870
|
class="pf-c-nav__link pf-m-current"
|
|
755
2871
|
aria-current="page"
|
|
756
|
-
>
|
|
757
|
-
</li>
|
|
758
|
-
<li class="pf-c-nav__item">
|
|
759
|
-
<a href="#" class="pf-c-nav__link">Policy</a>
|
|
2872
|
+
>Policy</a>
|
|
760
2873
|
</li>
|
|
761
2874
|
<li class="pf-c-nav__item">
|
|
762
2875
|
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
@@ -776,7 +2889,11 @@ wrapperTag: div
|
|
|
776
2889
|
<div class="pf-c-drawer__main">
|
|
777
2890
|
<div class="pf-c-drawer__content">
|
|
778
2891
|
<div class="pf-c-drawer__body">
|
|
779
|
-
<main
|
|
2892
|
+
<main
|
|
2893
|
+
class="pf-c-page__main"
|
|
2894
|
+
tabindex="-1"
|
|
2895
|
+
id="main-content-drawer-expanded-bottom-example"
|
|
2896
|
+
>
|
|
780
2897
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
781
2898
|
<div class="pf-c-page__main-body">
|
|
782
2899
|
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
@@ -862,10 +2979,8 @@ wrapperTag: div
|
|
|
862
2979
|
</main>
|
|
863
2980
|
</div>
|
|
864
2981
|
</div>
|
|
865
|
-
<div class="pf-c-drawer__panel
|
|
866
|
-
<div class="pf-c-drawer__body">
|
|
867
|
-
<p>drawer panel</p>
|
|
868
|
-
</div>
|
|
2982
|
+
<div class="pf-c-drawer__panel">
|
|
2983
|
+
<div class="pf-c-drawer__body">drawer panel</div>
|
|
869
2984
|
</div>
|
|
870
2985
|
</div>
|
|
871
2986
|
</div>
|