@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41
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/README.md +4 -4
- package/RELEASE-NOTES.md +18 -1
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/images/pfbg-icon.svg +1 -0
- package/assets/pficon/pficon.scss +7 -2
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/_base.scss +0 -18
- package/base/_chart-globals.scss +0 -4
- package/base/_common.scss +0 -22
- package/base/_fa-icons.scss +1 -2
- package/base/_fonts.scss +22 -27
- package/base/_globals.scss +92 -86
- package/base/_icons.scss +1 -28
- package/base/_svg-icons.scss +6 -0
- package/base/_variables.scss +4 -4
- package/base/patternfly-common.css +0 -10
- package/base/patternfly-fa-icons.css +1 -1
- package/base/patternfly-fonts.css +17 -17
- package/base/patternfly-globals.css +35 -41
- package/base/patternfly-icons.css +8 -22
- package/base/patternfly-pf-icons.css +6 -2
- package/base/patternfly-themes.css +0 -42
- package/base/patternfly-variables.css +3 -3
- package/base/themes/dark/_globals.scss +1 -1
- package/base/themes/dark/_variables.scss +1 -1
- package/components/AboutModalBox/about-modal-box.css +20 -50
- package/components/AboutModalBox/about-modal-box.scss +22 -14
- package/components/Accordion/accordion.css +2 -0
- package/components/Accordion/accordion.scss +2 -0
- package/components/Alert/alert.css +17 -8
- package/components/Alert/alert.scss +21 -7
- package/components/Alert/themes/dark/alert.scss +1 -1
- package/components/AppLauncher/app-launcher.css +2 -0
- package/components/AppLauncher/app-launcher.scss +2 -0
- package/components/Avatar/avatar.scss +2 -2
- package/components/BackgroundImage/background-image.css +8 -35
- package/components/BackgroundImage/background-image.scss +17 -43
- package/components/Banner/banner.css +14 -52
- package/components/Banner/banner.scss +9 -13
- package/components/Breadcrumb/breadcrumb.css +2 -0
- package/components/Breadcrumb/breadcrumb.scss +2 -0
- package/components/CalendarMonth/calendar-month.css +2 -2
- package/components/CalendarMonth/calendar-month.scss +3 -3
- package/components/Card/card.css +115 -50
- package/components/Card/card.scss +164 -63
- package/components/Chip/chip.css +33 -24
- package/components/Chip/chip.scss +40 -31
- package/components/ChipGroup/chip-group.css +27 -17
- package/components/ChipGroup/chip-group.scss +36 -22
- package/components/Content/content.css +11 -5
- package/components/Content/content.scss +17 -9
- package/components/ContextSelector/context-selector.css +13 -6
- package/components/ContextSelector/context-selector.scss +14 -7
- package/components/DataList/data-list-grid.css +7 -7
- package/components/DataList/data-list-grid.scss +1 -1
- package/components/DataList/data-list.css +46 -40
- package/components/DataList/data-list.scss +37 -28
- package/components/DatePicker/date-picker.css +0 -8
- package/components/DatePicker/date-picker.scss +0 -9
- package/components/DescriptionList/description-list.css +7 -7
- package/components/DescriptionList/description-list.scss +7 -7
- package/components/Divider/divider.css +2 -2
- package/components/Divider/divider.scss +3 -3
- package/components/Drawer/drawer.css +15 -16
- package/components/Drawer/drawer.scss +2 -3
- package/components/Dropdown/dropdown.css +26 -25
- package/components/Dropdown/dropdown.scss +17 -18
- package/components/DualListSelector/dual-list-selector.css +1 -1
- package/components/DualListSelector/dual-list-selector.scss +1 -1
- package/components/EmptyState/empty-state.css +46 -52
- package/components/EmptyState/empty-state.scss +58 -57
- package/components/ExpandableSection/expandable-section.css +2 -0
- package/components/ExpandableSection/expandable-section.scss +2 -0
- package/components/Form/form.css +14 -12
- package/components/Form/form.scss +9 -7
- package/components/FormControl/form-control.css +2 -5
- package/components/FormControl/themes/dark/form-control.scss +2 -6
- package/components/HelperText/helper-text.css +4 -0
- package/components/HelperText/helper-text.scss +5 -0
- package/components/Hint/hint.css +2 -2
- package/components/Hint/hint.scss +2 -2
- package/components/Icon/icon.css +3 -3
- package/components/Icon/icon.scss +3 -3
- package/components/InputGroup/input-group.css +61 -85
- package/components/InputGroup/input-group.scss +55 -61
- package/components/InputGroup/themes/dark/input-group.scss +11 -25
- package/components/Label/label.css +49 -36
- package/components/Label/label.scss +53 -38
- package/components/Label/themes/dark/label.scss +2 -2
- package/components/LabelGroup/label-group.css +26 -22
- package/components/LabelGroup/label-group.scss +31 -26
- package/components/LogViewer/log-viewer.css +0 -38
- package/components/Login/login.css +20 -60
- package/components/Login/login.scss +16 -18
- package/components/Login/themes/dark/login.scss +4 -0
- package/components/Masthead/masthead.css +4 -42
- package/components/Masthead/masthead.scss +4 -4
- package/components/Menu/menu.css +9 -6
- package/components/Menu/menu.scss +34 -31
- package/components/MenuToggle/menu-toggle.css +3 -1
- package/components/MenuToggle/menu-toggle.scss +3 -1
- package/components/ModalBox/modal-box.css +12 -11
- package/components/ModalBox/modal-box.scss +14 -14
- package/components/MultipleFileUpload/multiple-file-upload.css +6 -6
- package/components/MultipleFileUpload/multiple-file-upload.scss +6 -6
- package/components/Nav/nav.css +1 -1
- package/components/Nav/nav.scss +2 -2
- package/components/NotificationDrawer/notification-drawer.css +8 -8
- package/components/NotificationDrawer/notification-drawer.scss +8 -8
- package/components/OptionsMenu/options-menu.css +8 -10
- package/components/OptionsMenu/options-menu.scss +9 -11
- package/components/Page/page.css +101 -122
- package/components/Page/page.scss +49 -21
- package/components/Pagination/pagination.css +2 -110
- package/components/Pagination/pagination.scss +0 -6
- package/components/Popover/popover.css +31 -37
- package/components/Popover/popover.scss +32 -37
- package/components/Popover/themes/dark/popover.scss +3 -9
- package/components/Progress/progress.css +13 -10
- package/components/Progress/progress.scss +13 -10
- package/components/ProgressStepper/progress-stepper.css +5 -5
- package/components/ProgressStepper/progress-stepper.scss +5 -5
- package/components/SearchInput/search-input.css +4 -2
- package/components/SearchInput/search-input.scss +4 -2
- package/components/Select/select.css +1 -1
- package/components/Select/select.scss +1 -1
- package/components/Sidebar/sidebar.css +69 -26
- package/components/Sidebar/sidebar.scss +84 -27
- package/components/SimpleList/simple-list.css +1 -1
- package/components/SimpleList/simple-list.scss +2 -2
- package/components/Spinner/spinner.css +4 -133
- package/components/Spinner/spinner.scss +4 -173
- package/components/Table/table-grid.css +28 -28
- package/components/Table/table-scrollable.css +31 -26
- package/components/Table/table-scrollable.scss +33 -28
- package/components/Table/table-tree-view.css +14 -4
- package/components/Table/table-tree-view.scss +15 -0
- package/components/Table/table.css +67 -65
- package/components/Table/table.scss +65 -62
- package/components/Tabs/tabs.css +0 -4
- package/components/Tabs/tabs.scss +0 -7
- package/components/TextInputGroup/text-input-group.css +6 -4
- package/components/TextInputGroup/text-input-group.scss +6 -5
- package/components/Tile/tile.css +1 -1
- package/components/Tile/tile.scss +1 -1
- package/components/Timestamp/timestamp.css +3 -3
- package/components/Timestamp/timestamp.scss +3 -3
- package/components/Toolbar/toolbar.css +78 -43
- package/components/Toolbar/toolbar.scss +50 -10
- package/components/Tooltip/themes/dark/tooltip.scss +1 -11
- package/components/Tooltip/tooltip.css +7 -12
- package/components/Tooltip/tooltip.scss +6 -3
- package/components/TreeView/tree-view.css +7 -15
- package/components/TreeView/tree-view.scss +7 -18
- package/components/Wizard/wizard.css +16 -39
- package/components/Wizard/wizard.scss +20 -2
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +20 -14
- package/docs/components/Accordion/examples/Accordion.md +12 -12
- package/docs/components/ActionList/examples/ActionList.md +6 -6
- package/docs/components/Alert/examples/Alert.md +29 -29
- package/docs/components/AlertGroup/examples/AlertGroup.md +15 -15
- package/docs/components/AppLauncher/examples/application-launcher.md +52 -46
- package/docs/components/Avatar/examples/Avatar.md +11 -11
- package/docs/components/BackToTop/examples/BackToTop.md +4 -4
- package/docs/components/Backdrop/examples/Backdrop.md +4 -4
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +13 -29
- package/docs/components/Badge/examples/Badge.md +5 -5
- package/docs/components/Banner/examples/Banner.md +8 -8
- package/docs/components/Brand/examples/Brand.md +9 -9
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +20 -20
- package/docs/components/Button/examples/Button.md +51 -55
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +301 -284
- package/docs/components/Card/examples/Card.md +676 -116
- package/docs/components/Check/examples/Check.md +16 -19
- package/docs/components/Chip/examples/Chip.md +70 -52
- package/docs/components/ChipGroup/examples/ChipGroup.md +452 -673
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +22 -22
- package/docs/components/CodeBlock/examples/CodeBlock.md +9 -9
- package/docs/components/CodeEditor/examples/CodeEditor.md +54 -35
- package/docs/components/Content/examples/Content.md +37 -9
- package/docs/components/ContextSelector/examples/context-selector.css +5 -1
- package/docs/components/ContextSelector/examples/context-selector.md +87 -80
- package/docs/components/DataList/examples/DataList.md +239 -202
- package/docs/components/DatePicker/examples/DatePicker.md +139 -104
- package/docs/components/DescriptionList/examples/DescriptionList.md +24 -24
- package/docs/components/Divider/examples/Divider.md +10 -10
- package/docs/components/DragDrop/examples/DragDrop.md +5 -5
- package/docs/components/Drawer/examples/Drawer.md +43 -43
- package/docs/components/Dropdown/examples/Dropdown.css +5 -2
- package/docs/components/Dropdown/examples/Dropdown.md +125 -100
- package/docs/components/DualListSelector/examples/DualListSelector.md +201 -197
- package/docs/components/EmptyState/examples/EmptyState.md +130 -82
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +23 -23
- package/docs/components/FileUpload/examples/FileUpload.md +150 -110
- package/docs/components/Form/examples/Form.md +152 -130
- package/docs/components/FormControl/examples/FormControl.md +21 -20
- package/docs/components/HelperText/examples/HelperText.md +24 -35
- package/docs/components/Hint/examples/Hint.md +7 -7
- package/docs/components/Icon/examples/Icon.md +11 -12
- package/docs/components/InlineEdit/examples/InlineEdit.md +29 -27
- package/docs/components/InputGroup/examples/InputGroup.md +229 -179
- package/docs/components/JumpLinks/examples/JumpLinks.md +35 -35
- package/docs/components/Label/examples/Label.md +1427 -746
- package/docs/components/LabelGroup/examples/LabelGroup.md +295 -242
- package/docs/components/List/examples/List.md +18 -18
- package/docs/components/LogViewer/examples/LogViewer.md +79 -74
- package/docs/components/Login/examples/Login.md +103 -181
- package/docs/components/Masthead/examples/masthead.md +9 -9
- package/docs/components/Menu/examples/Menu.md +93 -85
- package/docs/components/MenuToggle/examples/MenuToggle.md +29 -28
- package/docs/components/ModalBox/examples/ModalBox.md +113 -92
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +27 -26
- package/docs/components/Nav/examples/Navigation.md +69 -69
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +8 -8
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +64 -64
- package/docs/components/NumberInput/examples/NumberInput.md +311 -239
- package/docs/components/OptionsMenu/examples/options-menu.md +28 -28
- package/docs/components/OverflowMenu/examples/overflow-menu.md +25 -25
- package/docs/components/Page/examples/Page.css +7 -1
- package/docs/components/Page/examples/Page.md +81 -54
- package/docs/components/Pagination/examples/Pagination.md +27 -27
- package/docs/components/Panel/examples/Panel.md +10 -10
- package/docs/components/Popover/examples/Popover.md +206 -149
- package/docs/components/Progress/examples/Progress.md +32 -61
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +45 -39
- package/docs/components/Radio/examples/Radio.md +12 -11
- package/docs/components/SearchInput/examples/SearchInput.md +185 -148
- package/docs/components/Select/examples/Select.md +372 -318
- package/docs/components/Sidebar/examples/Sidebar.md +70 -14
- package/docs/components/SimpleList/examples/SimpleList.md +15 -15
- package/docs/components/Skeleton/examples/Skeleton.md +8 -8
- package/docs/components/SkipToContent/examples/SkipToContent.md +5 -5
- package/docs/components/Slider/examples/Slider.md +84 -62
- package/docs/components/Spinner/examples/Spinner.md +18 -67
- package/docs/components/Switch/examples/Switch.md +19 -19
- package/docs/components/TabContent/examples/TabContent.md +13 -13
- package/docs/components/Table/examples/Table.css +4 -0
- package/docs/components/Table/examples/Table.md +5212 -5750
- package/docs/components/Tabs/examples/Tabs.md +155 -155
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +523 -406
- package/docs/components/Tile/examples/Tile.md +16 -17
- package/docs/components/Timestamp/examples/Timestamp.md +5 -5
- package/docs/components/Title/examples/Title.md +17 -17
- package/docs/components/ToggleGroup/examples/toggle-group.md +13 -13
- package/docs/components/Toolbar/examples/Toolbar.md +848 -726
- package/docs/components/Tooltip/examples/Tooltip.md +10 -10
- package/docs/components/TreeView/examples/TreeView.md +34 -34
- package/docs/components/Truncate/examples/Truncate.md +4 -5
- package/docs/components/Wizard/examples/Wizard.md +119 -127
- package/docs/demos/AboutModal/examples/AboutModal.md +4 -5
- package/docs/demos/Alert/examples/Alert.md +118 -71
- package/docs/demos/BackToTop/examples/BackToTop.md +4 -4
- package/docs/demos/Banner/examples/Banner.md +8 -9
- package/docs/demos/Button/examples/Button.md +10 -5
- package/docs/demos/Card/examples/Card.md +246 -168
- package/docs/demos/CardView/examples/CardView.md +57 -30
- package/docs/demos/ContextSelector/examples/ContextSelector.md +18 -18
- package/docs/demos/Dashboard/examples/Dashboard.md +61 -38
- package/docs/demos/DataList/examples/DataList.md +312 -255
- package/docs/demos/DescriptionList/examples/DescriptionList.md +33 -22
- package/docs/demos/Drawer/examples/Drawer.md +24 -22
- package/docs/demos/Form/examples/BasicForms.md +220 -213
- package/docs/demos/HelperText/examples/HelperText.md +16 -14
- package/docs/demos/JumpLinks/examples/JumpLinks.md +28 -28
- package/docs/demos/Masthead/examples/Masthead.md +302 -284
- package/docs/demos/Modal/examples/Modal.md +54 -66
- package/docs/demos/Nav/examples/Nav.md +47 -47
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +70 -58
- package/docs/demos/Page/examples/Page.md +982 -51
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +22 -18
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +121 -106
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +345 -311
- package/docs/demos/Skeleton/examples/Skeleton.md +4 -4
- package/docs/demos/Table/examples/Table.md +3373 -1333
- package/docs/demos/Tabs/examples/Tabs.md +141 -90
- package/docs/demos/Toolbar/examples/Toolbar.md +1994 -329
- package/docs/demos/Wizard/examples/Wizard.md +289 -266
- package/docs/layouts/Bullseye/examples/Bullseye.md +4 -4
- package/docs/layouts/Flex/examples/Flex.md +98 -98
- package/docs/layouts/Gallery/examples/Gallery.md +7 -7
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/layouts/Level/examples/Level.md +5 -5
- package/docs/layouts/Split/examples/Split.md +7 -7
- package/docs/layouts/Stack/examples/Stack.md +6 -6
- package/docs/utilities/Accessibility/examples/Accessibility.md +5 -5
- package/docs/utilities/Alignment/examples/Alignment.md +7 -7
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +13 -13
- package/docs/utilities/BoxShadow/examples/box-shadow.md +23 -23
- package/docs/utilities/Display/examples/Display.md +12 -12
- package/docs/utilities/Flex/examples/Flex.md +35 -35
- package/docs/utilities/Float/examples/Float.md +5 -5
- package/docs/utilities/Sizing/examples/Sizing.md +51 -51
- package/docs/utilities/Spacing/examples/Spacing.md +35 -35
- package/docs/utilities/Text/examples/Text.md +31 -31
- package/icons/{pf-icons.json → pf-icons.mjs} +2 -1
- package/layouts/Gallery/gallery.css +1 -1
- package/layouts/Gallery/gallery.scss +1 -1
- package/layouts/Grid/grid.css +7 -7
- package/layouts/Grid/grid.scss +2 -2
- package/package.json +60 -66
- package/patternfly-addons.css +48 -48
- package/{patternfly-base-no-reset.css → patternfly-base-no-globals.css} +28 -73
- package/{patternfly-base-no-reset.scss → patternfly-base-no-globals.scss} +1 -0
- package/patternfly-base.css +63 -114
- package/{patternfly-no-reset.css → patternfly-no-globals.css} +1206 -2449
- package/{patternfly-no-reset.scss → patternfly-no-globals.scss} +1 -0
- package/patternfly.css +1234 -2483
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/functions.scss +8 -24
- package/sass-utilities/mixins.scss +15 -39
- package/sass-utilities/placeholders.scss +0 -23
- package/sass-utilities/scss-variables.scss +5 -6
- package/sass-utilities/themes/dark/placeholders.scss +0 -22
- package/sass-utilities/themes/dark/scss-variables.scss +1 -1
- package/utilities/Spacing/spacing.scss +2 -2
- package/utilities/Text/text.css +48 -48
- package/utilities/Text/text.scss +6 -6
- package/utilities/Text/themes/dark/text.scss +2 -2
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Black.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-BlackItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Bold.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-BoldItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Italic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Medium.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-MediumItalic.woff +0 -0
- package/assets/fonts/RedHatDisplay/RedHatDisplay-Regular.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Bold.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-BoldItalic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Italic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Medium.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-MediumItalic.woff +0 -0
- package/assets/fonts/RedHatText/RedHatText-Regular.woff +0 -0
- package/assets/fonts/webfonts/fa-solid-900.woff +0 -0
- package/assets/pficon/pficon.woff +0 -0
- package/base/_shield-inheritable.scss +0 -69
- package/base/_shield-noninheritable.scss +0 -13
- package/base/patternfly-shield-inheritable.css +0 -66
- package/base/patternfly-shield-inheritable.scss +0 -4
- package/base/patternfly-shield-noninheritable.css +0 -9
- package/base/patternfly-shield-noninheritable.scss +0 -4
- package/sass-utilities/bs-variables.scss +0 -709
|
@@ -96,10 +96,10 @@ cssPrefix: pf-c-tabs
|
|
|
96
96
|
|
|
97
97
|
### Default tabs usage
|
|
98
98
|
|
|
99
|
-
| Class
|
|
100
|
-
|
|
|
101
|
-
| `.pf-m-disabled`
|
|
102
|
-
| `.pf-m-aria-disabled` | `.pf-c-tabs__link`
|
|
99
|
+
| Class | Applied to | Outcome |
|
|
100
|
+
| -- | -- | -- |
|
|
101
|
+
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
|
|
102
|
+
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
|
|
103
103
|
|
|
104
104
|
## Overflow
|
|
105
105
|
|
|
@@ -213,14 +213,14 @@ cssPrefix: pf-c-tabs
|
|
|
213
213
|
|
|
214
214
|
### Overflow beginning of list usage
|
|
215
215
|
|
|
216
|
-
| Class
|
|
217
|
-
|
|
|
218
|
-
| `.pf-m-scrollable`
|
|
219
|
-
| `.pf-c-tabs__scroll-button` | `<button>`
|
|
216
|
+
| Class | Applied to | Outcome |
|
|
217
|
+
| -- | -- | -- |
|
|
218
|
+
| `.pf-m-scrollable` | `.pf-c-tabs` | Enables the directional scroll buttons. |
|
|
219
|
+
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
220
220
|
|
|
221
221
|
### Horizontal overflow example
|
|
222
222
|
|
|
223
|
-
```html
|
|
223
|
+
```html
|
|
224
224
|
<div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow">
|
|
225
225
|
<ul class="pf-c-tabs__list">
|
|
226
226
|
<li class="pf-c-tabs__item">
|
|
@@ -297,7 +297,7 @@ cssPrefix: pf-c-tabs
|
|
|
297
297
|
|
|
298
298
|
### Horizontal overflow expanded example
|
|
299
299
|
|
|
300
|
-
```html
|
|
300
|
+
```html
|
|
301
301
|
<div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-expanded">
|
|
302
302
|
<ul class="pf-c-tabs__list">
|
|
303
303
|
<li class="pf-c-tabs__item">
|
|
@@ -375,7 +375,7 @@ cssPrefix: pf-c-tabs
|
|
|
375
375
|
|
|
376
376
|
### Horizontal overflow selected example
|
|
377
377
|
|
|
378
|
-
```html
|
|
378
|
+
```html
|
|
379
379
|
<div class="pf-c-tabs pf-m-overflow" id="horizontal-overflow-selected">
|
|
380
380
|
<ul class="pf-c-tabs__list">
|
|
381
381
|
<li class="pf-c-tabs__item">
|
|
@@ -1653,10 +1653,10 @@ cssPrefix: pf-c-tabs
|
|
|
1653
1653
|
|
|
1654
1654
|
### Insets usage
|
|
1655
1655
|
|
|
1656
|
-
| Class
|
|
1657
|
-
|
|
|
1656
|
+
| Class | Applied to | Outcome |
|
|
1657
|
+
| -- | -- | -- |
|
|
1658
1658
|
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of other adjacent components. |
|
|
1659
|
-
| `.pf-m-page-insets`
|
|
1659
|
+
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
1660
1660
|
|
|
1661
1661
|
## Icons
|
|
1662
1662
|
|
|
@@ -2318,9 +2318,9 @@ cssPrefix: pf-c-tabs
|
|
|
2318
2318
|
|
|
2319
2319
|
### Filled usage
|
|
2320
2320
|
|
|
2321
|
-
| Class
|
|
2322
|
-
|
|
|
2323
|
-
| `.pf-m-fill`
|
|
2321
|
+
| Class | Applied to | Outcome |
|
|
2322
|
+
| -- | -- | -- |
|
|
2323
|
+
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. **Required** |
|
|
2324
2324
|
|
|
2325
2325
|
## Tabs as navigation
|
|
2326
2326
|
|
|
@@ -2585,7 +2585,7 @@ cssPrefix: pf-c-tabs
|
|
|
2585
2585
|
|
|
2586
2586
|
### Help button example
|
|
2587
2587
|
|
|
2588
|
-
```html
|
|
2588
|
+
```html
|
|
2589
2589
|
<div class="pf-c-tabs pf-m-scrollable" id="help-button-default-example">
|
|
2590
2590
|
<button
|
|
2591
2591
|
class="pf-c-tabs__scroll-button"
|
|
@@ -2604,7 +2604,7 @@ cssPrefix: pf-c-tabs
|
|
|
2604
2604
|
>
|
|
2605
2605
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
2606
2606
|
</button>
|
|
2607
|
-
<span class="pf-c-tabs__item-action
|
|
2607
|
+
<span class="pf-c-tabs__item-action">
|
|
2608
2608
|
<button
|
|
2609
2609
|
class="pf-c-button pf-m-plain"
|
|
2610
2610
|
type="button"
|
|
@@ -2624,7 +2624,7 @@ cssPrefix: pf-c-tabs
|
|
|
2624
2624
|
>
|
|
2625
2625
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2626
2626
|
</button>
|
|
2627
|
-
<span class="pf-c-tabs__item-action
|
|
2627
|
+
<span class="pf-c-tabs__item-action">
|
|
2628
2628
|
<button
|
|
2629
2629
|
class="pf-c-button pf-m-plain"
|
|
2630
2630
|
type="button"
|
|
@@ -2644,7 +2644,7 @@ cssPrefix: pf-c-tabs
|
|
|
2644
2644
|
>
|
|
2645
2645
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
2646
2646
|
</button>
|
|
2647
|
-
<span class="pf-c-tabs__item-action
|
|
2647
|
+
<span class="pf-c-tabs__item-action">
|
|
2648
2648
|
<button
|
|
2649
2649
|
class="pf-c-button pf-m-plain"
|
|
2650
2650
|
type="button"
|
|
@@ -2666,7 +2666,7 @@ cssPrefix: pf-c-tabs
|
|
|
2666
2666
|
>
|
|
2667
2667
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2668
2668
|
</button>
|
|
2669
|
-
<span class="pf-c-tabs__item-action
|
|
2669
|
+
<span class="pf-c-tabs__item-action">
|
|
2670
2670
|
<button
|
|
2671
2671
|
class="pf-c-button pf-m-plain"
|
|
2672
2672
|
type="button"
|
|
@@ -2687,7 +2687,7 @@ cssPrefix: pf-c-tabs
|
|
|
2687
2687
|
>
|
|
2688
2688
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2689
2689
|
</button>
|
|
2690
|
-
<span class="pf-c-tabs__item-action
|
|
2690
|
+
<span class="pf-c-tabs__item-action">
|
|
2691
2691
|
<button
|
|
2692
2692
|
class="pf-c-button pf-m-plain"
|
|
2693
2693
|
type="button"
|
|
@@ -2708,7 +2708,7 @@ cssPrefix: pf-c-tabs
|
|
|
2708
2708
|
>
|
|
2709
2709
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
2710
2710
|
</button>
|
|
2711
|
-
<span class="pf-c-tabs__item-action
|
|
2711
|
+
<span class="pf-c-tabs__item-action">
|
|
2712
2712
|
<button
|
|
2713
2713
|
class="pf-c-button pf-m-plain"
|
|
2714
2714
|
type="button"
|
|
@@ -2729,7 +2729,7 @@ cssPrefix: pf-c-tabs
|
|
|
2729
2729
|
>
|
|
2730
2730
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
2731
2731
|
</button>
|
|
2732
|
-
<span class="pf-c-tabs__item-action
|
|
2732
|
+
<span class="pf-c-tabs__item-action">
|
|
2733
2733
|
<button
|
|
2734
2734
|
class="pf-c-button pf-m-plain"
|
|
2735
2735
|
type="button"
|
|
@@ -2773,7 +2773,7 @@ cssPrefix: pf-c-tabs
|
|
|
2773
2773
|
>
|
|
2774
2774
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
2775
2775
|
</button>
|
|
2776
|
-
<span class="pf-c-tabs__item-action
|
|
2776
|
+
<span class="pf-c-tabs__item-action">
|
|
2777
2777
|
<button
|
|
2778
2778
|
class="pf-c-button pf-m-plain"
|
|
2779
2779
|
type="button"
|
|
@@ -2793,7 +2793,7 @@ cssPrefix: pf-c-tabs
|
|
|
2793
2793
|
>
|
|
2794
2794
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2795
2795
|
</button>
|
|
2796
|
-
<span class="pf-c-tabs__item-action
|
|
2796
|
+
<span class="pf-c-tabs__item-action">
|
|
2797
2797
|
<button
|
|
2798
2798
|
class="pf-c-button pf-m-plain"
|
|
2799
2799
|
type="button"
|
|
@@ -2813,7 +2813,7 @@ cssPrefix: pf-c-tabs
|
|
|
2813
2813
|
>
|
|
2814
2814
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
2815
2815
|
</button>
|
|
2816
|
-
<span class="pf-c-tabs__item-action
|
|
2816
|
+
<span class="pf-c-tabs__item-action">
|
|
2817
2817
|
<button
|
|
2818
2818
|
class="pf-c-button pf-m-plain"
|
|
2819
2819
|
type="button"
|
|
@@ -2835,7 +2835,7 @@ cssPrefix: pf-c-tabs
|
|
|
2835
2835
|
>
|
|
2836
2836
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
2837
2837
|
</button>
|
|
2838
|
-
<span class="pf-c-tabs__item-action
|
|
2838
|
+
<span class="pf-c-tabs__item-action">
|
|
2839
2839
|
<button
|
|
2840
2840
|
class="pf-c-button pf-m-plain"
|
|
2841
2841
|
type="button"
|
|
@@ -2856,7 +2856,7 @@ cssPrefix: pf-c-tabs
|
|
|
2856
2856
|
>
|
|
2857
2857
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
2858
2858
|
</button>
|
|
2859
|
-
<span class="pf-c-tabs__item-action
|
|
2859
|
+
<span class="pf-c-tabs__item-action">
|
|
2860
2860
|
<button
|
|
2861
2861
|
class="pf-c-button pf-m-plain"
|
|
2862
2862
|
type="button"
|
|
@@ -2877,7 +2877,7 @@ cssPrefix: pf-c-tabs
|
|
|
2877
2877
|
>
|
|
2878
2878
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
2879
2879
|
</button>
|
|
2880
|
-
<span class="pf-c-tabs__item-action
|
|
2880
|
+
<span class="pf-c-tabs__item-action">
|
|
2881
2881
|
<button
|
|
2882
2882
|
class="pf-c-button pf-m-plain"
|
|
2883
2883
|
type="button"
|
|
@@ -2898,7 +2898,7 @@ cssPrefix: pf-c-tabs
|
|
|
2898
2898
|
>
|
|
2899
2899
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
2900
2900
|
</button>
|
|
2901
|
-
<span class="pf-c-tabs__item-action
|
|
2901
|
+
<span class="pf-c-tabs__item-action">
|
|
2902
2902
|
<button
|
|
2903
2903
|
class="pf-c-button pf-m-plain"
|
|
2904
2904
|
type="button"
|
|
@@ -2945,7 +2945,7 @@ cssPrefix: pf-c-tabs
|
|
|
2945
2945
|
>
|
|
2946
2946
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
2947
2947
|
</button>
|
|
2948
|
-
<span class="pf-c-tabs__item-action
|
|
2948
|
+
<span class="pf-c-tabs__item-action">
|
|
2949
2949
|
<button
|
|
2950
2950
|
class="pf-c-button pf-m-plain"
|
|
2951
2951
|
type="button"
|
|
@@ -2965,7 +2965,7 @@ cssPrefix: pf-c-tabs
|
|
|
2965
2965
|
>
|
|
2966
2966
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
2967
2967
|
</button>
|
|
2968
|
-
<span class="pf-c-tabs__item-action
|
|
2968
|
+
<span class="pf-c-tabs__item-action">
|
|
2969
2969
|
<button
|
|
2970
2970
|
class="pf-c-button pf-m-plain"
|
|
2971
2971
|
type="button"
|
|
@@ -2985,7 +2985,7 @@ cssPrefix: pf-c-tabs
|
|
|
2985
2985
|
>
|
|
2986
2986
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
2987
2987
|
</button>
|
|
2988
|
-
<span class="pf-c-tabs__item-action
|
|
2988
|
+
<span class="pf-c-tabs__item-action">
|
|
2989
2989
|
<button
|
|
2990
2990
|
class="pf-c-button pf-m-plain"
|
|
2991
2991
|
type="button"
|
|
@@ -3007,7 +3007,7 @@ cssPrefix: pf-c-tabs
|
|
|
3007
3007
|
>
|
|
3008
3008
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
3009
3009
|
</button>
|
|
3010
|
-
<span class="pf-c-tabs__item-action
|
|
3010
|
+
<span class="pf-c-tabs__item-action">
|
|
3011
3011
|
<button
|
|
3012
3012
|
class="pf-c-button pf-m-plain"
|
|
3013
3013
|
type="button"
|
|
@@ -3028,7 +3028,7 @@ cssPrefix: pf-c-tabs
|
|
|
3028
3028
|
>
|
|
3029
3029
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
3030
3030
|
</button>
|
|
3031
|
-
<span class="pf-c-tabs__item-action
|
|
3031
|
+
<span class="pf-c-tabs__item-action">
|
|
3032
3032
|
<button
|
|
3033
3033
|
class="pf-c-button pf-m-plain"
|
|
3034
3034
|
type="button"
|
|
@@ -3049,7 +3049,7 @@ cssPrefix: pf-c-tabs
|
|
|
3049
3049
|
>
|
|
3050
3050
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
3051
3051
|
</button>
|
|
3052
|
-
<span class="pf-c-tabs__item-action
|
|
3052
|
+
<span class="pf-c-tabs__item-action">
|
|
3053
3053
|
<button
|
|
3054
3054
|
class="pf-c-button pf-m-plain"
|
|
3055
3055
|
type="button"
|
|
@@ -3070,7 +3070,7 @@ cssPrefix: pf-c-tabs
|
|
|
3070
3070
|
>
|
|
3071
3071
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
3072
3072
|
</button>
|
|
3073
|
-
<span class="pf-c-tabs__item-action
|
|
3073
|
+
<span class="pf-c-tabs__item-action">
|
|
3074
3074
|
<button
|
|
3075
3075
|
class="pf-c-button pf-m-plain"
|
|
3076
3076
|
type="button"
|
|
@@ -3117,7 +3117,7 @@ cssPrefix: pf-c-tabs
|
|
|
3117
3117
|
</span>
|
|
3118
3118
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
3119
3119
|
</button>
|
|
3120
|
-
<span class="pf-c-tabs__item-action
|
|
3120
|
+
<span class="pf-c-tabs__item-action">
|
|
3121
3121
|
<button
|
|
3122
3122
|
class="pf-c-button pf-m-plain"
|
|
3123
3123
|
type="button"
|
|
@@ -3140,7 +3140,7 @@ cssPrefix: pf-c-tabs
|
|
|
3140
3140
|
</span>
|
|
3141
3141
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3142
3142
|
</button>
|
|
3143
|
-
<span class="pf-c-tabs__item-action
|
|
3143
|
+
<span class="pf-c-tabs__item-action">
|
|
3144
3144
|
<button
|
|
3145
3145
|
class="pf-c-button pf-m-plain"
|
|
3146
3146
|
type="button"
|
|
@@ -3163,7 +3163,7 @@ cssPrefix: pf-c-tabs
|
|
|
3163
3163
|
</span>
|
|
3164
3164
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
3165
3165
|
</button>
|
|
3166
|
-
<span class="pf-c-tabs__item-action
|
|
3166
|
+
<span class="pf-c-tabs__item-action">
|
|
3167
3167
|
<button
|
|
3168
3168
|
class="pf-c-button pf-m-plain"
|
|
3169
3169
|
type="button"
|
|
@@ -3188,7 +3188,7 @@ cssPrefix: pf-c-tabs
|
|
|
3188
3188
|
</span>
|
|
3189
3189
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
3190
3190
|
</button>
|
|
3191
|
-
<span class="pf-c-tabs__item-action
|
|
3191
|
+
<span class="pf-c-tabs__item-action">
|
|
3192
3192
|
<button
|
|
3193
3193
|
class="pf-c-button pf-m-plain"
|
|
3194
3194
|
type="button"
|
|
@@ -3212,7 +3212,7 @@ cssPrefix: pf-c-tabs
|
|
|
3212
3212
|
</span>
|
|
3213
3213
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
3214
3214
|
</button>
|
|
3215
|
-
<span class="pf-c-tabs__item-action
|
|
3215
|
+
<span class="pf-c-tabs__item-action">
|
|
3216
3216
|
<button
|
|
3217
3217
|
class="pf-c-button pf-m-plain"
|
|
3218
3218
|
type="button"
|
|
@@ -3236,7 +3236,7 @@ cssPrefix: pf-c-tabs
|
|
|
3236
3236
|
</span>
|
|
3237
3237
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
3238
3238
|
</button>
|
|
3239
|
-
<span class="pf-c-tabs__item-action
|
|
3239
|
+
<span class="pf-c-tabs__item-action">
|
|
3240
3240
|
<button
|
|
3241
3241
|
class="pf-c-button pf-m-plain"
|
|
3242
3242
|
type="button"
|
|
@@ -3260,7 +3260,7 @@ cssPrefix: pf-c-tabs
|
|
|
3260
3260
|
</span>
|
|
3261
3261
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
3262
3262
|
</button>
|
|
3263
|
-
<span class="pf-c-tabs__item-action
|
|
3263
|
+
<span class="pf-c-tabs__item-action">
|
|
3264
3264
|
<button
|
|
3265
3265
|
class="pf-c-button pf-m-plain"
|
|
3266
3266
|
type="button"
|
|
@@ -3304,7 +3304,7 @@ cssPrefix: pf-c-tabs
|
|
|
3304
3304
|
>
|
|
3305
3305
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
3306
3306
|
</button>
|
|
3307
|
-
<span class="pf-c-tabs__item-action
|
|
3307
|
+
<span class="pf-c-tabs__item-action">
|
|
3308
3308
|
<button
|
|
3309
3309
|
class="pf-c-button pf-m-plain"
|
|
3310
3310
|
type="button"
|
|
@@ -3324,7 +3324,7 @@ cssPrefix: pf-c-tabs
|
|
|
3324
3324
|
>
|
|
3325
3325
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3326
3326
|
</button>
|
|
3327
|
-
<span class="pf-c-tabs__item-action
|
|
3327
|
+
<span class="pf-c-tabs__item-action">
|
|
3328
3328
|
<button
|
|
3329
3329
|
class="pf-c-button pf-m-plain"
|
|
3330
3330
|
type="button"
|
|
@@ -3344,7 +3344,7 @@ cssPrefix: pf-c-tabs
|
|
|
3344
3344
|
>
|
|
3345
3345
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
3346
3346
|
</button>
|
|
3347
|
-
<span class="pf-c-tabs__item-action
|
|
3347
|
+
<span class="pf-c-tabs__item-action">
|
|
3348
3348
|
<button
|
|
3349
3349
|
class="pf-c-button pf-m-plain"
|
|
3350
3350
|
type="button"
|
|
@@ -3393,7 +3393,7 @@ cssPrefix: pf-c-tabs
|
|
|
3393
3393
|
>
|
|
3394
3394
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
3395
3395
|
</button>
|
|
3396
|
-
<span class="pf-c-tabs__item-action
|
|
3396
|
+
<span class="pf-c-tabs__item-action">
|
|
3397
3397
|
<button
|
|
3398
3398
|
class="pf-c-button pf-m-plain"
|
|
3399
3399
|
type="button"
|
|
@@ -3413,7 +3413,7 @@ cssPrefix: pf-c-tabs
|
|
|
3413
3413
|
>
|
|
3414
3414
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3415
3415
|
</button>
|
|
3416
|
-
<span class="pf-c-tabs__item-action
|
|
3416
|
+
<span class="pf-c-tabs__item-action">
|
|
3417
3417
|
<button
|
|
3418
3418
|
class="pf-c-button pf-m-plain"
|
|
3419
3419
|
type="button"
|
|
@@ -3433,7 +3433,7 @@ cssPrefix: pf-c-tabs
|
|
|
3433
3433
|
>
|
|
3434
3434
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
3435
3435
|
</button>
|
|
3436
|
-
<span class="pf-c-tabs__item-action
|
|
3436
|
+
<span class="pf-c-tabs__item-action">
|
|
3437
3437
|
<button
|
|
3438
3438
|
class="pf-c-button pf-m-plain"
|
|
3439
3439
|
type="button"
|
|
@@ -3455,7 +3455,7 @@ cssPrefix: pf-c-tabs
|
|
|
3455
3455
|
>
|
|
3456
3456
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
3457
3457
|
</button>
|
|
3458
|
-
<span class="pf-c-tabs__item-action
|
|
3458
|
+
<span class="pf-c-tabs__item-action">
|
|
3459
3459
|
<button
|
|
3460
3460
|
class="pf-c-button pf-m-plain"
|
|
3461
3461
|
type="button"
|
|
@@ -3476,7 +3476,7 @@ cssPrefix: pf-c-tabs
|
|
|
3476
3476
|
>
|
|
3477
3477
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
3478
3478
|
</button>
|
|
3479
|
-
<span class="pf-c-tabs__item-action
|
|
3479
|
+
<span class="pf-c-tabs__item-action">
|
|
3480
3480
|
<button
|
|
3481
3481
|
class="pf-c-button pf-m-plain"
|
|
3482
3482
|
type="button"
|
|
@@ -3497,7 +3497,7 @@ cssPrefix: pf-c-tabs
|
|
|
3497
3497
|
>
|
|
3498
3498
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
3499
3499
|
</button>
|
|
3500
|
-
<span class="pf-c-tabs__item-action
|
|
3500
|
+
<span class="pf-c-tabs__item-action">
|
|
3501
3501
|
<button
|
|
3502
3502
|
class="pf-c-button pf-m-plain"
|
|
3503
3503
|
type="button"
|
|
@@ -3518,7 +3518,7 @@ cssPrefix: pf-c-tabs
|
|
|
3518
3518
|
>
|
|
3519
3519
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
3520
3520
|
</button>
|
|
3521
|
-
<span class="pf-c-tabs__item-action
|
|
3521
|
+
<span class="pf-c-tabs__item-action">
|
|
3522
3522
|
<button
|
|
3523
3523
|
class="pf-c-button pf-m-plain"
|
|
3524
3524
|
type="button"
|
|
@@ -3561,7 +3561,7 @@ cssPrefix: pf-c-tabs
|
|
|
3561
3561
|
>
|
|
3562
3562
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
3563
3563
|
</button>
|
|
3564
|
-
<span class="pf-c-tabs__item-action
|
|
3564
|
+
<span class="pf-c-tabs__item-action">
|
|
3565
3565
|
<button
|
|
3566
3566
|
class="pf-c-button pf-m-plain"
|
|
3567
3567
|
type="button"
|
|
@@ -3581,7 +3581,7 @@ cssPrefix: pf-c-tabs
|
|
|
3581
3581
|
>
|
|
3582
3582
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
3583
3583
|
</button>
|
|
3584
|
-
<span class="pf-c-tabs__item-action
|
|
3584
|
+
<span class="pf-c-tabs__item-action">
|
|
3585
3585
|
<button
|
|
3586
3586
|
class="pf-c-button pf-m-plain"
|
|
3587
3587
|
type="button"
|
|
@@ -3601,7 +3601,7 @@ cssPrefix: pf-c-tabs
|
|
|
3601
3601
|
>
|
|
3602
3602
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
3603
3603
|
</button>
|
|
3604
|
-
<span class="pf-c-tabs__item-action
|
|
3604
|
+
<span class="pf-c-tabs__item-action">
|
|
3605
3605
|
<button
|
|
3606
3606
|
class="pf-c-button pf-m-plain"
|
|
3607
3607
|
type="button"
|
|
@@ -3623,7 +3623,7 @@ cssPrefix: pf-c-tabs
|
|
|
3623
3623
|
>
|
|
3624
3624
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
3625
3625
|
</button>
|
|
3626
|
-
<span class="pf-c-tabs__item-action
|
|
3626
|
+
<span class="pf-c-tabs__item-action">
|
|
3627
3627
|
<button
|
|
3628
3628
|
class="pf-c-button pf-m-plain"
|
|
3629
3629
|
type="button"
|
|
@@ -3644,7 +3644,7 @@ cssPrefix: pf-c-tabs
|
|
|
3644
3644
|
>
|
|
3645
3645
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
3646
3646
|
</button>
|
|
3647
|
-
<span class="pf-c-tabs__item-action
|
|
3647
|
+
<span class="pf-c-tabs__item-action">
|
|
3648
3648
|
<button
|
|
3649
3649
|
class="pf-c-button pf-m-plain"
|
|
3650
3650
|
type="button"
|
|
@@ -3665,7 +3665,7 @@ cssPrefix: pf-c-tabs
|
|
|
3665
3665
|
>
|
|
3666
3666
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
3667
3667
|
</button>
|
|
3668
|
-
<span class="pf-c-tabs__item-action
|
|
3668
|
+
<span class="pf-c-tabs__item-action">
|
|
3669
3669
|
<button
|
|
3670
3670
|
class="pf-c-button pf-m-plain"
|
|
3671
3671
|
type="button"
|
|
@@ -3686,7 +3686,7 @@ cssPrefix: pf-c-tabs
|
|
|
3686
3686
|
>
|
|
3687
3687
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
3688
3688
|
</button>
|
|
3689
|
-
<span class="pf-c-tabs__item-action
|
|
3689
|
+
<span class="pf-c-tabs__item-action">
|
|
3690
3690
|
<button
|
|
3691
3691
|
class="pf-c-button pf-m-plain"
|
|
3692
3692
|
type="button"
|
|
@@ -3713,7 +3713,7 @@ cssPrefix: pf-c-tabs
|
|
|
3713
3713
|
|
|
3714
3714
|
### Close button example
|
|
3715
3715
|
|
|
3716
|
-
```html
|
|
3716
|
+
```html
|
|
3717
3717
|
<div class="pf-c-tabs pf-m-scrollable" id="close-button-default-example">
|
|
3718
3718
|
<button
|
|
3719
3719
|
class="pf-c-tabs__scroll-button"
|
|
@@ -4841,7 +4841,7 @@ cssPrefix: pf-c-tabs
|
|
|
4841
4841
|
|
|
4842
4842
|
### Help and close button example
|
|
4843
4843
|
|
|
4844
|
-
```html
|
|
4844
|
+
```html
|
|
4845
4845
|
<div class="pf-c-tabs pf-m-scrollable" id="help-close-button-default-example">
|
|
4846
4846
|
<button
|
|
4847
4847
|
class="pf-c-tabs__scroll-button"
|
|
@@ -4860,7 +4860,7 @@ cssPrefix: pf-c-tabs
|
|
|
4860
4860
|
>
|
|
4861
4861
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
4862
4862
|
</button>
|
|
4863
|
-
<span class="pf-c-tabs__item-action
|
|
4863
|
+
<span class="pf-c-tabs__item-action">
|
|
4864
4864
|
<button
|
|
4865
4865
|
class="pf-c-button pf-m-plain"
|
|
4866
4866
|
type="button"
|
|
@@ -4892,7 +4892,7 @@ cssPrefix: pf-c-tabs
|
|
|
4892
4892
|
>
|
|
4893
4893
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
4894
4894
|
</button>
|
|
4895
|
-
<span class="pf-c-tabs__item-action
|
|
4895
|
+
<span class="pf-c-tabs__item-action">
|
|
4896
4896
|
<button
|
|
4897
4897
|
class="pf-c-button pf-m-plain"
|
|
4898
4898
|
type="button"
|
|
@@ -4924,7 +4924,7 @@ cssPrefix: pf-c-tabs
|
|
|
4924
4924
|
>
|
|
4925
4925
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
4926
4926
|
</button>
|
|
4927
|
-
<span class="pf-c-tabs__item-action
|
|
4927
|
+
<span class="pf-c-tabs__item-action">
|
|
4928
4928
|
<button
|
|
4929
4929
|
class="pf-c-button pf-m-plain"
|
|
4930
4930
|
type="button"
|
|
@@ -4958,7 +4958,7 @@ cssPrefix: pf-c-tabs
|
|
|
4958
4958
|
>
|
|
4959
4959
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
4960
4960
|
</button>
|
|
4961
|
-
<span class="pf-c-tabs__item-action
|
|
4961
|
+
<span class="pf-c-tabs__item-action">
|
|
4962
4962
|
<button
|
|
4963
4963
|
class="pf-c-button pf-m-plain"
|
|
4964
4964
|
type="button"
|
|
@@ -4991,7 +4991,7 @@ cssPrefix: pf-c-tabs
|
|
|
4991
4991
|
>
|
|
4992
4992
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
4993
4993
|
</button>
|
|
4994
|
-
<span class="pf-c-tabs__item-action
|
|
4994
|
+
<span class="pf-c-tabs__item-action">
|
|
4995
4995
|
<button
|
|
4996
4996
|
class="pf-c-button pf-m-plain"
|
|
4997
4997
|
type="button"
|
|
@@ -5024,7 +5024,7 @@ cssPrefix: pf-c-tabs
|
|
|
5024
5024
|
>
|
|
5025
5025
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
5026
5026
|
</button>
|
|
5027
|
-
<span class="pf-c-tabs__item-action
|
|
5027
|
+
<span class="pf-c-tabs__item-action">
|
|
5028
5028
|
<button
|
|
5029
5029
|
class="pf-c-button pf-m-plain"
|
|
5030
5030
|
type="button"
|
|
@@ -5058,7 +5058,7 @@ cssPrefix: pf-c-tabs
|
|
|
5058
5058
|
>
|
|
5059
5059
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
5060
5060
|
</button>
|
|
5061
|
-
<span class="pf-c-tabs__item-action
|
|
5061
|
+
<span class="pf-c-tabs__item-action">
|
|
5062
5062
|
<button
|
|
5063
5063
|
class="pf-c-button pf-m-plain"
|
|
5064
5064
|
type="button"
|
|
@@ -5092,7 +5092,7 @@ cssPrefix: pf-c-tabs
|
|
|
5092
5092
|
>
|
|
5093
5093
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
5094
5094
|
</button>
|
|
5095
|
-
<span class="pf-c-tabs__item-action
|
|
5095
|
+
<span class="pf-c-tabs__item-action">
|
|
5096
5096
|
<button
|
|
5097
5097
|
class="pf-c-button pf-m-plain"
|
|
5098
5098
|
type="button"
|
|
@@ -5126,7 +5126,7 @@ cssPrefix: pf-c-tabs
|
|
|
5126
5126
|
>
|
|
5127
5127
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
5128
5128
|
</button>
|
|
5129
|
-
<span class="pf-c-tabs__item-action
|
|
5129
|
+
<span class="pf-c-tabs__item-action">
|
|
5130
5130
|
<button
|
|
5131
5131
|
class="pf-c-button pf-m-plain"
|
|
5132
5132
|
type="button"
|
|
@@ -5185,7 +5185,7 @@ cssPrefix: pf-c-tabs
|
|
|
5185
5185
|
>
|
|
5186
5186
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
5187
5187
|
</button>
|
|
5188
|
-
<span class="pf-c-tabs__item-action
|
|
5188
|
+
<span class="pf-c-tabs__item-action">
|
|
5189
5189
|
<button
|
|
5190
5190
|
class="pf-c-button pf-m-plain"
|
|
5191
5191
|
type="button"
|
|
@@ -5217,7 +5217,7 @@ cssPrefix: pf-c-tabs
|
|
|
5217
5217
|
>
|
|
5218
5218
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
5219
5219
|
</button>
|
|
5220
|
-
<span class="pf-c-tabs__item-action
|
|
5220
|
+
<span class="pf-c-tabs__item-action">
|
|
5221
5221
|
<button
|
|
5222
5222
|
class="pf-c-button pf-m-plain"
|
|
5223
5223
|
type="button"
|
|
@@ -5249,7 +5249,7 @@ cssPrefix: pf-c-tabs
|
|
|
5249
5249
|
>
|
|
5250
5250
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
5251
5251
|
</button>
|
|
5252
|
-
<span class="pf-c-tabs__item-action
|
|
5252
|
+
<span class="pf-c-tabs__item-action">
|
|
5253
5253
|
<button
|
|
5254
5254
|
class="pf-c-button pf-m-plain"
|
|
5255
5255
|
type="button"
|
|
@@ -5283,7 +5283,7 @@ cssPrefix: pf-c-tabs
|
|
|
5283
5283
|
>
|
|
5284
5284
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
5285
5285
|
</button>
|
|
5286
|
-
<span class="pf-c-tabs__item-action
|
|
5286
|
+
<span class="pf-c-tabs__item-action">
|
|
5287
5287
|
<button
|
|
5288
5288
|
class="pf-c-button pf-m-plain"
|
|
5289
5289
|
type="button"
|
|
@@ -5316,7 +5316,7 @@ cssPrefix: pf-c-tabs
|
|
|
5316
5316
|
>
|
|
5317
5317
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
5318
5318
|
</button>
|
|
5319
|
-
<span class="pf-c-tabs__item-action
|
|
5319
|
+
<span class="pf-c-tabs__item-action">
|
|
5320
5320
|
<button
|
|
5321
5321
|
class="pf-c-button pf-m-plain"
|
|
5322
5322
|
type="button"
|
|
@@ -5349,7 +5349,7 @@ cssPrefix: pf-c-tabs
|
|
|
5349
5349
|
>
|
|
5350
5350
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
5351
5351
|
</button>
|
|
5352
|
-
<span class="pf-c-tabs__item-action
|
|
5352
|
+
<span class="pf-c-tabs__item-action">
|
|
5353
5353
|
<button
|
|
5354
5354
|
class="pf-c-button pf-m-plain"
|
|
5355
5355
|
type="button"
|
|
@@ -5383,7 +5383,7 @@ cssPrefix: pf-c-tabs
|
|
|
5383
5383
|
>
|
|
5384
5384
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
5385
5385
|
</button>
|
|
5386
|
-
<span class="pf-c-tabs__item-action
|
|
5386
|
+
<span class="pf-c-tabs__item-action">
|
|
5387
5387
|
<button
|
|
5388
5388
|
class="pf-c-button pf-m-plain"
|
|
5389
5389
|
type="button"
|
|
@@ -5417,7 +5417,7 @@ cssPrefix: pf-c-tabs
|
|
|
5417
5417
|
>
|
|
5418
5418
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
5419
5419
|
</button>
|
|
5420
|
-
<span class="pf-c-tabs__item-action
|
|
5420
|
+
<span class="pf-c-tabs__item-action">
|
|
5421
5421
|
<button
|
|
5422
5422
|
class="pf-c-button pf-m-plain"
|
|
5423
5423
|
type="button"
|
|
@@ -5451,7 +5451,7 @@ cssPrefix: pf-c-tabs
|
|
|
5451
5451
|
>
|
|
5452
5452
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
5453
5453
|
</button>
|
|
5454
|
-
<span class="pf-c-tabs__item-action
|
|
5454
|
+
<span class="pf-c-tabs__item-action">
|
|
5455
5455
|
<button
|
|
5456
5456
|
class="pf-c-button pf-m-plain"
|
|
5457
5457
|
type="button"
|
|
@@ -5510,7 +5510,7 @@ cssPrefix: pf-c-tabs
|
|
|
5510
5510
|
>
|
|
5511
5511
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
5512
5512
|
</button>
|
|
5513
|
-
<span class="pf-c-tabs__item-action
|
|
5513
|
+
<span class="pf-c-tabs__item-action">
|
|
5514
5514
|
<button
|
|
5515
5515
|
class="pf-c-button pf-m-plain"
|
|
5516
5516
|
type="button"
|
|
@@ -5542,7 +5542,7 @@ cssPrefix: pf-c-tabs
|
|
|
5542
5542
|
>
|
|
5543
5543
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
5544
5544
|
</button>
|
|
5545
|
-
<span class="pf-c-tabs__item-action
|
|
5545
|
+
<span class="pf-c-tabs__item-action">
|
|
5546
5546
|
<button
|
|
5547
5547
|
class="pf-c-button pf-m-plain"
|
|
5548
5548
|
type="button"
|
|
@@ -5574,7 +5574,7 @@ cssPrefix: pf-c-tabs
|
|
|
5574
5574
|
>
|
|
5575
5575
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
5576
5576
|
</button>
|
|
5577
|
-
<span class="pf-c-tabs__item-action
|
|
5577
|
+
<span class="pf-c-tabs__item-action">
|
|
5578
5578
|
<button
|
|
5579
5579
|
class="pf-c-button pf-m-plain"
|
|
5580
5580
|
type="button"
|
|
@@ -5608,7 +5608,7 @@ cssPrefix: pf-c-tabs
|
|
|
5608
5608
|
>
|
|
5609
5609
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
5610
5610
|
</button>
|
|
5611
|
-
<span class="pf-c-tabs__item-action
|
|
5611
|
+
<span class="pf-c-tabs__item-action">
|
|
5612
5612
|
<button
|
|
5613
5613
|
class="pf-c-button pf-m-plain"
|
|
5614
5614
|
type="button"
|
|
@@ -5641,7 +5641,7 @@ cssPrefix: pf-c-tabs
|
|
|
5641
5641
|
>
|
|
5642
5642
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
5643
5643
|
</button>
|
|
5644
|
-
<span class="pf-c-tabs__item-action
|
|
5644
|
+
<span class="pf-c-tabs__item-action">
|
|
5645
5645
|
<button
|
|
5646
5646
|
class="pf-c-button pf-m-plain"
|
|
5647
5647
|
type="button"
|
|
@@ -5674,7 +5674,7 @@ cssPrefix: pf-c-tabs
|
|
|
5674
5674
|
>
|
|
5675
5675
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
5676
5676
|
</button>
|
|
5677
|
-
<span class="pf-c-tabs__item-action
|
|
5677
|
+
<span class="pf-c-tabs__item-action">
|
|
5678
5678
|
<button
|
|
5679
5679
|
class="pf-c-button pf-m-plain"
|
|
5680
5680
|
type="button"
|
|
@@ -5708,7 +5708,7 @@ cssPrefix: pf-c-tabs
|
|
|
5708
5708
|
>
|
|
5709
5709
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
5710
5710
|
</button>
|
|
5711
|
-
<span class="pf-c-tabs__item-action
|
|
5711
|
+
<span class="pf-c-tabs__item-action">
|
|
5712
5712
|
<button
|
|
5713
5713
|
class="pf-c-button pf-m-plain"
|
|
5714
5714
|
type="button"
|
|
@@ -5742,7 +5742,7 @@ cssPrefix: pf-c-tabs
|
|
|
5742
5742
|
>
|
|
5743
5743
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
5744
5744
|
</button>
|
|
5745
|
-
<span class="pf-c-tabs__item-action
|
|
5745
|
+
<span class="pf-c-tabs__item-action">
|
|
5746
5746
|
<button
|
|
5747
5747
|
class="pf-c-button pf-m-plain"
|
|
5748
5748
|
type="button"
|
|
@@ -5776,7 +5776,7 @@ cssPrefix: pf-c-tabs
|
|
|
5776
5776
|
>
|
|
5777
5777
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
5778
5778
|
</button>
|
|
5779
|
-
<span class="pf-c-tabs__item-action
|
|
5779
|
+
<span class="pf-c-tabs__item-action">
|
|
5780
5780
|
<button
|
|
5781
5781
|
class="pf-c-button pf-m-plain"
|
|
5782
5782
|
type="button"
|
|
@@ -5838,7 +5838,7 @@ cssPrefix: pf-c-tabs
|
|
|
5838
5838
|
</span>
|
|
5839
5839
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
5840
5840
|
</button>
|
|
5841
|
-
<span class="pf-c-tabs__item-action
|
|
5841
|
+
<span class="pf-c-tabs__item-action">
|
|
5842
5842
|
<button
|
|
5843
5843
|
class="pf-c-button pf-m-plain"
|
|
5844
5844
|
type="button"
|
|
@@ -5873,7 +5873,7 @@ cssPrefix: pf-c-tabs
|
|
|
5873
5873
|
</span>
|
|
5874
5874
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
5875
5875
|
</button>
|
|
5876
|
-
<span class="pf-c-tabs__item-action
|
|
5876
|
+
<span class="pf-c-tabs__item-action">
|
|
5877
5877
|
<button
|
|
5878
5878
|
class="pf-c-button pf-m-plain"
|
|
5879
5879
|
type="button"
|
|
@@ -5908,7 +5908,7 @@ cssPrefix: pf-c-tabs
|
|
|
5908
5908
|
</span>
|
|
5909
5909
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
5910
5910
|
</button>
|
|
5911
|
-
<span class="pf-c-tabs__item-action
|
|
5911
|
+
<span class="pf-c-tabs__item-action">
|
|
5912
5912
|
<button
|
|
5913
5913
|
class="pf-c-button pf-m-plain"
|
|
5914
5914
|
type="button"
|
|
@@ -5945,7 +5945,7 @@ cssPrefix: pf-c-tabs
|
|
|
5945
5945
|
</span>
|
|
5946
5946
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
5947
5947
|
</button>
|
|
5948
|
-
<span class="pf-c-tabs__item-action
|
|
5948
|
+
<span class="pf-c-tabs__item-action">
|
|
5949
5949
|
<button
|
|
5950
5950
|
class="pf-c-button pf-m-plain"
|
|
5951
5951
|
type="button"
|
|
@@ -5981,7 +5981,7 @@ cssPrefix: pf-c-tabs
|
|
|
5981
5981
|
</span>
|
|
5982
5982
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
5983
5983
|
</button>
|
|
5984
|
-
<span class="pf-c-tabs__item-action
|
|
5984
|
+
<span class="pf-c-tabs__item-action">
|
|
5985
5985
|
<button
|
|
5986
5986
|
class="pf-c-button pf-m-plain"
|
|
5987
5987
|
type="button"
|
|
@@ -6017,7 +6017,7 @@ cssPrefix: pf-c-tabs
|
|
|
6017
6017
|
</span>
|
|
6018
6018
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
6019
6019
|
</button>
|
|
6020
|
-
<span class="pf-c-tabs__item-action
|
|
6020
|
+
<span class="pf-c-tabs__item-action">
|
|
6021
6021
|
<button
|
|
6022
6022
|
class="pf-c-button pf-m-plain"
|
|
6023
6023
|
type="button"
|
|
@@ -6054,7 +6054,7 @@ cssPrefix: pf-c-tabs
|
|
|
6054
6054
|
</span>
|
|
6055
6055
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
6056
6056
|
</button>
|
|
6057
|
-
<span class="pf-c-tabs__item-action
|
|
6057
|
+
<span class="pf-c-tabs__item-action">
|
|
6058
6058
|
<button
|
|
6059
6059
|
class="pf-c-button pf-m-plain"
|
|
6060
6060
|
type="button"
|
|
@@ -6091,7 +6091,7 @@ cssPrefix: pf-c-tabs
|
|
|
6091
6091
|
</span>
|
|
6092
6092
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
6093
6093
|
</button>
|
|
6094
|
-
<span class="pf-c-tabs__item-action
|
|
6094
|
+
<span class="pf-c-tabs__item-action">
|
|
6095
6095
|
<button
|
|
6096
6096
|
class="pf-c-button pf-m-plain"
|
|
6097
6097
|
type="button"
|
|
@@ -6128,7 +6128,7 @@ cssPrefix: pf-c-tabs
|
|
|
6128
6128
|
</span>
|
|
6129
6129
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
6130
6130
|
</button>
|
|
6131
|
-
<span class="pf-c-tabs__item-action
|
|
6131
|
+
<span class="pf-c-tabs__item-action">
|
|
6132
6132
|
<button
|
|
6133
6133
|
class="pf-c-button pf-m-plain"
|
|
6134
6134
|
type="button"
|
|
@@ -6184,7 +6184,7 @@ cssPrefix: pf-c-tabs
|
|
|
6184
6184
|
>
|
|
6185
6185
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
6186
6186
|
</button>
|
|
6187
|
-
<span class="pf-c-tabs__item-action
|
|
6187
|
+
<span class="pf-c-tabs__item-action">
|
|
6188
6188
|
<button
|
|
6189
6189
|
class="pf-c-button pf-m-plain"
|
|
6190
6190
|
type="button"
|
|
@@ -6216,7 +6216,7 @@ cssPrefix: pf-c-tabs
|
|
|
6216
6216
|
>
|
|
6217
6217
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
6218
6218
|
</button>
|
|
6219
|
-
<span class="pf-c-tabs__item-action
|
|
6219
|
+
<span class="pf-c-tabs__item-action">
|
|
6220
6220
|
<button
|
|
6221
6221
|
class="pf-c-button pf-m-plain"
|
|
6222
6222
|
type="button"
|
|
@@ -6248,7 +6248,7 @@ cssPrefix: pf-c-tabs
|
|
|
6248
6248
|
>
|
|
6249
6249
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
6250
6250
|
</button>
|
|
6251
|
-
<span class="pf-c-tabs__item-action
|
|
6251
|
+
<span class="pf-c-tabs__item-action">
|
|
6252
6252
|
<button
|
|
6253
6253
|
class="pf-c-button pf-m-plain"
|
|
6254
6254
|
type="button"
|
|
@@ -6309,7 +6309,7 @@ cssPrefix: pf-c-tabs
|
|
|
6309
6309
|
>
|
|
6310
6310
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
6311
6311
|
</button>
|
|
6312
|
-
<span class="pf-c-tabs__item-action
|
|
6312
|
+
<span class="pf-c-tabs__item-action">
|
|
6313
6313
|
<button
|
|
6314
6314
|
class="pf-c-button pf-m-plain"
|
|
6315
6315
|
type="button"
|
|
@@ -6341,7 +6341,7 @@ cssPrefix: pf-c-tabs
|
|
|
6341
6341
|
>
|
|
6342
6342
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
6343
6343
|
</button>
|
|
6344
|
-
<span class="pf-c-tabs__item-action
|
|
6344
|
+
<span class="pf-c-tabs__item-action">
|
|
6345
6345
|
<button
|
|
6346
6346
|
class="pf-c-button pf-m-plain"
|
|
6347
6347
|
type="button"
|
|
@@ -6373,7 +6373,7 @@ cssPrefix: pf-c-tabs
|
|
|
6373
6373
|
>
|
|
6374
6374
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
6375
6375
|
</button>
|
|
6376
|
-
<span class="pf-c-tabs__item-action
|
|
6376
|
+
<span class="pf-c-tabs__item-action">
|
|
6377
6377
|
<button
|
|
6378
6378
|
class="pf-c-button pf-m-plain"
|
|
6379
6379
|
type="button"
|
|
@@ -6407,7 +6407,7 @@ cssPrefix: pf-c-tabs
|
|
|
6407
6407
|
>
|
|
6408
6408
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
6409
6409
|
</button>
|
|
6410
|
-
<span class="pf-c-tabs__item-action
|
|
6410
|
+
<span class="pf-c-tabs__item-action">
|
|
6411
6411
|
<button
|
|
6412
6412
|
class="pf-c-button pf-m-plain"
|
|
6413
6413
|
type="button"
|
|
@@ -6440,7 +6440,7 @@ cssPrefix: pf-c-tabs
|
|
|
6440
6440
|
>
|
|
6441
6441
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
6442
6442
|
</button>
|
|
6443
|
-
<span class="pf-c-tabs__item-action
|
|
6443
|
+
<span class="pf-c-tabs__item-action">
|
|
6444
6444
|
<button
|
|
6445
6445
|
class="pf-c-button pf-m-plain"
|
|
6446
6446
|
type="button"
|
|
@@ -6473,7 +6473,7 @@ cssPrefix: pf-c-tabs
|
|
|
6473
6473
|
>
|
|
6474
6474
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
6475
6475
|
</button>
|
|
6476
|
-
<span class="pf-c-tabs__item-action
|
|
6476
|
+
<span class="pf-c-tabs__item-action">
|
|
6477
6477
|
<button
|
|
6478
6478
|
class="pf-c-button pf-m-plain"
|
|
6479
6479
|
type="button"
|
|
@@ -6507,7 +6507,7 @@ cssPrefix: pf-c-tabs
|
|
|
6507
6507
|
>
|
|
6508
6508
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
6509
6509
|
</button>
|
|
6510
|
-
<span class="pf-c-tabs__item-action
|
|
6510
|
+
<span class="pf-c-tabs__item-action">
|
|
6511
6511
|
<button
|
|
6512
6512
|
class="pf-c-button pf-m-plain"
|
|
6513
6513
|
type="button"
|
|
@@ -6541,7 +6541,7 @@ cssPrefix: pf-c-tabs
|
|
|
6541
6541
|
>
|
|
6542
6542
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
6543
6543
|
</button>
|
|
6544
|
-
<span class="pf-c-tabs__item-action
|
|
6544
|
+
<span class="pf-c-tabs__item-action">
|
|
6545
6545
|
<button
|
|
6546
6546
|
class="pf-c-button pf-m-plain"
|
|
6547
6547
|
type="button"
|
|
@@ -6575,7 +6575,7 @@ cssPrefix: pf-c-tabs
|
|
|
6575
6575
|
>
|
|
6576
6576
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
6577
6577
|
</button>
|
|
6578
|
-
<span class="pf-c-tabs__item-action
|
|
6578
|
+
<span class="pf-c-tabs__item-action">
|
|
6579
6579
|
<button
|
|
6580
6580
|
class="pf-c-button pf-m-plain"
|
|
6581
6581
|
type="button"
|
|
@@ -6630,7 +6630,7 @@ cssPrefix: pf-c-tabs
|
|
|
6630
6630
|
>
|
|
6631
6631
|
<span class="pf-c-tabs__item-text">Users</span>
|
|
6632
6632
|
</button>
|
|
6633
|
-
<span class="pf-c-tabs__item-action
|
|
6633
|
+
<span class="pf-c-tabs__item-action">
|
|
6634
6634
|
<button
|
|
6635
6635
|
class="pf-c-button pf-m-plain"
|
|
6636
6636
|
type="button"
|
|
@@ -6662,7 +6662,7 @@ cssPrefix: pf-c-tabs
|
|
|
6662
6662
|
>
|
|
6663
6663
|
<span class="pf-c-tabs__item-text">Containers</span>
|
|
6664
6664
|
</button>
|
|
6665
|
-
<span class="pf-c-tabs__item-action
|
|
6665
|
+
<span class="pf-c-tabs__item-action">
|
|
6666
6666
|
<button
|
|
6667
6667
|
class="pf-c-button pf-m-plain"
|
|
6668
6668
|
type="button"
|
|
@@ -6694,7 +6694,7 @@ cssPrefix: pf-c-tabs
|
|
|
6694
6694
|
>
|
|
6695
6695
|
<span class="pf-c-tabs__item-text">Database</span>
|
|
6696
6696
|
</button>
|
|
6697
|
-
<span class="pf-c-tabs__item-action
|
|
6697
|
+
<span class="pf-c-tabs__item-action">
|
|
6698
6698
|
<button
|
|
6699
6699
|
class="pf-c-button pf-m-plain"
|
|
6700
6700
|
type="button"
|
|
@@ -6728,7 +6728,7 @@ cssPrefix: pf-c-tabs
|
|
|
6728
6728
|
>
|
|
6729
6729
|
<span class="pf-c-tabs__item-text">Disabled</span>
|
|
6730
6730
|
</button>
|
|
6731
|
-
<span class="pf-c-tabs__item-action
|
|
6731
|
+
<span class="pf-c-tabs__item-action">
|
|
6732
6732
|
<button
|
|
6733
6733
|
class="pf-c-button pf-m-plain"
|
|
6734
6734
|
type="button"
|
|
@@ -6761,7 +6761,7 @@ cssPrefix: pf-c-tabs
|
|
|
6761
6761
|
>
|
|
6762
6762
|
<span class="pf-c-tabs__item-text">ARIA disabled</span>
|
|
6763
6763
|
</button>
|
|
6764
|
-
<span class="pf-c-tabs__item-action
|
|
6764
|
+
<span class="pf-c-tabs__item-action">
|
|
6765
6765
|
<button
|
|
6766
6766
|
class="pf-c-button pf-m-plain"
|
|
6767
6767
|
type="button"
|
|
@@ -6794,7 +6794,7 @@ cssPrefix: pf-c-tabs
|
|
|
6794
6794
|
>
|
|
6795
6795
|
<span class="pf-c-tabs__item-text">Help disabled</span>
|
|
6796
6796
|
</button>
|
|
6797
|
-
<span class="pf-c-tabs__item-action
|
|
6797
|
+
<span class="pf-c-tabs__item-action">
|
|
6798
6798
|
<button
|
|
6799
6799
|
class="pf-c-button pf-m-plain"
|
|
6800
6800
|
type="button"
|
|
@@ -6828,7 +6828,7 @@ cssPrefix: pf-c-tabs
|
|
|
6828
6828
|
>
|
|
6829
6829
|
<span class="pf-c-tabs__item-text">Close disabled</span>
|
|
6830
6830
|
</button>
|
|
6831
|
-
<span class="pf-c-tabs__item-action
|
|
6831
|
+
<span class="pf-c-tabs__item-action">
|
|
6832
6832
|
<button
|
|
6833
6833
|
class="pf-c-button pf-m-plain"
|
|
6834
6834
|
type="button"
|
|
@@ -6862,7 +6862,7 @@ cssPrefix: pf-c-tabs
|
|
|
6862
6862
|
>
|
|
6863
6863
|
<span class="pf-c-tabs__item-text">Help and close disabled</span>
|
|
6864
6864
|
</button>
|
|
6865
|
-
<span class="pf-c-tabs__item-action
|
|
6865
|
+
<span class="pf-c-tabs__item-action">
|
|
6866
6866
|
<button
|
|
6867
6867
|
class="pf-c-button pf-m-plain"
|
|
6868
6868
|
type="button"
|
|
@@ -6896,7 +6896,7 @@ cssPrefix: pf-c-tabs
|
|
|
6896
6896
|
>
|
|
6897
6897
|
<span class="pf-c-tabs__item-text">Network</span>
|
|
6898
6898
|
</button>
|
|
6899
|
-
<span class="pf-c-tabs__item-action
|
|
6899
|
+
<span class="pf-c-tabs__item-action">
|
|
6900
6900
|
<button
|
|
6901
6901
|
class="pf-c-button pf-m-plain"
|
|
6902
6902
|
type="button"
|
|
@@ -7551,36 +7551,36 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
|
|
|
7551
7551
|
|
|
7552
7552
|
### Usage
|
|
7553
7553
|
|
|
7554
|
-
| Class
|
|
7555
|
-
|
|
|
7556
|
-
| `.pf-c-tabs`
|
|
7557
|
-
| `.pf-c-tabs__list`
|
|
7558
|
-
| `.pf-c-tabs__item`
|
|
7559
|
-
| `.pf-c-tabs__item-text`
|
|
7560
|
-
| `.pf-c-tabs__item-icon`
|
|
7561
|
-
| `.pf-c-tabs__item-close`
|
|
7562
|
-
| `.pf-c-tabs__item-close-icon`
|
|
7563
|
-
| `.pf-c-tabs__link`
|
|
7564
|
-
| `.pf-c-tabs__scroll-button`
|
|
7565
|
-
| `.pf-c-tabs__add`
|
|
7566
|
-
| `.pf-c-tabs__toggle`
|
|
7567
|
-
| `.pf-c-tabs__toggle-button`
|
|
7568
|
-
| `.pf-c-tabs__toggle-icon`
|
|
7569
|
-
| `.pf-c-tabs__toggle-text`
|
|
7570
|
-
| `.pf-m-secondary`
|
|
7571
|
-
| `.pf-m-no-border-bottom`
|
|
7572
|
-
| `.pf-m-box`
|
|
7573
|
-
| `.pf-m-vertical`
|
|
7574
|
-
| `.pf-m-fill`
|
|
7575
|
-
| `.pf-m-current`
|
|
7576
|
-
| `.pf-m-action`
|
|
7577
|
-
| `.pf-m-overflow`
|
|
7578
|
-
| `.pf-m-expanded`
|
|
7579
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs`
|
|
7580
|
-
| `.pf-m-page-insets`
|
|
7581
|
-
| `.pf-m-color-scheme--light-300`
|
|
7582
|
-
| `.pf-m-expandable{-on-[breakpoint]}`
|
|
7583
|
-
| `.pf-m-non-expandable{-on-[breakpoint]}`
|
|
7584
|
-
| `.pf-m-expanded`
|
|
7585
|
-
| `.pf-m-disabled`
|
|
7586
|
-
| `.pf-m-aria-disabled`
|
|
7554
|
+
| Class | Applied to | Outcome |
|
|
7555
|
+
| -- | -- | -- |
|
|
7556
|
+
| `.pf-c-tabs` | `<nav>`, `<div>` | Initiates the tabs component. **Required** |
|
|
7557
|
+
| `.pf-c-tabs__list` | `<ul>` | Initiates a tabs component list. **Required** |
|
|
7558
|
+
| `.pf-c-tabs__item` | `<li>` | Initiates a tabs component item. **Required** |
|
|
7559
|
+
| `.pf-c-tabs__item-text` | `<span>` | Initiates a tabs component item icon. **Required** |
|
|
7560
|
+
| `.pf-c-tabs__item-icon` | `<span>` | Initiates a tabs component item text. **Required** |
|
|
7561
|
+
| `.pf-c-tabs__item-close` | `<span>` | Initiates a tabs component item close. |
|
|
7562
|
+
| `.pf-c-tabs__item-close-icon` | `<span>` | Initiates a tabs component item close icon. |
|
|
7563
|
+
| `.pf-c-tabs__link` | `<button>`, `<a>` | Initiates a tabs component link. **Required** |
|
|
7564
|
+
| `.pf-c-tabs__scroll-button` | `<button>` | Initiates a tabs component scroll button. |
|
|
7565
|
+
| `.pf-c-tabs__add` | `<span>` | Initiates a tabs component add button. |
|
|
7566
|
+
| `.pf-c-tabs__toggle` | `<div>` | Initiates a tabs expandable toggle. |
|
|
7567
|
+
| `.pf-c-tabs__toggle-button` | `<button>` | Initiates a tabs expandable toggle button. |
|
|
7568
|
+
| `.pf-c-tabs__toggle-icon` | `<span>` | Initiates a tabs expandable toggle icon. |
|
|
7569
|
+
| `.pf-c-tabs__toggle-text` | `<span>` | Initiates a tabs expandable toggle text. |
|
|
7570
|
+
| `.pf-m-secondary` | `.pf-c-tabs` | Applies secondary styling to the tab component. |
|
|
7571
|
+
| `.pf-m-no-border-bottom` | `.pf-c-tabs` | Removes bottom border from a tab component. |
|
|
7572
|
+
| `.pf-m-box` | `.pf-c-tabs` | Applies box styling to the tab component. |
|
|
7573
|
+
| `.pf-m-vertical` | `.pf-c-tabs` | Applies vertical styling to the tab component. |
|
|
7574
|
+
| `.pf-m-fill` | `.pf-c-tabs` | Modifies the tabs to fill the available space. |
|
|
7575
|
+
| `.pf-m-current` | `.pf-c-tabs__item` | Indicates that a tab item is currently selected. |
|
|
7576
|
+
| `.pf-m-action` | `.pf-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
|
|
7577
|
+
| `.pf-m-overflow` | `.pf-c-tabs__item` | Applies overflow menu styling to a tab item. |
|
|
7578
|
+
| `.pf-m-expanded` | `.pf-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
|
|
7579
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
7580
|
+
| `.pf-m-page-insets` | `.pf-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
|
|
7581
|
+
| `.pf-m-color-scheme--light-300` | `.pf-c-tabs` | Modifies the tabs component tab background colors. |
|
|
7582
|
+
| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
|
|
7583
|
+
| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
7584
|
+
| `.pf-m-expanded` | `.pf-c-tabs` | Modifies the expandable tabs component for the expanded state. |
|
|
7585
|
+
| `.pf-m-disabled` | `a.pf-c-tabs__link` | Modifies a tabs link for disabled styles. |
|
|
7586
|
+
| `.pf-m-aria-disabled` | `.pf-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
|