@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -10,10 +10,10 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
10
10
|
### Collapsed
|
|
11
11
|
|
|
12
12
|
```html
|
|
13
|
-
<button class="pf-
|
|
14
|
-
<span class="pf-
|
|
15
|
-
<span class="pf-
|
|
16
|
-
<span class="pf-
|
|
13
|
+
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
14
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
15
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
16
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
17
17
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
18
18
|
</span>
|
|
19
19
|
</span>
|
|
@@ -25,13 +25,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
25
25
|
|
|
26
26
|
```html
|
|
27
27
|
<button
|
|
28
|
-
class="pf-
|
|
28
|
+
class="pf-v6-c-menu-toggle pf-m-expanded"
|
|
29
29
|
type="button"
|
|
30
30
|
aria-expanded="true"
|
|
31
31
|
>
|
|
32
|
-
<span class="pf-
|
|
33
|
-
<span class="pf-
|
|
34
|
-
<span class="pf-
|
|
32
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
33
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
34
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
35
35
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
36
36
|
</span>
|
|
37
37
|
</span>
|
|
@@ -43,14 +43,14 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
43
43
|
|
|
44
44
|
```html
|
|
45
45
|
<button
|
|
46
|
-
class="pf-
|
|
46
|
+
class="pf-v6-c-menu-toggle pf-m-disabled"
|
|
47
47
|
type="button"
|
|
48
48
|
aria-expanded="false"
|
|
49
49
|
disabled
|
|
50
50
|
>
|
|
51
|
-
<span class="pf-
|
|
52
|
-
<span class="pf-
|
|
53
|
-
<span class="pf-
|
|
51
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
52
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
53
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
54
54
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
55
55
|
</span>
|
|
56
56
|
</span>
|
|
@@ -61,13 +61,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
61
61
|
### Count
|
|
62
62
|
|
|
63
63
|
```html
|
|
64
|
-
<button class="pf-
|
|
65
|
-
<span class="pf-
|
|
66
|
-
<span class="pf-
|
|
67
|
-
<span class="pf-
|
|
64
|
+
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
65
|
+
<span class="pf-v6-c-menu-toggle__text">Count</span>
|
|
66
|
+
<span class="pf-v6-c-menu-toggle__count">
|
|
67
|
+
<span class="pf-v6-c-badge pf-m-unread">4 selected</span>
|
|
68
68
|
</span>
|
|
69
|
-
<span class="pf-
|
|
70
|
-
<span class="pf-
|
|
69
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
70
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
71
71
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
72
72
|
</span>
|
|
73
73
|
</span>
|
|
@@ -79,13 +79,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
79
79
|
|
|
80
80
|
```html
|
|
81
81
|
<button
|
|
82
|
-
class="pf-
|
|
82
|
+
class="pf-v6-c-menu-toggle pf-m-primary"
|
|
83
83
|
type="button"
|
|
84
84
|
aria-expanded="false"
|
|
85
85
|
>
|
|
86
|
-
<span class="pf-
|
|
87
|
-
<span class="pf-
|
|
88
|
-
<span class="pf-
|
|
86
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
87
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
88
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
89
89
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
90
90
|
</span>
|
|
91
91
|
</span>
|
|
@@ -93,16 +93,16 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
93
93
|
|
|
94
94
|
|
|
95
95
|
<button
|
|
96
|
-
class="pf-
|
|
96
|
+
class="pf-v6-c-menu-toggle pf-m-primary"
|
|
97
97
|
type="button"
|
|
98
98
|
aria-expanded="false"
|
|
99
99
|
>
|
|
100
|
-
<span class="pf-
|
|
100
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
101
101
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
102
102
|
</span>
|
|
103
|
-
<span class="pf-
|
|
104
|
-
<span class="pf-
|
|
105
|
-
<span class="pf-
|
|
103
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
104
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
105
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
106
106
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
107
107
|
</span>
|
|
108
108
|
</span>
|
|
@@ -110,13 +110,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
110
110
|
|
|
111
111
|
|
|
112
112
|
<button
|
|
113
|
-
class="pf-
|
|
113
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-expanded"
|
|
114
114
|
type="button"
|
|
115
115
|
aria-expanded="true"
|
|
116
116
|
>
|
|
117
|
-
<span class="pf-
|
|
118
|
-
<span class="pf-
|
|
119
|
-
<span class="pf-
|
|
117
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
118
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
119
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
120
120
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
121
121
|
</span>
|
|
122
122
|
</span>
|
|
@@ -124,14 +124,14 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
124
124
|
|
|
125
125
|
|
|
126
126
|
<button
|
|
127
|
-
class="pf-
|
|
127
|
+
class="pf-v6-c-menu-toggle pf-m-primary pf-m-disabled"
|
|
128
128
|
type="button"
|
|
129
129
|
aria-expanded="false"
|
|
130
130
|
disabled
|
|
131
131
|
>
|
|
132
|
-
<span class="pf-
|
|
133
|
-
<span class="pf-
|
|
134
|
-
<span class="pf-
|
|
132
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
133
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
134
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
135
135
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
136
136
|
</span>
|
|
137
137
|
</span>
|
|
@@ -143,13 +143,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
143
143
|
|
|
144
144
|
```html
|
|
145
145
|
<button
|
|
146
|
-
class="pf-
|
|
146
|
+
class="pf-v6-c-menu-toggle pf-m-secondary"
|
|
147
147
|
type="button"
|
|
148
148
|
aria-expanded="false"
|
|
149
149
|
>
|
|
150
|
-
<span class="pf-
|
|
151
|
-
<span class="pf-
|
|
152
|
-
<span class="pf-
|
|
150
|
+
<span class="pf-v6-c-menu-toggle__text">Collapsed</span>
|
|
151
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
152
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
153
153
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
154
154
|
</span>
|
|
155
155
|
</span>
|
|
@@ -157,16 +157,16 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
157
157
|
|
|
158
158
|
|
|
159
159
|
<button
|
|
160
|
-
class="pf-
|
|
160
|
+
class="pf-v6-c-menu-toggle pf-m-secondary"
|
|
161
161
|
type="button"
|
|
162
162
|
aria-expanded="false"
|
|
163
163
|
>
|
|
164
|
-
<span class="pf-
|
|
164
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
165
165
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
166
166
|
</span>
|
|
167
|
-
<span class="pf-
|
|
168
|
-
<span class="pf-
|
|
169
|
-
<span class="pf-
|
|
167
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
168
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
169
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
170
170
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
171
171
|
</span>
|
|
172
172
|
</span>
|
|
@@ -174,13 +174,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
174
174
|
|
|
175
175
|
|
|
176
176
|
<button
|
|
177
|
-
class="pf-
|
|
177
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-expanded"
|
|
178
178
|
type="button"
|
|
179
179
|
aria-expanded="true"
|
|
180
180
|
>
|
|
181
|
-
<span class="pf-
|
|
182
|
-
<span class="pf-
|
|
183
|
-
<span class="pf-
|
|
181
|
+
<span class="pf-v6-c-menu-toggle__text">Expanded</span>
|
|
182
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
183
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
184
184
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
185
185
|
</span>
|
|
186
186
|
</span>
|
|
@@ -188,14 +188,14 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
188
188
|
|
|
189
189
|
|
|
190
190
|
<button
|
|
191
|
-
class="pf-
|
|
191
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-disabled"
|
|
192
192
|
type="button"
|
|
193
193
|
aria-expanded="false"
|
|
194
194
|
disabled
|
|
195
195
|
>
|
|
196
|
-
<span class="pf-
|
|
197
|
-
<span class="pf-
|
|
198
|
-
<span class="pf-
|
|
196
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
197
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
198
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
199
199
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
200
200
|
</span>
|
|
201
201
|
</span>
|
|
@@ -207,35 +207,35 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
207
207
|
|
|
208
208
|
```html
|
|
209
209
|
<button
|
|
210
|
-
class="pf-
|
|
210
|
+
class="pf-v6-c-menu-toggle pf-m-plain"
|
|
211
211
|
type="button"
|
|
212
212
|
aria-expanded="false"
|
|
213
213
|
aria-label="Actions"
|
|
214
214
|
>
|
|
215
|
-
<span class="pf-
|
|
215
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
216
216
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
217
217
|
</span>
|
|
218
218
|
</button>
|
|
219
219
|
|
|
220
220
|
<button
|
|
221
|
-
class="pf-
|
|
221
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
|
|
222
222
|
type="button"
|
|
223
223
|
aria-expanded="true"
|
|
224
224
|
aria-label="Actions"
|
|
225
225
|
>
|
|
226
|
-
<span class="pf-
|
|
226
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
227
227
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
228
228
|
</span>
|
|
229
229
|
</button>
|
|
230
230
|
|
|
231
231
|
<button
|
|
232
|
-
class="pf-
|
|
232
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-disabled"
|
|
233
233
|
type="button"
|
|
234
234
|
aria-expanded="false"
|
|
235
235
|
disabled
|
|
236
236
|
aria-label="Actions"
|
|
237
237
|
>
|
|
238
|
-
<span class="pf-
|
|
238
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
239
239
|
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
240
240
|
</span>
|
|
241
241
|
</button>
|
|
@@ -246,13 +246,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
246
246
|
|
|
247
247
|
```html
|
|
248
248
|
<button
|
|
249
|
-
class="pf-
|
|
249
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
|
|
250
250
|
type="button"
|
|
251
251
|
aria-expanded="false"
|
|
252
252
|
>
|
|
253
|
-
<span class="pf-
|
|
254
|
-
<span class="pf-
|
|
255
|
-
<span class="pf-
|
|
253
|
+
<span class="pf-v6-c-menu-toggle__text">Custom text</span>
|
|
254
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
255
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
256
256
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
257
257
|
</span>
|
|
258
258
|
</span>
|
|
@@ -260,13 +260,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
260
260
|
|
|
261
261
|
|
|
262
262
|
<button
|
|
263
|
-
class="pf-
|
|
263
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-expanded"
|
|
264
264
|
type="button"
|
|
265
265
|
aria-expanded="true"
|
|
266
266
|
>
|
|
267
|
-
<span class="pf-
|
|
268
|
-
<span class="pf-
|
|
269
|
-
<span class="pf-
|
|
267
|
+
<span class="pf-v6-c-menu-toggle__text">Custom text</span>
|
|
268
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
269
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
270
270
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
271
271
|
</span>
|
|
272
272
|
</span>
|
|
@@ -274,14 +274,14 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
274
274
|
|
|
275
275
|
|
|
276
276
|
<button
|
|
277
|
-
class="pf-
|
|
277
|
+
class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
|
|
278
278
|
type="button"
|
|
279
279
|
aria-expanded="false"
|
|
280
280
|
disabled
|
|
281
281
|
>
|
|
282
|
-
<span class="pf-
|
|
283
|
-
<span class="pf-
|
|
284
|
-
<span class="pf-
|
|
282
|
+
<span class="pf-v6-c-menu-toggle__text">Disabled</span>
|
|
283
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
284
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
285
285
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
286
286
|
</span>
|
|
287
287
|
</span>
|
|
@@ -293,28 +293,28 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
293
293
|
|
|
294
294
|
```html
|
|
295
295
|
<div
|
|
296
|
-
class="pf-
|
|
296
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
297
297
|
id="split-button-checkbox-example"
|
|
298
298
|
>
|
|
299
299
|
<label
|
|
300
|
-
class="pf-
|
|
300
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
301
301
|
for="split-button-checkbox-example-input"
|
|
302
302
|
>
|
|
303
303
|
<input
|
|
304
|
-
class="pf-
|
|
304
|
+
class="pf-v6-c-check__input"
|
|
305
305
|
type="checkbox"
|
|
306
306
|
aria-label="Standalone check"
|
|
307
307
|
/>
|
|
308
308
|
</label>
|
|
309
309
|
<button
|
|
310
|
-
class="pf-
|
|
310
|
+
class="pf-v6-c-menu-toggle__button"
|
|
311
311
|
type="button"
|
|
312
312
|
aria-expanded="false"
|
|
313
313
|
id="split-button-checkbox-example-toggle-button"
|
|
314
314
|
aria-label="Menu toggle"
|
|
315
315
|
>
|
|
316
|
-
<span class="pf-
|
|
317
|
-
<span class="pf-
|
|
316
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
317
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
318
318
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
319
319
|
</span>
|
|
320
320
|
</span>
|
|
@@ -322,28 +322,28 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
322
322
|
</div>
|
|
323
323
|
|
|
324
324
|
<div
|
|
325
|
-
class="pf-
|
|
325
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
326
326
|
id="split-button-checkbox-expanded-example"
|
|
327
327
|
>
|
|
328
328
|
<label
|
|
329
|
-
class="pf-
|
|
329
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
330
330
|
for="split-button-checkbox-expanded-example-input"
|
|
331
331
|
>
|
|
332
332
|
<input
|
|
333
|
-
class="pf-
|
|
333
|
+
class="pf-v6-c-check__input"
|
|
334
334
|
type="checkbox"
|
|
335
335
|
aria-label="Standalone check"
|
|
336
336
|
/>
|
|
337
337
|
</label>
|
|
338
338
|
<button
|
|
339
|
-
class="pf-
|
|
339
|
+
class="pf-v6-c-menu-toggle__button"
|
|
340
340
|
type="button"
|
|
341
341
|
aria-expanded="true"
|
|
342
342
|
id="split-button-checkbox-expanded-example-toggle-button"
|
|
343
343
|
aria-label="Menu toggle"
|
|
344
344
|
>
|
|
345
|
-
<span class="pf-
|
|
346
|
-
<span class="pf-
|
|
345
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
346
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
347
347
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
348
348
|
</span>
|
|
349
349
|
</span>
|
|
@@ -351,30 +351,30 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
351
351
|
</div>
|
|
352
352
|
|
|
353
353
|
<div
|
|
354
|
-
class="pf-
|
|
354
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
355
355
|
id="split-button-checkbox-disabled-example"
|
|
356
356
|
>
|
|
357
357
|
<label
|
|
358
|
-
class="pf-
|
|
358
|
+
class="pf-v6-c-check pf-m-standalone"
|
|
359
359
|
for="split-button-checkbox-disabled-example-input"
|
|
360
360
|
>
|
|
361
361
|
<input
|
|
362
|
-
class="pf-
|
|
362
|
+
class="pf-v6-c-check__input"
|
|
363
363
|
type="checkbox"
|
|
364
364
|
aria-label="Standalone check"
|
|
365
365
|
disabled
|
|
366
366
|
/>
|
|
367
367
|
</label>
|
|
368
368
|
<button
|
|
369
|
-
class="pf-
|
|
369
|
+
class="pf-v6-c-menu-toggle__button"
|
|
370
370
|
type="button"
|
|
371
371
|
aria-expanded="false"
|
|
372
372
|
id="split-button-checkbox-disabled-example-toggle-button"
|
|
373
373
|
aria-label="Menu toggle"
|
|
374
374
|
disabled
|
|
375
375
|
>
|
|
376
|
-
<span class="pf-
|
|
377
|
-
<span class="pf-
|
|
376
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
377
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
378
378
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
379
379
|
</span>
|
|
380
380
|
</span>
|
|
@@ -387,25 +387,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
387
387
|
|
|
388
388
|
```html
|
|
389
389
|
<div
|
|
390
|
-
class="pf-
|
|
390
|
+
class="pf-v6-c-menu-toggle pf-m-split-button"
|
|
391
391
|
id="split-button-checkbox-with-toggle-text-example"
|
|
392
392
|
>
|
|
393
393
|
<label
|
|
394
|
-
class="pf-
|
|
394
|
+
class="pf-v6-c-check"
|
|
395
395
|
for="split-button-checkbox-with-toggle-text-example-input"
|
|
396
396
|
>
|
|
397
|
-
<input class="pf-
|
|
398
|
-
<label class="pf-
|
|
397
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
398
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
399
399
|
</label>
|
|
400
400
|
<button
|
|
401
|
-
class="pf-
|
|
401
|
+
class="pf-v6-c-menu-toggle__button"
|
|
402
402
|
type="button"
|
|
403
403
|
aria-expanded="false"
|
|
404
404
|
id="split-button-checkbox-with-toggle-text-example-toggle-button"
|
|
405
405
|
aria-label="Menu toggle"
|
|
406
406
|
>
|
|
407
|
-
<span class="pf-
|
|
408
|
-
<span class="pf-
|
|
407
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
408
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
409
409
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
410
410
|
</span>
|
|
411
411
|
</span>
|
|
@@ -413,25 +413,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
413
413
|
</div>
|
|
414
414
|
|
|
415
415
|
<div
|
|
416
|
-
class="pf-
|
|
416
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button"
|
|
417
417
|
id="split-button-checkbox-with-toggle-text-expanded-example"
|
|
418
418
|
>
|
|
419
419
|
<label
|
|
420
|
-
class="pf-
|
|
420
|
+
class="pf-v6-c-check"
|
|
421
421
|
for="split-button-checkbox-with-toggle-text-expanded-example-input"
|
|
422
422
|
>
|
|
423
|
-
<input class="pf-
|
|
424
|
-
<label class="pf-
|
|
423
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
424
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
425
425
|
</label>
|
|
426
426
|
<button
|
|
427
|
-
class="pf-
|
|
427
|
+
class="pf-v6-c-menu-toggle__button"
|
|
428
428
|
type="button"
|
|
429
429
|
aria-expanded="true"
|
|
430
430
|
id="split-button-checkbox-with-toggle-text-expanded-example-toggle-button"
|
|
431
431
|
aria-label="Menu toggle"
|
|
432
432
|
>
|
|
433
|
-
<span class="pf-
|
|
434
|
-
<span class="pf-
|
|
433
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
434
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
435
435
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
436
436
|
</span>
|
|
437
437
|
</span>
|
|
@@ -439,26 +439,26 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
439
439
|
</div>
|
|
440
440
|
|
|
441
441
|
<div
|
|
442
|
-
class="pf-
|
|
442
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled"
|
|
443
443
|
id="split-button-checkbox-with-toggle-text-disabled-example"
|
|
444
444
|
>
|
|
445
445
|
<label
|
|
446
|
-
class="pf-
|
|
446
|
+
class="pf-v6-c-check"
|
|
447
447
|
for="split-button-checkbox-with-toggle-text-disabled-example-input"
|
|
448
448
|
>
|
|
449
|
-
<input class="pf-
|
|
450
|
-
<label class="pf-
|
|
449
|
+
<input class="pf-v6-c-check__input" type="checkbox" disabled />
|
|
450
|
+
<label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
|
|
451
451
|
</label>
|
|
452
452
|
<button
|
|
453
|
-
class="pf-
|
|
453
|
+
class="pf-v6-c-menu-toggle__button"
|
|
454
454
|
type="button"
|
|
455
455
|
aria-expanded="false"
|
|
456
456
|
id="split-button-checkbox-with-toggle-text-disabled-example-toggle-button"
|
|
457
457
|
aria-label="Menu toggle"
|
|
458
458
|
disabled
|
|
459
459
|
>
|
|
460
|
-
<span class="pf-
|
|
461
|
-
<span class="pf-
|
|
460
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
461
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
462
462
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
463
463
|
</span>
|
|
464
464
|
</span>
|
|
@@ -471,25 +471,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
471
471
|
|
|
472
472
|
```html
|
|
473
473
|
<div
|
|
474
|
-
class="pf-
|
|
474
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-primary"
|
|
475
475
|
id="split-button-checkbox-primary-example"
|
|
476
476
|
>
|
|
477
477
|
<label
|
|
478
|
-
class="pf-
|
|
478
|
+
class="pf-v6-c-check"
|
|
479
479
|
for="split-button-checkbox-primary-example-input"
|
|
480
480
|
>
|
|
481
|
-
<input class="pf-
|
|
482
|
-
<label class="pf-
|
|
481
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
482
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
483
483
|
</label>
|
|
484
484
|
<button
|
|
485
|
-
class="pf-
|
|
485
|
+
class="pf-v6-c-menu-toggle__button"
|
|
486
486
|
type="button"
|
|
487
487
|
aria-expanded="false"
|
|
488
488
|
id="split-button-checkbox-primary-example-toggle-button"
|
|
489
489
|
aria-label="Menu toggle"
|
|
490
490
|
>
|
|
491
|
-
<span class="pf-
|
|
492
|
-
<span class="pf-
|
|
491
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
492
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
493
493
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
494
494
|
</span>
|
|
495
495
|
</span>
|
|
@@ -497,25 +497,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
497
497
|
</div>
|
|
498
498
|
|
|
499
499
|
<div
|
|
500
|
-
class="pf-
|
|
500
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-primary"
|
|
501
501
|
id="split-button-checkbox-primary-expanded-example"
|
|
502
502
|
>
|
|
503
503
|
<label
|
|
504
|
-
class="pf-
|
|
504
|
+
class="pf-v6-c-check"
|
|
505
505
|
for="split-button-checkbox-primary-expanded-example-input"
|
|
506
506
|
>
|
|
507
|
-
<input class="pf-
|
|
508
|
-
<label class="pf-
|
|
507
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
508
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
509
509
|
</label>
|
|
510
510
|
<button
|
|
511
|
-
class="pf-
|
|
511
|
+
class="pf-v6-c-menu-toggle__button"
|
|
512
512
|
type="button"
|
|
513
513
|
aria-expanded="true"
|
|
514
514
|
id="split-button-checkbox-primary-expanded-example-toggle-button"
|
|
515
515
|
aria-label="Menu toggle"
|
|
516
516
|
>
|
|
517
|
-
<span class="pf-
|
|
518
|
-
<span class="pf-
|
|
517
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
518
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
519
519
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
520
520
|
</span>
|
|
521
521
|
</span>
|
|
@@ -523,26 +523,26 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
523
523
|
</div>
|
|
524
524
|
|
|
525
525
|
<div
|
|
526
|
-
class="pf-
|
|
526
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-primary"
|
|
527
527
|
id="split-button-checkbox-primary-disabled-example"
|
|
528
528
|
>
|
|
529
529
|
<label
|
|
530
|
-
class="pf-
|
|
530
|
+
class="pf-v6-c-check"
|
|
531
531
|
for="split-button-checkbox-primary-disabled-example-input"
|
|
532
532
|
>
|
|
533
|
-
<input class="pf-
|
|
534
|
-
<label class="pf-
|
|
533
|
+
<input class="pf-v6-c-check__input" type="checkbox" disabled />
|
|
534
|
+
<label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
|
|
535
535
|
</label>
|
|
536
536
|
<button
|
|
537
|
-
class="pf-
|
|
537
|
+
class="pf-v6-c-menu-toggle__button"
|
|
538
538
|
type="button"
|
|
539
539
|
aria-expanded="false"
|
|
540
540
|
id="split-button-checkbox-primary-disabled-example-toggle-button"
|
|
541
541
|
aria-label="Menu toggle"
|
|
542
542
|
disabled
|
|
543
543
|
>
|
|
544
|
-
<span class="pf-
|
|
545
|
-
<span class="pf-
|
|
544
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
545
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
546
546
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
547
547
|
</span>
|
|
548
548
|
</span>
|
|
@@ -555,25 +555,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
555
555
|
|
|
556
556
|
```html
|
|
557
557
|
<div
|
|
558
|
-
class="pf-
|
|
558
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-secondary"
|
|
559
559
|
id="split-button-checkbox-secondary-example"
|
|
560
560
|
>
|
|
561
561
|
<label
|
|
562
|
-
class="pf-
|
|
562
|
+
class="pf-v6-c-check"
|
|
563
563
|
for="split-button-checkbox-secondary-example-input"
|
|
564
564
|
>
|
|
565
|
-
<input class="pf-
|
|
566
|
-
<label class="pf-
|
|
565
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
566
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
567
567
|
</label>
|
|
568
568
|
<button
|
|
569
|
-
class="pf-
|
|
569
|
+
class="pf-v6-c-menu-toggle__button"
|
|
570
570
|
type="button"
|
|
571
571
|
aria-expanded="false"
|
|
572
572
|
id="split-button-checkbox-secondary-example-toggle-button"
|
|
573
573
|
aria-label="Menu toggle"
|
|
574
574
|
>
|
|
575
|
-
<span class="pf-
|
|
576
|
-
<span class="pf-
|
|
575
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
576
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
577
577
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
578
578
|
</span>
|
|
579
579
|
</span>
|
|
@@ -581,25 +581,25 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
581
581
|
</div>
|
|
582
582
|
|
|
583
583
|
<div
|
|
584
|
-
class="pf-
|
|
584
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-secondary"
|
|
585
585
|
id="split-button-checkbox-secondary-expanded-example"
|
|
586
586
|
>
|
|
587
587
|
<label
|
|
588
|
-
class="pf-
|
|
588
|
+
class="pf-v6-c-check"
|
|
589
589
|
for="split-button-checkbox-secondary-expanded-example-input"
|
|
590
590
|
>
|
|
591
|
-
<input class="pf-
|
|
592
|
-
<label class="pf-
|
|
591
|
+
<input class="pf-v6-c-check__input" type="checkbox" />
|
|
592
|
+
<label class="pf-v6-c-check__label" for="-input">10 selected</label>
|
|
593
593
|
</label>
|
|
594
594
|
<button
|
|
595
|
-
class="pf-
|
|
595
|
+
class="pf-v6-c-menu-toggle__button"
|
|
596
596
|
type="button"
|
|
597
597
|
aria-expanded="true"
|
|
598
598
|
id="split-button-checkbox-secondary-expanded-example-toggle-button"
|
|
599
599
|
aria-label="Menu toggle"
|
|
600
600
|
>
|
|
601
|
-
<span class="pf-
|
|
602
|
-
<span class="pf-
|
|
601
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
602
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
603
603
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
604
604
|
</span>
|
|
605
605
|
</span>
|
|
@@ -607,26 +607,26 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
607
607
|
</div>
|
|
608
608
|
|
|
609
609
|
<div
|
|
610
|
-
class="pf-
|
|
610
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-disabled pf-m-secondary"
|
|
611
611
|
id="split-button-checkbox-secondary-disabled-example"
|
|
612
612
|
>
|
|
613
613
|
<label
|
|
614
|
-
class="pf-
|
|
614
|
+
class="pf-v6-c-check"
|
|
615
615
|
for="split-button-checkbox-secondary-disabled-example-input"
|
|
616
616
|
>
|
|
617
|
-
<input class="pf-
|
|
618
|
-
<label class="pf-
|
|
617
|
+
<input class="pf-v6-c-check__input" type="checkbox" disabled />
|
|
618
|
+
<label class="pf-v6-c-check__label pf-m-disabled" for="-input">10 selected</label>
|
|
619
619
|
</label>
|
|
620
620
|
<button
|
|
621
|
-
class="pf-
|
|
621
|
+
class="pf-v6-c-menu-toggle__button"
|
|
622
622
|
type="button"
|
|
623
623
|
aria-expanded="false"
|
|
624
624
|
id="split-button-checkbox-secondary-disabled-example-toggle-button"
|
|
625
625
|
aria-label="Menu toggle"
|
|
626
626
|
disabled
|
|
627
627
|
>
|
|
628
|
-
<span class="pf-
|
|
629
|
-
<span class="pf-
|
|
628
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
629
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
630
630
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
631
631
|
</span>
|
|
632
632
|
</span>
|
|
@@ -639,19 +639,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
639
639
|
|
|
640
640
|
```html
|
|
641
641
|
<div
|
|
642
|
-
class="pf-
|
|
642
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action"
|
|
643
643
|
id="split-button-checkbox-with-toggle-action-example"
|
|
644
644
|
>
|
|
645
|
-
<button class="pf-
|
|
645
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
646
646
|
<button
|
|
647
|
-
class="pf-
|
|
647
|
+
class="pf-v6-c-menu-toggle__button"
|
|
648
648
|
type="button"
|
|
649
649
|
aria-expanded="false"
|
|
650
650
|
id="split-button-checkbox-with-toggle-action-example-toggle-button"
|
|
651
651
|
aria-label="Menu toggle"
|
|
652
652
|
>
|
|
653
|
-
<span class="pf-
|
|
654
|
-
<span class="pf-
|
|
653
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
654
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
655
655
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
656
656
|
</span>
|
|
657
657
|
</span>
|
|
@@ -659,19 +659,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
659
659
|
</div>
|
|
660
660
|
|
|
661
661
|
<div
|
|
662
|
-
class="pf-
|
|
662
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action"
|
|
663
663
|
id="split-button-checkbox-with-toggle-action-expanded-example"
|
|
664
664
|
>
|
|
665
|
-
<button class="pf-
|
|
665
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
666
666
|
<button
|
|
667
|
-
class="pf-
|
|
667
|
+
class="pf-v6-c-menu-toggle__button"
|
|
668
668
|
type="button"
|
|
669
669
|
aria-expanded="true"
|
|
670
670
|
id="split-button-checkbox-with-toggle-action-expanded-example-toggle-button"
|
|
671
671
|
aria-label="Menu toggle"
|
|
672
672
|
>
|
|
673
|
-
<span class="pf-
|
|
674
|
-
<span class="pf-
|
|
673
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
674
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
675
675
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
676
676
|
</span>
|
|
677
677
|
</span>
|
|
@@ -679,20 +679,20 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
679
679
|
</div>
|
|
680
680
|
|
|
681
681
|
<div
|
|
682
|
-
class="pf-
|
|
682
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled"
|
|
683
683
|
id="split-button-checkbox-with-toggle-action-disabled-example"
|
|
684
684
|
>
|
|
685
|
-
<button class="pf-
|
|
685
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
686
686
|
<button
|
|
687
|
-
class="pf-
|
|
687
|
+
class="pf-v6-c-menu-toggle__button"
|
|
688
688
|
type="button"
|
|
689
689
|
aria-expanded="false"
|
|
690
690
|
id="split-button-checkbox-with-toggle-action-disabled-example-toggle-button"
|
|
691
691
|
aria-label="Menu toggle"
|
|
692
692
|
disabled
|
|
693
693
|
>
|
|
694
|
-
<span class="pf-
|
|
695
|
-
<span class="pf-
|
|
694
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
695
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
696
696
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
697
697
|
</span>
|
|
698
698
|
</span>
|
|
@@ -705,19 +705,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
705
705
|
|
|
706
706
|
```html
|
|
707
707
|
<div
|
|
708
|
-
class="pf-
|
|
708
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-primary"
|
|
709
709
|
id="split-button-checkbox-with-toggle-action-primary-example"
|
|
710
710
|
>
|
|
711
|
-
<button class="pf-
|
|
711
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
712
712
|
<button
|
|
713
|
-
class="pf-
|
|
713
|
+
class="pf-v6-c-menu-toggle__button"
|
|
714
714
|
type="button"
|
|
715
715
|
aria-expanded="false"
|
|
716
716
|
id="split-button-checkbox-with-toggle-action-primary-example-toggle-button"
|
|
717
717
|
aria-label="Menu toggle"
|
|
718
718
|
>
|
|
719
|
-
<span class="pf-
|
|
720
|
-
<span class="pf-
|
|
719
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
720
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
721
721
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
722
722
|
</span>
|
|
723
723
|
</span>
|
|
@@ -725,19 +725,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
725
725
|
</div>
|
|
726
726
|
|
|
727
727
|
<div
|
|
728
|
-
class="pf-
|
|
728
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-primary"
|
|
729
729
|
id="split-button-checkbox-with-toggle-action-primary-expanded-example"
|
|
730
730
|
>
|
|
731
|
-
<button class="pf-
|
|
731
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
732
732
|
<button
|
|
733
|
-
class="pf-
|
|
733
|
+
class="pf-v6-c-menu-toggle__button"
|
|
734
734
|
type="button"
|
|
735
735
|
aria-expanded="true"
|
|
736
736
|
id="split-button-checkbox-with-toggle-action-primary-expanded-example-toggle-button"
|
|
737
737
|
aria-label="Menu toggle"
|
|
738
738
|
>
|
|
739
|
-
<span class="pf-
|
|
740
|
-
<span class="pf-
|
|
739
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
740
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
741
741
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
742
742
|
</span>
|
|
743
743
|
</span>
|
|
@@ -745,20 +745,20 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
745
745
|
</div>
|
|
746
746
|
|
|
747
747
|
<div
|
|
748
|
-
class="pf-
|
|
748
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-primary"
|
|
749
749
|
id="split-button-checkbox-with-toggle-action-primary-disabled-example"
|
|
750
750
|
>
|
|
751
|
-
<button class="pf-
|
|
751
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
752
752
|
<button
|
|
753
|
-
class="pf-
|
|
753
|
+
class="pf-v6-c-menu-toggle__button"
|
|
754
754
|
type="button"
|
|
755
755
|
aria-expanded="false"
|
|
756
756
|
id="split-button-checkbox-with-toggle-action-primary-disabled-example-toggle-button"
|
|
757
757
|
aria-label="Menu toggle"
|
|
758
758
|
disabled
|
|
759
759
|
>
|
|
760
|
-
<span class="pf-
|
|
761
|
-
<span class="pf-
|
|
760
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
761
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
762
762
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
763
763
|
</span>
|
|
764
764
|
</span>
|
|
@@ -771,19 +771,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
771
771
|
|
|
772
772
|
```html
|
|
773
773
|
<div
|
|
774
|
-
class="pf-
|
|
774
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-secondary"
|
|
775
775
|
id="split-button-checkbox-with-toggle-action-secondary-example"
|
|
776
776
|
>
|
|
777
|
-
<button class="pf-
|
|
777
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
778
778
|
<button
|
|
779
|
-
class="pf-
|
|
779
|
+
class="pf-v6-c-menu-toggle__button"
|
|
780
780
|
type="button"
|
|
781
781
|
aria-expanded="false"
|
|
782
782
|
id="split-button-checkbox-with-toggle-action-secondary-example-toggle-button"
|
|
783
783
|
aria-label="Menu toggle"
|
|
784
784
|
>
|
|
785
|
-
<span class="pf-
|
|
786
|
-
<span class="pf-
|
|
785
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
786
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
787
787
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
788
788
|
</span>
|
|
789
789
|
</span>
|
|
@@ -791,19 +791,19 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
791
791
|
</div>
|
|
792
792
|
|
|
793
793
|
<div
|
|
794
|
-
class="pf-
|
|
794
|
+
class="pf-v6-c-menu-toggle pf-m-expanded pf-m-split-button pf-m-action pf-m-secondary"
|
|
795
795
|
id="split-button-checkbox-with-toggle-action-secondary-expanded-example"
|
|
796
796
|
>
|
|
797
|
-
<button class="pf-
|
|
797
|
+
<button class="pf-v6-c-menu-toggle__button" type="button">Action</button>
|
|
798
798
|
<button
|
|
799
|
-
class="pf-
|
|
799
|
+
class="pf-v6-c-menu-toggle__button"
|
|
800
800
|
type="button"
|
|
801
801
|
aria-expanded="true"
|
|
802
802
|
id="split-button-checkbox-with-toggle-action-secondary-expanded-example-toggle-button"
|
|
803
803
|
aria-label="Menu toggle"
|
|
804
804
|
>
|
|
805
|
-
<span class="pf-
|
|
806
|
-
<span class="pf-
|
|
805
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
806
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
807
807
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
808
808
|
</span>
|
|
809
809
|
</span>
|
|
@@ -811,20 +811,20 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
811
811
|
</div>
|
|
812
812
|
|
|
813
813
|
<div
|
|
814
|
-
class="pf-
|
|
814
|
+
class="pf-v6-c-menu-toggle pf-m-split-button pf-m-action pf-m-disabled pf-m-secondary"
|
|
815
815
|
id="split-button-checkbox-with-toggle-action-secondary-disabled-example"
|
|
816
816
|
>
|
|
817
|
-
<button class="pf-
|
|
817
|
+
<button class="pf-v6-c-menu-toggle__button" type="button" disabled>Action</button>
|
|
818
818
|
<button
|
|
819
|
-
class="pf-
|
|
819
|
+
class="pf-v6-c-menu-toggle__button"
|
|
820
820
|
type="button"
|
|
821
821
|
aria-expanded="false"
|
|
822
822
|
id="split-button-checkbox-with-toggle-action-secondary-disabled-example-toggle-button"
|
|
823
823
|
aria-label="Menu toggle"
|
|
824
824
|
disabled
|
|
825
825
|
>
|
|
826
|
-
<span class="pf-
|
|
827
|
-
<span class="pf-
|
|
826
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
827
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
828
828
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
829
829
|
</span>
|
|
830
830
|
</span>
|
|
@@ -837,16 +837,16 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
837
837
|
|
|
838
838
|
```html
|
|
839
839
|
<button
|
|
840
|
-
class="pf-
|
|
840
|
+
class="pf-v6-c-menu-toggle pf-m-secondary"
|
|
841
841
|
type="button"
|
|
842
842
|
aria-expanded="false"
|
|
843
843
|
>
|
|
844
|
-
<span class="pf-
|
|
844
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
845
845
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
846
846
|
</span>
|
|
847
|
-
<span class="pf-
|
|
848
|
-
<span class="pf-
|
|
849
|
-
<span class="pf-
|
|
847
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
848
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
849
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
850
850
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
851
851
|
</span>
|
|
852
852
|
</span>
|
|
@@ -854,17 +854,17 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
854
854
|
|
|
855
855
|
|
|
856
856
|
<button
|
|
857
|
-
class="pf-
|
|
857
|
+
class="pf-v6-c-menu-toggle pf-m-secondary pf-m-disabled"
|
|
858
858
|
type="button"
|
|
859
859
|
aria-expanded="false"
|
|
860
860
|
disabled
|
|
861
861
|
>
|
|
862
|
-
<span class="pf-
|
|
862
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
863
863
|
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
864
864
|
</span>
|
|
865
|
-
<span class="pf-
|
|
866
|
-
<span class="pf-
|
|
867
|
-
<span class="pf-
|
|
865
|
+
<span class="pf-v6-c-menu-toggle__text">Icon</span>
|
|
866
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
867
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
868
868
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
869
869
|
</span>
|
|
870
870
|
</span>
|
|
@@ -875,17 +875,17 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
875
875
|
### With avatar and text
|
|
876
876
|
|
|
877
877
|
```html
|
|
878
|
-
<button class="pf-
|
|
879
|
-
<span class="pf-
|
|
878
|
+
<button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false">
|
|
879
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
880
880
|
<img
|
|
881
|
-
class="pf-
|
|
881
|
+
class="pf-v6-c-avatar"
|
|
882
882
|
alt="Avatar image"
|
|
883
883
|
src="/assets/images/img_avatar-light.svg"
|
|
884
884
|
/>
|
|
885
885
|
</span>
|
|
886
|
-
<span class="pf-
|
|
887
|
-
<span class="pf-
|
|
888
|
-
<span class="pf-
|
|
886
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
887
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
888
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
889
889
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
890
890
|
</span>
|
|
891
891
|
</span>
|
|
@@ -893,20 +893,20 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
893
893
|
|
|
894
894
|
|
|
895
895
|
<button
|
|
896
|
-
class="pf-
|
|
896
|
+
class="pf-v6-c-menu-toggle pf-m-expanded"
|
|
897
897
|
type="button"
|
|
898
898
|
aria-expanded="true"
|
|
899
899
|
>
|
|
900
|
-
<span class="pf-
|
|
900
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
901
901
|
<img
|
|
902
|
-
class="pf-
|
|
902
|
+
class="pf-v6-c-avatar"
|
|
903
903
|
alt="Avatar image"
|
|
904
904
|
src="/assets/images/img_avatar-light.svg"
|
|
905
905
|
/>
|
|
906
906
|
</span>
|
|
907
|
-
<span class="pf-
|
|
908
|
-
<span class="pf-
|
|
909
|
-
<span class="pf-
|
|
907
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
908
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
909
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
910
910
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
911
911
|
</span>
|
|
912
912
|
</span>
|
|
@@ -914,21 +914,21 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
914
914
|
|
|
915
915
|
|
|
916
916
|
<button
|
|
917
|
-
class="pf-
|
|
917
|
+
class="pf-v6-c-menu-toggle pf-m-disabled"
|
|
918
918
|
type="button"
|
|
919
919
|
aria-expanded="false"
|
|
920
920
|
disabled
|
|
921
921
|
>
|
|
922
|
-
<span class="pf-
|
|
922
|
+
<span class="pf-v6-c-menu-toggle__icon">
|
|
923
923
|
<img
|
|
924
|
-
class="pf-
|
|
924
|
+
class="pf-v6-c-avatar"
|
|
925
925
|
alt="Avatar image"
|
|
926
926
|
src="/assets/images/img_avatar-light.svg"
|
|
927
927
|
/>
|
|
928
928
|
</span>
|
|
929
|
-
<span class="pf-
|
|
930
|
-
<span class="pf-
|
|
931
|
-
<span class="pf-
|
|
929
|
+
<span class="pf-v6-c-menu-toggle__text">Ned Username</span>
|
|
930
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
931
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
932
932
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
933
933
|
</span>
|
|
934
934
|
</span>
|
|
@@ -940,13 +940,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
940
940
|
|
|
941
941
|
```html
|
|
942
942
|
<button
|
|
943
|
-
class="pf-
|
|
943
|
+
class="pf-v6-c-menu-toggle pf-m-full-height"
|
|
944
944
|
type="button"
|
|
945
945
|
aria-expanded="false"
|
|
946
946
|
>
|
|
947
|
-
<span class="pf-
|
|
948
|
-
<span class="pf-
|
|
949
|
-
<span class="pf-
|
|
947
|
+
<span class="pf-v6-c-menu-toggle__text">Full height</span>
|
|
948
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
949
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
950
950
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
951
951
|
</span>
|
|
952
952
|
</span>
|
|
@@ -958,13 +958,13 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
958
958
|
|
|
959
959
|
```html
|
|
960
960
|
<button
|
|
961
|
-
class="pf-
|
|
961
|
+
class="pf-v6-c-menu-toggle pf-m-full-width"
|
|
962
962
|
type="button"
|
|
963
963
|
aria-expanded="false"
|
|
964
964
|
>
|
|
965
|
-
<span class="pf-
|
|
966
|
-
<span class="pf-
|
|
967
|
-
<span class="pf-
|
|
965
|
+
<span class="pf-v6-c-menu-toggle__text">Full width</span>
|
|
966
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
967
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
968
968
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
969
969
|
</span>
|
|
970
970
|
</span>
|
|
@@ -976,23 +976,23 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
976
976
|
|
|
977
977
|
```html
|
|
978
978
|
<div
|
|
979
|
-
class="pf-
|
|
979
|
+
class="pf-v6-c-menu-toggle pf-m-typeahead pf-m-full-width"
|
|
980
980
|
id="typeahead-example"
|
|
981
981
|
>
|
|
982
|
-
<div class="pf-
|
|
983
|
-
<div class="pf-
|
|
984
|
-
<span class="pf-
|
|
982
|
+
<div class="pf-v6-c-text-input-group pf-m-plain">
|
|
983
|
+
<div class="pf-v6-c-text-input-group__main">
|
|
984
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
985
985
|
<input
|
|
986
|
-
class="pf-
|
|
986
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
987
987
|
type="text"
|
|
988
988
|
value
|
|
989
989
|
aria-label="Type to filter"
|
|
990
990
|
/>
|
|
991
991
|
</span>
|
|
992
992
|
</div>
|
|
993
|
-
<div class="pf-
|
|
993
|
+
<div class="pf-v6-c-text-input-group__utilities">
|
|
994
994
|
<button
|
|
995
|
-
class="pf-
|
|
995
|
+
class="pf-v6-c-button pf-m-plain"
|
|
996
996
|
type="button"
|
|
997
997
|
aria-label="Clear input"
|
|
998
998
|
>
|
|
@@ -1001,14 +1001,14 @@ cssPrefix: pf-v5-c-menu-toggle
|
|
|
1001
1001
|
</div>
|
|
1002
1002
|
</div>
|
|
1003
1003
|
<button
|
|
1004
|
-
class="pf-
|
|
1004
|
+
class="pf-v6-c-menu-toggle__button"
|
|
1005
1005
|
type="button"
|
|
1006
1006
|
aria-expanded="false"
|
|
1007
1007
|
id="typeahead-example-toggle-button"
|
|
1008
1008
|
aria-label="Menu toggle"
|
|
1009
1009
|
>
|
|
1010
|
-
<span class="pf-
|
|
1011
|
-
<span class="pf-
|
|
1010
|
+
<span class="pf-v6-c-menu-toggle__controls">
|
|
1011
|
+
<span class="pf-v6-c-menu-toggle__toggle-icon">
|
|
1012
1012
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1013
1013
|
</span>
|
|
1014
1014
|
</span>
|