@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,12 +42,12 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z1QUs2D" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-580"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZTjBiA" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-194"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-581"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-582"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-194"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3356" data-pf-content="true" class="pf-v6-c-content--h1">Examples</h1>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="ZYuqgp" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-529"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZKK71D" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-177"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-530"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-531"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-177"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/tabs/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3034" data-pf-content="true" class="pf-v6-c-content--h1">Examples</h1>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3035" data-pf-content="true" class="pf-v6-c-content--h2">Default</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3036" data-pf-content="true" class="pf-v6-c-content--h3">Default tabs example</h3>
|
|
48
48
|
|
|
49
49
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1dprDx" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs\" role=\"region\" id=\"default-tabs\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"default-tabs-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"default-tabs-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3037" data-pf-content="true" class="pf-v6-c-content--h3">Default tabs usage</h3>
|
|
51
51
|
|
|
52
52
|
|
|
53
53
|
|
|
@@ -69,11 +69,11 @@
|
|
|
69
69
|
|
|
70
70
|
|
|
71
71
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-disabled</code></td><td><code>a.pf-v6-c-tabs__link</code></td><td>Modifies a tabs link for disabled styles.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-tabs__link</code></td><td>Modifies a tabs link for disabled styles, but is still hoverable/focusable.</td></tr></tbody></table>
|
|
72
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
72
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3038" data-pf-content="true" class="pf-v6-c-content--h2">Overflow</h2>
|
|
73
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3039" data-pf-content="true" class="pf-v6-c-content--h3">Overflow beginning of list example</h3>
|
|
74
74
|
|
|
75
75
|
<astro-island uid="O3EW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"overflow-beginning-of-list\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-cloud-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Hybrid Cloud</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-automation-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Automation</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"overflow-beginning-of-list-files-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Files</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
76
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
76
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3040" data-pf-content="true" class="pf-v6-c-content--h3">Overflow beginning of list usage</h3>
|
|
77
77
|
|
|
78
78
|
|
|
79
79
|
|
|
@@ -95,30 +95,30 @@
|
|
|
95
95
|
|
|
96
96
|
|
|
97
97
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-scrollable</code></td><td><code>.pf-v6-c-tabs</code></td><td>Enables the directional scroll buttons.</td></tr><tr><td><code>.pf-v6-c-tabs__scroll-button</code></td><td><code><div></code></td><td>Initiates a tabs component scroll button container.</td></tr></tbody></table>
|
|
98
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3041" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal overflow example</h3>
|
|
99
99
|
|
|
100
100
|
<astro-island uid="sRp07" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-overflow\" role=\"region\" id=\"horizontal-overflow\">\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-overflow\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-more-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">More</span>\n <span class=\"pf-v6-c-tabs__link-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
101
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
101
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3042" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal overflow expanded example</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="1kA8WQ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-overflow\"\n role=\"region\"\n id=\"horizontal-overflow-expanded\"\n>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-overflow\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-expanded\"\n aria-expanded=\"true\"\n role=\"tab\"\n id=\"horizontal-overflow-expanded-more-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">More</span>\n <span class=\"pf-v6-c-tabs__link-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
104
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3043" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal overflow selected example</h3>
|
|
105
105
|
|
|
106
106
|
<astro-island uid="tbaC5" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-overflow\"\n role=\"region\"\n id=\"horizontal-overflow-selected\"\n>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-current pf-m-overflow\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"horizontal-overflow-selected-more-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">More</span>\n <span class=\"pf-v6-c-tabs__link-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
107
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
108
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3044" data-pf-content="true" class="pf-v6-c-content--h2">Vertical</h2>
|
|
108
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3045" data-pf-content="true" class="pf-v6-c-content--h3">Vertical tabs example</h3>
|
|
109
109
|
|
|
110
110
|
<astro-island uid="Z1wacIL" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-vertical\" role=\"region\" id=\"vertical-tabs\">\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"vertical-tabs-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"vertical-tabs-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-tabs-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
111
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
111
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3046" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable example</h3>
|
|
112
112
|
|
|
113
113
|
<astro-island uid="1FXj6F" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-expandable pf-m-vertical\"\n role=\"region\"\n id=\"vertical-expandable\"\n>\n <div class=\"pf-v6-c-tabs__toggle\">\n <div class=\"pf-v6-c-tabs__toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Details\"\n aria-expanded=\"true\"\n id=\"vertical-expandable-toggle-button\"\n aria-labelledby=\"vertical-expandable-toggle-text vertical-expandable-toggle-button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-tabs__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-button__text\">\n <span\n class=\"pf-v6-c-tabs__toggle-text\"\n id=\"vertical-expandable-toggle-text\"\n >Containers</span>\n </span>\n </button>\n </div>\n </div>\n\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
114
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
114
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3047" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expanded example</h3>
|
|
115
115
|
|
|
116
116
|
<astro-island uid="ZpqDVP" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical\"\n role=\"region\"\n id=\"vertical-expanded\"\n>\n <div class=\"pf-v6-c-tabs__toggle\">\n <div class=\"pf-v6-c-tabs__toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Details\"\n id=\"vertical-expanded-toggle-button\"\n aria-labelledby=\"vertical-expanded-toggle-text vertical-expanded-toggle-button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-tabs__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-button__text\">\n <span\n class=\"pf-v6-c-tabs__toggle-text\"\n id=\"vertical-expanded-toggle-text\"\n >Containers</span>\n </span>\n </button>\n </div>\n </div>\n\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expanded-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
117
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
117
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3048" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable responsive example</h3>
|
|
118
118
|
|
|
119
119
|
<astro-island uid="t7QCU" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl\"\n role=\"region\"\n id=\"vertical-expandable-responsive\"\n>\n <div class=\"pf-v6-c-tabs__toggle\">\n <div class=\"pf-v6-c-tabs__toggle-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Details\"\n aria-expanded=\"true\"\n id=\"vertical-expandable-responsive-toggle-button\"\n aria-labelledby=\"vertical-expandable-responsive-toggle-text vertical-expandable-responsive-toggle-button\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-tabs__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <span class=\"pf-v6-c-button__text\">\n <span\n class=\"pf-v6-c-tabs__toggle-text\"\n id=\"vertical-expandable-responsive-toggle-text\"\n >Containers</span>\n </span>\n </button>\n </div>\n </div>\n\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"vertical-expandable-responsive-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
120
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
121
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
120
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3049" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable example (deprecated)</h3>
|
|
121
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3096" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span></span>
|
|
122
122
|
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-tabs pf-m-expandable pf-m-vertical"</span></span>
|
|
123
123
|
<span class="line"><span style="color:#B392F0"> role</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"region"</span></span>
|
|
124
124
|
<span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"vertical-expandable-legacy"</span></span>
|
|
@@ -211,8 +211,8 @@
|
|
|
211
211
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
|
212
212
|
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
213
213
|
<span class="line"></span></code></pre>
|
|
214
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
215
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
214
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3050" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expanded example (deprecated)</h3>
|
|
215
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3097" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span></span>
|
|
216
216
|
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-tabs pf-m-expandable pf-m-expanded pf-m-vertical"</span></span>
|
|
217
217
|
<span class="line"><span style="color:#B392F0"> role</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"region"</span></span>
|
|
218
218
|
<span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"vertical-expanded-legacy"</span></span>
|
|
@@ -305,8 +305,8 @@
|
|
|
305
305
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
|
306
306
|
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
307
307
|
<span class="line"></span></code></pre>
|
|
308
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
309
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
308
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3051" data-pf-content="true" class="pf-v6-c-content--h3">Vertical expandable responsive example (deprecated)</h3>
|
|
309
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3098" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span></span>
|
|
310
310
|
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-tabs pf-m-expandable pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl"</span></span>
|
|
311
311
|
<span class="line"><span style="color:#B392F0"> role</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"region"</span></span>
|
|
312
312
|
<span class="line"><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"vertical-expandable-responsive-legacy"</span></span>
|
|
@@ -399,30 +399,30 @@
|
|
|
399
399
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">ul</span><span style="color:#E1E4E8">></span></span>
|
|
400
400
|
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
401
401
|
<span class="line"></span></code></pre>
|
|
402
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
403
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
402
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3052" data-pf-content="true" class="pf-v6-c-content--h2">Box</h2>
|
|
403
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3053" data-pf-content="true" class="pf-v6-c-content--h3">Box tabs example</h3>
|
|
404
404
|
|
|
405
405
|
<astro-island uid="Z6vEFi" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-box\" role=\"region\" id=\"box-tabs\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"box-tabs-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"box-tabs-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
406
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
406
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3054" data-pf-content="true" class="pf-v6-c-content--h3">Box overflow example</h3>
|
|
407
407
|
|
|
408
408
|
<astro-island uid="20xPRM" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"box-overflow\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-cloud-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Hybrid Cloud</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-automation-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Automation</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-overflow-files-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Files</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
409
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
409
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3055" data-pf-content="true" class="pf-v6-c-content--h3">Box vertical example</h3>
|
|
410
410
|
|
|
411
411
|
<astro-island uid="Z1RPG2I" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-vertical\"\n role=\"region\"\n id=\"box-vertical\"\n>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-vertical-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-vertical-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-vertical-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"box-vertical-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"box-vertical-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-vertical-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
412
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
412
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3056" data-pf-content="true" class="pf-v6-c-content--h3">Box tabs secondary variant example</h3>
|
|
413
413
|
|
|
414
414
|
<astro-island uid="1KD7m1" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-secondary\"\n role=\"region\"\n id=\"box-tabs-secondary\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-secondary-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-secondary-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-secondary-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"box-tabs-secondary-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"box-tabs-secondary-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-secondary-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n<div class=\"tabs-example-block tabs-example-block--m-secondary\"></div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
415
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
416
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
415
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3057" data-pf-content="true" class="pf-v6-c-content--h2">Tab insets</h2>
|
|
416
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3058" data-pf-content="true" class="pf-v6-c-content--h3">Default tab insets example</h3>
|
|
417
417
|
|
|
418
418
|
<astro-island uid="Z1UAAB0" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl\"\n role=\"region\"\n id=\"default-tab-insets\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tab-insets-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
419
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
419
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3059" data-pf-content="true" class="pf-v6-c-content--h3">Box tab insets example</h3>
|
|
420
420
|
|
|
421
421
|
<astro-island uid="Z2sx3ht" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-inset-sm-on-md pf-m-inset-lg-on-lg pf-m-inset-2xl-on-xl\"\n role=\"region\"\n id=\"box-tab-insets\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tab-insets-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
422
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
422
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3060" data-pf-content="true" class="pf-v6-c-content--h3">Page insets example</h3>
|
|
423
423
|
|
|
424
424
|
<astro-island uid="ZFpkNR" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-page-insets\" role=\"region\" id=\"page-insets\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"page-insets-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
425
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
425
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3061" data-pf-content="true" class="pf-v6-c-content--h3">Insets usage</h3>
|
|
426
426
|
|
|
427
427
|
|
|
428
428
|
|
|
@@ -444,31 +444,31 @@
|
|
|
444
444
|
|
|
445
445
|
|
|
446
446
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs component padding/inset to visually match padding of other adjacent components.</td></tr><tr><td><code>.pf-m-page-insets</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs component padding/inset to visually match padding of page elements.</td></tr></tbody></table>
|
|
447
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
448
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
447
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3062" data-pf-content="true" class="pf-v6-c-content--h2">Icons</h2>
|
|
448
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3063" data-pf-content="true" class="pf-v6-c-content--h3">Icons and text example</h3>
|
|
449
449
|
|
|
450
450
|
<astro-island uid="1wsKks" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs\" role=\"region\" id=\"icons-and-text\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-server\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"icons-and-text-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-project-diagram\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
451
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
452
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
451
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3064" data-pf-content="true" class="pf-v6-c-content--h2">Sub tabs</h2>
|
|
452
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3065" data-pf-content="true" class="pf-v6-c-content--h3">Tabs with sub tabs example</h3>
|
|
453
453
|
|
|
454
454
|
<astro-island uid="ybbp3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-scrollable\" role=\"region\" id=\"tabs-with-sub-tabs\">\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"tabs-with-sub-tabs-subtab\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-1-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-2-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-3-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 3</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-4-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-5-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"tabs-with-sub-tabs-subtab-sub-6-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 6</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
455
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
455
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3066" data-pf-content="true" class="pf-v6-c-content--h3">Box tabs with sub tabs example</h3>
|
|
456
456
|
|
|
457
457
|
<astro-island uid="ZLczbn" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"box-tabs-with-sub-tabs\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"box-tabs-with-sub-tabs-subtab\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-1-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-2-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-3-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 3</span>\n </button>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-4-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 4</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-5-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 5</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-with-sub-tabs-subtab-sub-6-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 6</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
458
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
459
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
458
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3067" data-pf-content="true" class="pf-v6-c-content--h2">Filled</h2>
|
|
459
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3068" data-pf-content="true" class="pf-v6-c-content--h3">Filled tabs example</h3>
|
|
460
460
|
|
|
461
461
|
<astro-island uid="1d0eda" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-fill\" role=\"region\" id=\"filled-tabs\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-tabs-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-tabs-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-tabs-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
462
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
462
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3069" data-pf-content="true" class="pf-v6-c-content--h3">Filled with icons example</h3>
|
|
463
463
|
|
|
464
464
|
<astro-island uid="Z1Xn0bf" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-fill\" role=\"region\" id=\"filled-with-icons\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-with-icons-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-with-icons-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-with-icons-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
465
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
465
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3070" data-pf-content="true" class="pf-v6-c-content--h3">Filled box example</h3>
|
|
466
466
|
|
|
467
467
|
<astro-island uid="Z1qc1bg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-tabs pf-m-fill pf-m-box\" role=\"region\" id=\"filled-box\">\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
468
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
468
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3071" data-pf-content="true" class="pf-v6-c-content--h3">Filled box with icons example</h3>
|
|
469
469
|
|
|
470
470
|
<astro-island uid="n0xrg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-fill pf-m-box\"\n role=\"region\"\n id=\"filled-box-with-icons\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-with-icons-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-with-icons-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"filled-box-with-icons-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
471
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
471
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3072" data-pf-content="true" class="pf-v6-c-content--h3">Filled usage</h3>
|
|
472
472
|
|
|
473
473
|
|
|
474
474
|
|
|
@@ -485,42 +485,42 @@
|
|
|
485
485
|
|
|
486
486
|
|
|
487
487
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-fill</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs to fill the available space. <strong>Required</strong></td></tr></tbody></table>
|
|
488
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
489
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
488
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3073" data-pf-content="true" class="pf-v6-c-content--h2">Tabs as navigation</h2>
|
|
489
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3074" data-pf-content="true" class="pf-v6-c-content--h3">Using the nav element example</h3>
|
|
490
490
|
|
|
491
491
|
<astro-island uid="Z1mlCil" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<nav\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n aria-label=\"Tabs nav\"\n role=\"region\"\n id=\"using-the-nav-element\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </a>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link pf-m-disabled\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"using-the-nav-element-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </a>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</nav>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
492
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
492
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3075" data-pf-content="true" class="pf-v6-c-content--h3">Sub tabs using the nav element example</h3>
|
|
493
493
|
|
|
494
494
|
<astro-island uid="1QMOeV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<nav\n class=\"pf-v6-c-tabs\"\n aria-label=\"Tabs primary nav\"\n role=\"region\"\n id=\"sub-tabs-using-the-nav-element\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </a>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </a>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</nav>\n\n<nav\n class=\"pf-v6-c-tabs pf-m-subtab\"\n aria-label=\"Tabs subtab nav\"\n role=\"region\"\n id=\"sub-tabs-using-the-nav-element-subtab\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-1-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 1</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-2-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 2</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-3-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 3</span>\n </a>\n </li>\n\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link pf-m-disabled\"\n aria-disabled=\"true\"\n tabindex=\"-1\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </a>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <a\n class=\"pf-v6-c-tabs__link\"\n href=\"#\"\n role=\"tab\"\n id=\"sub-tabs-using-the-nav-element-subtab-sub-6-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Item 6</span>\n </a>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</nav>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
495
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
496
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
495
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3076" data-pf-content="true" class="pf-v6-c-content--h2">Tab item actions</h2>
|
|
496
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3077" data-pf-content="true" class="pf-v6-c-content--h3">Help button example</h3>
|
|
497
497
|
|
|
498
498
|
<astro-island uid="Z1HhhWm" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-default-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-default-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-default-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-default-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-default-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-default-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-default-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-default-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-box-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-box-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-box-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-box-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-box-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-box-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-box-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-box-secondary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-box-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-icons-text-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-icons-text-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-icons-text-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-icons-text-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-icons-text-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-server\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-icons-text-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-icons-text-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-download\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-icons-text-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-project-diagram\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-fill\"\n role=\"region\"\n id=\"help-button-filled-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-filled-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-filled-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-filled-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-secondary-primary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-primary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-primary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-primary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-secondary-primary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-secondary-primary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-secondary-primary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-primary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"help-button-secondary-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-button-secondary-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
499
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
499
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3078" data-pf-content="true" class="pf-v6-c-content--h3">Close button example</h3>
|
|
500
500
|
|
|
501
501
|
<astro-island uid="2aYp42" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-default-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-default-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-default-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-default-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-default-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-default-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-default-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-default-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-box-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-box-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-box-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-box-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-box-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-box-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-box-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-box-secondary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-box-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-icons-text-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-icons-text-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-icons-text-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-icons-text-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-icons-text-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-server\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-icons-text-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-icons-text-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-icons-text-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-project-diagram\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-fill\"\n role=\"region\"\n id=\"close-button-filled-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-filled-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-filled-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-filled-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-secondary-primary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-primary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-primary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-primary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-secondary-primary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-secondary-primary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-secondary-primary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-primary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"close-button-secondary-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"close-button-secondary-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
502
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
502
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3079" data-pf-content="true" class="pf-v6-c-content--h3">Help and close button example</h3>
|
|
503
503
|
|
|
504
504
|
<astro-island uid="Z1RObPV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-default-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-default-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-default-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-default-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-default-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-default-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-default-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-default-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-default-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-default-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-box-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-box-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-box-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-box-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-icons-text-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-icons-text-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-users\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-icons-text-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-fas fa-box\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-icons-text-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-database\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-icons-text-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-server\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-icons-text-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-laptop\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-icons-text-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-download\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-icons-text-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-code\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-icons-text-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-folder\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-icons-text-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-icon\">\n <i class=\"fas fa-project-diagram\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-fill\"\n role=\"region\"\n id=\"help-close-button-filled-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-filled-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-filled-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-filled-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\" aria-hidden=\"true\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-secondary-primary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-primary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"help-close-button-secondary-secondary-example\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Users label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Containers label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Database label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link pf-m-aria-disabled\"\n aria-disabled=\"true\"\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-aria-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">ARIA disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for ARIA disabled label\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-aria-disabled pf-m-plain\"\n type=\"button\"\n aria-label=\"Close ARIA disabled\"\n aria-disabled=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-help-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help disabled\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Close disabled label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li\n class=\"pf-v6-c-tabs__item pf-m-action pf-m-disabled\"\n role=\"presentation\"\n >\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n disabled\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-help-close-disabled-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Help and close disabled</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Help and close disabled label\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Help and close disabled\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"help-close-button-secondary-secondary-example-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"More info for Network label\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"pf-v6-pficon pf-v6-pficon-help\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
505
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
506
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
505
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3080" data-pf-content="true" class="pf-v6-c-content--h2">Add tab button</h2>
|
|
506
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3081" data-pf-content="true" class="pf-v6-c-content--h3">Add tab button example</h3>
|
|
507
507
|
|
|
508
508
|
<astro-island uid="Z1cu1YW" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-tabs pf-m-scrollable\"\n role=\"region\"\n id=\"default-tabs-add-tab-button\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Server\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close System\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <span class=\"pf-v6-c-tabs__add\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Add tab\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-plus\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</div>\n<div\n class=\"pf-v6-c-tabs pf-m-subtab pf-m-scrollable\"\n role=\"region\"\n id=\"default-tabs-add-tab-button-subtab\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Server\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close System\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"default-tabs-add-tab-button-subtab-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <span class=\"pf-v6-c-tabs__add\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Add tab\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-plus\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-scrollable\"\n role=\"region\"\n id=\"box-tabs-add-tab-button\"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Server\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close System\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <span class=\"pf-v6-c-tabs__add\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Add tab\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-plus\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</div>\n\n<br />\n<br />\n\n<div\n class=\"pf-v6-c-tabs pf-m-box pf-m-secondary pf-m-scrollable\"\n role=\"region\"\n id=\"box-tabs-add-tab-button-secondary \"\n>\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll left\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -users-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Users</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Users\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-current pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -containers-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Containers</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Containers\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -database-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Database</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Database\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -server-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Server</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Server\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -system-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">System</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close System\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n <li class=\"pf-v6-c-tabs__item pf-m-action\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"box-tabs-add-tab-button-secondary -network-wired-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Network</span>\n </button>\n <span class=\"pf-v6-c-tabs__item-action\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close Network\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <span class=\"pf-v6-c-tabs__item-action-icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </span>\n </li>\n </ul>\n\n <div class=\"pf-v6-c-tabs__scroll-button\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Scroll right\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <span class=\"pf-v6-c-tabs__add\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Add tab\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-plus\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
509
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
510
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
509
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3082" data-pf-content="true" class="pf-v6-c-content--h2">Tab content</h2>
|
|
510
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3083" data-pf-content="true" class="pf-v6-c-content--h3">Default tab content example</h3>
|
|
511
511
|
|
|
512
512
|
<astro-island uid="Zy7PGO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<section\n class=\"pf-v6-c-tab-content\"\n id=\"basic-tab1-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 1</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"basic-tab2-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 2</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"basic-tab3-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 3</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"basic-tab4-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 4</div>\n</section>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
513
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
513
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3084" data-pf-content="true" class="pf-v6-c-content--h3">Padding</h3>
|
|
514
514
|
|
|
515
515
|
<astro-island uid="ZfOaer" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<section\n class=\"pf-v6-c-tab-content\"\n id=\"tab1-panel-with-padding\"\n role=\"tabpanel\"\n tabindex=\"0\"\n>\n <div class=\"pf-v6-c-tab-content__body pf-m-padding\">Panel 1</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"tab2-panel-with-padding\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body pf-m-padding\">Panel 2</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"tab3-panel-with-padding\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body pf-m-padding\">Panel 3</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content\"\n id=\"tab4-panel-with-padding\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body pf-m-padding\">Panel 4</div>\n</section>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
516
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
516
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3085" data-pf-content="true" class="pf-v6-c-content--h3">Secondary</h3>
|
|
517
517
|
|
|
518
518
|
<astro-island uid="Z17gj94" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<section\n class=\"pf-v6-c-tab-content pf-m-secondary\"\n id=\"secondary-tab1-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 1</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content pf-m-secondary\"\n id=\"secondary-tab2-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 2</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content pf-m-secondary\"\n id=\"secondary-tab3-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 3</div>\n</section>\n<section\n class=\"pf-v6-c-tab-content pf-m-secondary\"\n id=\"secondary-tab4-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n>\n <div class=\"pf-v6-c-tab-content__body\">Panel 4</div>\n</section>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
519
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
520
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
521
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
522
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
523
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
519
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3086" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
520
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3087" data-pf-content="true" class="pf-v6-c-content--h3">Tabs overview</h3>
|
|
521
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3099" data-pf-content="true" class="pf-v6-c-content--p">The tabs component should only be used to change content views within a page. The similar-looking but semantically different <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3088" data-pf-content="true" class="pf-v6-c-content--a">horizontal nav component</a> is available for general navigation use cases.</p>
|
|
522
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3095" data-pf-content="true" class="pf-v6-c-content--p">Whenever a list of tabs is unique on the current page, it can be used in a <code><nav></code> element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the <code><nav></code> element.</p>
|
|
523
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3089" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
524
524
|
|
|
525
525
|
|
|
526
526
|
|
|
@@ -686,8 +686,8 @@
|
|
|
686
686
|
|
|
687
687
|
|
|
688
688
|
|
|
689
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-tabs</code></td><td><code><nav></code>, <code><div></code></td><td>Initiates the tabs component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__list</code></td><td><code><ul></code></td><td>Initiates a tabs component list. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item</code></td><td><code><li></code></td><td>Initiates a tabs component item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-text</code></td><td><code><span></code></td><td>Initiates a tabs component item icon. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-icon</code></td><td><code><span></code></td><td>Initiates a tabs component item text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-close</code></td><td><code><span></code></td><td>Initiates a tabs component item close.</td></tr><tr><td><code>.pf-v6-c-tabs__item-close-icon</code></td><td><code><span></code></td><td>Initiates a tabs component item close icon.</td></tr><tr><td><code>.pf-v6-c-tabs__link</code></td><td><code><button></code>, <code><a></code></td><td>Initiates a tabs component link. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__scroll-button</code></td><td><code><div></code></td><td>Initiates a tabs component scroll button container.</td></tr><tr><td><code>.pf-v6-c-tabs__add</code></td><td><code><span></code></td><td>Initiates a tabs component add button.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle</code></td><td><code><div></code></td><td>Initiates a tabs expandable toggle.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-button</code></td><td><code><button></code></td><td>Initiates a tabs expandable toggle button.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-icon</code></td><td><code><span></code></td><td>Initiates a tabs expandable toggle icon.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-text</code></td><td><code><span></code></td><td>Initiates a tabs expandable toggle text.</td></tr><tr><td><code>.pf-m-tubtab</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies subtab styling to the tab component.</td></tr><tr><td><code>.pf-m-no-border-bottom</code></td><td><code>.pf-v6-c-tabs</code></td><td>Removes bottom border from a tab component.</td></tr><tr><td><code>.pf-m-box</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies box styling to the tab component.</td></tr><tr><td><code>.pf-m-vertical</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies vertical styling to the tab component.</td></tr><tr><td><code>.pf-m-fill</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs to fill the available space.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Indicates that a tab item is currently selected.</td></tr><tr><td><code>.pf-m-action</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Indicates that a tab item contains actions other than the tab link.</td></tr><tr><td><code>.pf-m-overflow</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Applies overflow menu styling to a tab item.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Applies expanded styling to the overflow menu tab item.</td></tr><tr><td><code>.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies tabs horizontal padding at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
690
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
689
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-tabs</code></td><td><code><nav></code>, <code><div></code></td><td>Initiates the tabs component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__list</code></td><td><code><ul></code></td><td>Initiates a tabs component list. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item</code></td><td><code><li></code></td><td>Initiates a tabs component item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-text</code></td><td><code><span></code></td><td>Initiates a tabs component item icon. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-icon</code></td><td><code><span></code></td><td>Initiates a tabs component item text. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__item-close</code></td><td><code><span></code></td><td>Initiates a tabs component item close.</td></tr><tr><td><code>.pf-v6-c-tabs__item-close-icon</code></td><td><code><span></code></td><td>Initiates a tabs component item close icon.</td></tr><tr><td><code>.pf-v6-c-tabs__link</code></td><td><code><button></code>, <code><a></code></td><td>Initiates a tabs component link. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tabs__scroll-button</code></td><td><code><div></code></td><td>Initiates a tabs component scroll button container.</td></tr><tr><td><code>.pf-v6-c-tabs__add</code></td><td><code><span></code></td><td>Initiates a tabs component add button.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle</code></td><td><code><div></code></td><td>Initiates a tabs expandable toggle.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-button</code></td><td><code><button></code></td><td>Initiates a tabs expandable toggle button.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-icon</code></td><td><code><span></code></td><td>Initiates a tabs expandable toggle icon.</td></tr><tr><td><code>.pf-v6-c-tabs__toggle-text</code></td><td><code><span></code></td><td>Initiates a tabs expandable toggle text.</td></tr><tr><td><code>.pf-m-tubtab</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies subtab styling to the tab component.</td></tr><tr><td><code>.pf-m-no-border-bottom</code></td><td><code>.pf-v6-c-tabs</code></td><td>Removes bottom border from a tab component.</td></tr><tr><td><code>.pf-m-box</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies box styling to the tab component.</td></tr><tr><td><code>.pf-m-vertical</code></td><td><code>.pf-v6-c-tabs</code></td><td>Applies vertical styling to the tab component.</td></tr><tr><td><code>.pf-m-fill</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs to fill the available space.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Indicates that a tab item is currently selected.</td></tr><tr><td><code>.pf-m-action</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Indicates that a tab item contains actions other than the tab link.</td></tr><tr><td><code>.pf-m-overflow</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Applies overflow menu styling to a tab item.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-tabs__item</code></td><td>Applies expanded styling to the overflow menu tab item.</td></tr><tr><td><code>.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies tabs horizontal padding at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3090" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-page-insets</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs component padding/inset to visually match padding of page elements.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-tabs.pf-m-box</code></td><td>Modifies the tabs component tab background colors for the box variant.</td></tr><tr><td><code>.pf-m-expandable{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs component to be expandable via a toggle at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3091" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>. <strong>Note:</strong> works with vertical tabs only.</td></tr><tr><td><code>.pf-m-non-expandable{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the tabs component to be non-expandable at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3092" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-tabs</code></td><td>Modifies the expandable tabs component for the expanded state.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>a.pf-v6-c-tabs__link</code></td><td>Modifies a tabs link for disabled styles.</td></tr><tr><td><code>.pf-m-aria-disabled</code></td><td><code>.pf-v6-c-tabs__link</code></td><td>Modifies a tabs link for disabled styles, but is still hoverable/focusable.</td></tr></tbody></table>
|
|
690
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3093" data-pf-content="true" class="pf-v6-c-content--h3">Tab content accessibility</h3>
|
|
691
691
|
|
|
692
692
|
|
|
693
693
|
|
|
@@ -724,7 +724,7 @@
|
|
|
724
724
|
|
|
725
725
|
|
|
726
726
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>role="tabpanel"</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Indicates that the element serves as a container for a set of tabs. <strong>Required</strong></td></tr><tr><td><code>aria-labelledby=[ID of tab element]</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Provides an accessible name for the tab panel by referring to the tab element that controls it. <strong>Required</strong></td></tr><tr><td><code>id=[ID of tab panel]</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Provides an ID for the tab panel, and should be used as the value of <code>aria-controls</code> on the tab element that controls the panel. <strong>Required</strong></td></tr><tr><td><code>hidden</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Indicates that the tab panel is not visible. <strong>Required on all but the active tab panel</strong></td></tr><tr><td><code>tabindex="0"</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. <strong>Required</strong></td></tr></tbody></table>
|
|
727
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
727
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3094" data-pf-content="true" class="pf-v6-c-content--h3">Tab content usage</h3>
|
|
728
728
|
|
|
729
729
|
|
|
730
730
|
|
|
@@ -755,6 +755,6 @@
|
|
|
755
755
|
|
|
756
756
|
|
|
757
757
|
|
|
758
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-tab-content</code></td><td><code><section></code></td><td>Initiates the tab content component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tab-content__body</code></td><td><code><div></code></td><td>Initiates the tab content body component.</td></tr><tr><td><code>.pf-m-padding</code></td><td><code>.pf-v6-c-tab-content__body</code></td><td>Modifies the tab content body component padding.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Modifies the tab content component for secondary styles.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
758
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-tab-content</code></td><td><code><section></code></td><td>Initiates the tab content component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-tab-content__body</code></td><td><code><div></code></td><td>Initiates the tab content body component.</td></tr><tr><td><code>.pf-m-padding</code></td><td><code>.pf-v6-c-tab-content__body</code></td><td>Modifies the tab content body component padding.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-tab-content</code></td><td>Modifies the tab content component for secondary styles.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3033" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
759
759
|
CSS variables
|
|
760
760
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="Z1Wq1PW" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-tabs"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|