@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,10 +42,10 @@
|
|
|
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="Z2tA0a6" 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-604"><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="17dk7b" 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-202"><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-605"><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-606"><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-202"><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/toolbar/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/toolbar/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/toolbar/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3628" data-pf-content="true" class="pf-v6-c-content--p">import ’./Toolbar.css’</p>
|
|
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="Zd9jRC" 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-553"><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="Zb4Vi3" 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-185"><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-554"><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-555"><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-185"><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/toolbar/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/toolbar/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/toolbar/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3306" data-pf-content="true" class="pf-v6-c-content--p">import ’./Toolbar.css’</p>
|
|
46
46
|
|
|
47
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
48
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3363" data-pf-content="true" class="pf-v6-c-content--p">Toolbar relies on groups (<code>.pf-v6-c-toolbar__group</code>) and items (<code>.pf-v6-c-toolbar__item</code>), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default <code>column-gap</code> value for items and groups is set to <code>--pf-v6-c--ColumnGap</code>, whose value is <code>--pf-t--global--spacer--md</code> or 16px. The default <code>row-gap</code> value for items and groups is set to <code>--pf-v6-c--RowGap</code>, whose value is <code>--pf-t--global--spacer--sm</code> or 8px.</p>
|
|
48
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3307" data-pf-content="true" class="pf-v6-c-content--h3">Default spacing for items and groups:</h3>
|
|
49
49
|
|
|
50
50
|
|
|
51
51
|
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
|
|
77
77
|
|
|
78
78
|
|
|
79
|
-
<table><thead><tr><th>Class</th><th>CSS Variable</th><th>Computed Value</th></tr></thead><tbody><tr><td><code>.pf-v6-c-toolbar__group</code></td><td><code>--pf-v6-c-toolbar__group--ColumnGap</code></td><td><code>16px</code></td></tr><tr><td><code>.pf-v6-c-toolbar__item</code></td><td><code>--pf-v6-c-toolbar__item--ColumnGap</code></td><td><code>16px</code></td></tr><tr><td><code>.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
79
|
+
<table><thead><tr><th>Class</th><th>CSS Variable</th><th>Computed Value</th></tr></thead><tbody><tr><td><code>.pf-v6-c-toolbar__group</code></td><td><code>--pf-v6-c-toolbar__group--ColumnGap</code></td><td><code>16px</code></td></tr><tr><td><code>.pf-v6-c-toolbar__item</code></td><td><code>--pf-v6-c-toolbar__item--ColumnGap</code></td><td><code>16px</code></td></tr><tr><td><code>.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3308" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}</code></td><td><code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies both column gap and row gap for toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3309" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3310" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar item types</h3>
|
|
81
81
|
|
|
82
82
|
|
|
83
83
|
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
|
|
95
95
|
|
|
96
96
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-pagination</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Initiates pagination and margin.</td></tr></tbody></table>
|
|
97
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3311" data-pf-content="true" class="pf-v6-c-content--h3">Modifiers</h3>
|
|
98
98
|
|
|
99
99
|
|
|
100
100
|
|
|
@@ -130,15 +130,15 @@
|
|
|
130
130
|
|
|
131
131
|
|
|
132
132
|
|
|
133
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-[hidden/visible]</code></td><td><code>.pf-v6-c-toolbar > *</code></td><td>Modifies toolbar element to be hidden/visible.</td></tr><tr><td><code>.pf-m-flex-grow</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element to <code>flex-grow: 1</code>, allowing it to consume available main-axis space.</td></tr><tr><td><code>.pf-m-align-[start/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
134
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
135
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
136
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
137
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
138
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
133
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-[hidden/visible]</code></td><td><code>.pf-v6-c-toolbar > *</code></td><td>Modifies toolbar element to be hidden/visible.</td></tr><tr><td><code>.pf-m-flex-grow</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element to <code>flex-grow: 1</code>, allowing it to consume available main-axis space.</td></tr><tr><td><code>.pf-m-align-[start/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3312" data-pf-content="true" class="pf-v6-c-content--a">main axis</a> element alignment.</td></tr><tr><td><code>.pf-m-align-items-[stretch/baseline/start/center/end]</code></td><td><code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3313" data-pf-content="true" class="pf-v6-c-content--a">cross axis</a> child alignment.</td></tr><tr><td><code>.pf-m-align-self-[stretch/baseline/start/center/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3314" data-pf-content="true" class="pf-v6-c-content--a">cross axis</a> self alignment.</td></tr></tbody></table>
|
|
134
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3315" data-pf-content="true" class="pf-v6-c-content--h3">Special notes</h3>
|
|
135
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3364" data-pf-content="true" class="pf-v6-c-content--p">Several components in the following examples do not include functional and/or accessibility specifications (for example <code>.pf-v6-c-select</code>, <code>.pf-v6-c-options-menu</code>). Rather, <code>.pf-v6-c-toolbar</code> focuses on functionality and accessibility specifications that apply to it only.</p>
|
|
136
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3365" data-pf-content="true" class="pf-v6-c-content--p"><strong>Available <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3316" data-pf-content="true" class="pf-v6-c-content--a">breakpoints</a> are: <code>-on-sm</code>, <code>-on-md</code>, <code>-on-lg</code>, <code>-on-xl</code>, and <code>-on-2xl</code>.</strong></p>
|
|
137
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3317" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
138
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3318" data-pf-content="true" class="pf-v6-c-content--h3">Simple</h3>
|
|
139
139
|
|
|
140
140
|
<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="1EY9mx" 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-toolbar\" id=\"toolbar-simple-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
141
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
141
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3319" data-pf-content="true" class="pf-v6-c-content--h3">Item types</h3>
|
|
142
142
|
|
|
143
143
|
|
|
144
144
|
|
|
@@ -160,16 +160,16 @@
|
|
|
160
160
|
|
|
161
161
|
|
|
162
162
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-toolbar__item</code></td><td><code><div></code></td><td>Initiates the toolbar component item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__group</code></td><td><code><div></code></td><td>Initiates the toolbar component group.</td></tr></tbody></table>
|
|
163
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
163
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3320" data-pf-content="true" class="pf-v6-c-content--h3">No padding</h3>
|
|
164
164
|
|
|
165
165
|
<astro-island uid="Z1gokK" 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-toolbar pf-m-no-padding\" id=\"toolbar-simple-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
166
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
166
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3321" data-pf-content="true" class="pf-v6-c-content--h3">Adjusted group column gap</h3>
|
|
167
167
|
|
|
168
168
|
<astro-island uid="Z1SXMfn" 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-toolbar\" id=\"toolbar-group-spacer-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group pf-m-column-gap-lg\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div\n class=\"pf-v6-c-toolbar__group pf-m-column-gap-none pf-m-column-gap-sm\"\n >\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
169
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
169
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3322" data-pf-content="true" class="pf-v6-c-content--h3">Insets</h3>
|
|
170
170
|
|
|
171
171
|
<astro-island uid="Z20WlxO" 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-toolbar pf-m-inset-xl\" id=\"toolbar-inset-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
172
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
172
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3323" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar spacers and insets</h3>
|
|
173
173
|
|
|
174
174
|
|
|
175
175
|
|
|
@@ -191,10 +191,10 @@
|
|
|
191
191
|
|
|
192
192
|
|
|
193
193
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-column-gap-[none/sm/md/lg]</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group child spacing.</td></tr><tr><td><code>.pf-m-inset-[none/sm/md/lg/xl/2xl]</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar horizontal.</td></tr></tbody></table>
|
|
194
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
194
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3324" data-pf-content="true" class="pf-v6-c-content--h3">Width control</h3>
|
|
195
195
|
|
|
196
196
|
<astro-island uid="Z1FG2o8" 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-toolbar\" id=\"toolbar-width-control\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group\">\n <div\n class=\"pf-v6-c-toolbar__item\"\n style=\"--pf-v6-c-toolbar__item--Width: 80px; --pf-v6-c-toolbar__item--Width-on-xl: 10rem\"\n >Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
197
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
197
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3325" data-pf-content="true" class="pf-v6-c-content--h3">Width control usage</h3>
|
|
198
198
|
|
|
199
199
|
|
|
200
200
|
|
|
@@ -215,30 +215,30 @@
|
|
|
215
215
|
|
|
216
216
|
|
|
217
217
|
|
|
218
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>--pf-v6-c-toolbar__item--Width: {width}</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Modifies the width value of a toolbar item at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
219
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
220
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
218
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>--pf-v6-c-toolbar__item--Width: {width}</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Modifies the width value of a toolbar item at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3326" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>--pf-v6-c-toolbar__item--MinWidth: {width}</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Modifies the min width value of a toolbar item at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3327" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
|
|
219
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3328" data-pf-content="true" class="pf-v6-c-content--h2">Group types</h2>
|
|
220
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3329" data-pf-content="true" class="pf-v6-c-content--h3">Filter group</h3>
|
|
221
221
|
|
|
222
222
|
<astro-island uid="1I8Afe" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<h4 class=\"pf-v6-c-content--h4\">Standard filters</h4>\n<div class=\"pf-v6-c-toolbar\" id=\"toolbar-group-types-standard-filter\">\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-group-types-standard-filter-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-group-types-standard-filter-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n</div>\n<hr class=\"pf-v6-c-divider\" />\n<h4 class=\"pf-v6-c-content--h4\">Input groups and filters</h4>\n<div class=\"pf-v6-c-toolbar\" id=\"toolbar-group-types-input-group-filter\">\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-group-types-input-group-filter-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-group-types-input-group-filter-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
223
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
223
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3330" data-pf-content="true" class="pf-v6-c-content--h3">Action group</h3>
|
|
224
224
|
|
|
225
225
|
<astro-island uid="Zr4Qgk" 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-toolbar\" id=\"toolbar-group-types-action\">\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary</span>\n </button>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
226
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
226
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3331" data-pf-content="true" class="pf-v6-c-content--h3">Action group plain</h3>
|
|
227
227
|
|
|
228
228
|
<astro-island uid="Z29m8Dm" 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-toolbar\" id=\"toolbar-group-types-plain\">\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-plain\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Column view\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-columns\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Expand\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-expand\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Settings\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-cog\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
229
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
229
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3332" data-pf-content="true" class="pf-v6-c-content--h3">Action group inline</h3>
|
|
230
230
|
|
|
231
231
|
<astro-island uid="Z2gp0PF" 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-toolbar\" id=\"toolbar-group-types-inline\">\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-inline\">\n <div class=\"pf-v6-c-toolbar__item\">6 filters applied</div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Clear all filters</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Save all filters</span>\n </button>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
232
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
232
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3333" data-pf-content="true" class="pf-v6-c-content--h3">Label group</h3>
|
|
233
233
|
|
|
234
234
|
<astro-island uid="Z1Aj0Ft" 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-toolbar\" id=\"toolbar-group-label-group\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__group pf-m-grow pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-group-label-group-label-group-status-label-group-label\"\n >Status</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-group-label-group-label-group-status-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-statuslabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-statusremove-label-one toolbar-group-label-group-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-statusremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-statuslabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-statusremove-label-two toolbar-group-label-group-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-statusremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-statuslabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-statusremove-label-three toolbar-group-label-group-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-statusremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-group-label-group-label-group-risk-label-group-label\"\n >Risk</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-group-label-group-label-group-risk-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-risklabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-riskremove-label-one toolbar-group-label-group-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-riskremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-risklabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-riskremove-label-two toolbar-group-label-group-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-riskremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-group-label-group-label-group-risklabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-group-label-group-label-group-riskremove-label-three toolbar-group-label-group-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-group-label-group-label-group-riskremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
235
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
235
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3334" data-pf-content="true" class="pf-v6-c-content--h3">Toggle group on mobile (filters collapsed, expandable content expanded)</h3>
|
|
236
236
|
|
|
237
237
|
<astro-island uid="QnKcw" 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-toolbar\" id=\"toolbar-toggle-group-on-mobile\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__toggle\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-expanded\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Show filters\"\n aria-controls=\"toolbar-toggle-group-on-mobile-expandable-content\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-filter\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__expandable-content pf-m-expanded\"\n id=\"toolbar-toggle-group-on-mobile-expandable-content\"\n >\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-expandable-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-menu-toggle-checkbox-status-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-on-mobile-menu-toggle-checkbox-risk-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
238
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
238
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3335" data-pf-content="true" class="pf-v6-c-content--h3">Toggle group on desktop</h3>
|
|
239
239
|
|
|
240
240
|
<astro-island uid="Z2nW8eS" 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-toolbar\" id=\"toolbar-toggle-group-desktop\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group pf-m-show pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__toggle\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Show filters\"\n aria-controls=\"toolbar-toggle-group-desktop-expandable-content\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-filter\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__group pf-m-show pf-m-filter-group pf-m-toggle-group\"\n >\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__expandable-content pf-m-hidden\"\n id=\"toolbar-toggle-group-desktop-expandable-content\"\n hidden\n >\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-expandable-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-menu-toggle-checkbox-status-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-toggle-group-desktop-menu-toggle-checkbox-risk-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
241
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
241
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3336" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar group types</h3>
|
|
242
242
|
|
|
243
243
|
|
|
244
244
|
|
|
@@ -275,7 +275,7 @@
|
|
|
275
275
|
|
|
276
276
|
|
|
277
277
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-filter-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group column gap.</td></tr><tr><td><code>.pf-m-action-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group column gap for action group.</td></tr><tr><td><code>.pf-m-action-group-plain</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group column gap for action plain group.</td></tr><tr><td><code>.pf-m-action-group-inline</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group column gap for action inline group.</td></tr><tr><td><code>.pf-m-toggle-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>The <code>.pf-m-toggle-group</code> controls when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. <code>.pf-m-show-on-{md, lg, xl}</code> controls when filters are shown and when the toggle button is hidden.</td></tr></tbody></table>
|
|
278
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
278
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3337" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
|
|
279
279
|
|
|
280
280
|
|
|
281
281
|
|
|
@@ -307,7 +307,7 @@
|
|
|
307
307
|
|
|
308
308
|
|
|
309
309
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>hidden</code></td><td><code>.pf-v6-c-toolbar__item</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__toggle</code>, <code>.pf-v6-c-toolbar__expandable-content</code></td><td>Indicates that the toggle group element is hidden. <strong>Required</strong></td></tr><tr><td><code>aria-expanded="[true/false]"</code></td><td><code>.pf-v6-c-toolbar__toggle > .pf-v6-c-button</code></td><td>Indicates that the expandable content is visible/hidden. <strong>Required</strong></td></tr><tr><td><code>aria-controls="[id of expandable content]"</code></td><td><code>.pf-v6-c-toolbar__toggle > .pf-v6-c-button</code></td><td>Identifies the expanded content controlled by the toggle button. <strong>Required</strong></td></tr><tr><td><code>id="[expandable-content_id]"</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td>Provides a reference for toggle button description. <strong>Required</strong></td></tr></tbody></table>
|
|
310
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
310
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3338" data-pf-content="true" class="pf-v6-c-content--h3">Responsive attributes</h3>
|
|
311
311
|
|
|
312
312
|
|
|
313
313
|
|
|
@@ -324,7 +324,7 @@
|
|
|
324
324
|
|
|
325
325
|
|
|
326
326
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>aria-haspopup=true</code></td><td><code>.pf-v6-c-toolbar__toggle > .pf-v6-c-button</code></td><td>When expandable content appears above content (mobile viewport), <code>aria-haspopup=true</code> should be applied to indicate that focus should be trapped. <strong>Required</strong></td></tr></tbody></table>
|
|
327
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
327
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3339" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
328
328
|
|
|
329
329
|
|
|
330
330
|
|
|
@@ -346,39 +346,39 @@
|
|
|
346
346
|
|
|
347
347
|
|
|
348
348
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code>, <code>.pf-v6-c-toolbar__expandable-content</code></td><td>Modifies toolbar element visibility.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code>, <code>.pf-v6-c-toolbar__toggle</code></td><td>Modifies the component for the expanded state.</td></tr></tbody></table>
|
|
349
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
350
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
349
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3340" data-pf-content="true" class="pf-v6-c-content--h3">Selected</h3>
|
|
350
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3341" data-pf-content="true" class="pf-v6-c-content--h3">Selected filters on mobile (filters collapsed, selected filters summary visible)</h3>
|
|
351
351
|
|
|
352
352
|
<astro-island uid="RJ3k1" 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-toolbar\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example\"\n>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item pf-m-bulk-select\">\n <div\n class=\"pf-v6-c-menu-toggle pf-m-split-button\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-check\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"toolbar-selected-filters-toggle-group-collapsed-example-check-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-check-check-input\"\n name=\"toolbar-selected-filters-toggle-group-collapsed-example-check-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n <button\n class=\"pf-v6-c-menu-toggle__button\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-toggle-button\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__toggle\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Show filters\"\n aria-controls=\"toolbar-selected-filters-toggle-group-collapsed-example-expandable-content\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-filter\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__expandable-content pf-m-hidden\"\n id=\"toolbar-selected-filters-toggle-group-collapsed-example-expandable-content\"\n hidden\n >\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-inline\">\n <div class=\"pf-v6-c-toolbar__item\">6 filters applied</div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Clear all filters</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Save all filters</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-inline\">\n <div class=\"pf-v6-c-toolbar__item\">6 filters applied</div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Clear all filters</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Save all filters</span>\n </button>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
353
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
353
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3342" data-pf-content="true" class="pf-v6-c-content--h3">Selected filters on mobile (filters collapsed, expandable content expanded)</h3>
|
|
354
354
|
|
|
355
355
|
<astro-island uid="Z1Yfn5d" 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-toolbar\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example\"\n>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item pf-m-bulk-select\">\n <div\n class=\"pf-v6-c-menu-toggle pf-m-split-button\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-check\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"toolbar-selected-filters-toggle-group-expanded-example-check-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-check-check-input\"\n name=\"toolbar-selected-filters-toggle-group-expanded-example-check-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n <button\n class=\"pf-v6-c-menu-toggle__button\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-toggle-button\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__toggle\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-expanded\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Show filters\"\n aria-controls=\"toolbar-selected-filters-toggle-group-expanded-example-expandable-content\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-filter\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__expandable-content pf-m-expanded\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-expandable-content\"\n >\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-expandable-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-status-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-menu-toggle-checkbox-risk-expandable\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__group pf-m-grow pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label\"\n >Status</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-status-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-statusremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label\"\n >Risk</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-risk-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three toolbar-selected-filters-toggle-group-expanded-example-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-toggle-group-expanded-example-label-group-riskremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-inline\">\n <div class=\"pf-v6-c-toolbar__item\">6 filters applied</div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Clear all filters</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Save all filters</span>\n </button>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
356
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
356
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3343" data-pf-content="true" class="pf-v6-c-content--h3">Selected filters on desktop (not responsive)</h3>
|
|
357
357
|
|
|
358
358
|
<astro-island uid="ZdVEFt" 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-toolbar\" id=\"toolbar-selected-filters-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item pf-m-bulk-select\">\n <div\n class=\"pf-v6-c-menu-toggle pf-m-split-button\"\n id=\"toolbar-selected-filters-example-check\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"toolbar-selected-filters-example-check-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"toolbar-selected-filters-example-check-check-input\"\n name=\"toolbar-selected-filters-example-check-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n <button\n class=\"pf-v6-c-menu-toggle__button\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-example-menu-toggle-toggle-button\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-example-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-selected-filters-example-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-selected-filters-example--overflow-menu\"\n >\n <div class=\"pf-v6-c-overflow-menu__content\">\n <div class=\"pf-v6-c-overflow-menu__group pf-m-button-group\">\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n </button>\n </div>\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"toolbar-selected-filters-example-overflow-toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__group pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__group pf-m-grow pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-selected-filters-example-label-group-status-label-group-label\"\n >Status</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-status-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-statuslabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-statusremove-label-one toolbar-selected-filters-example-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-statusremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-statuslabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-statusremove-label-two toolbar-selected-filters-example-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-statusremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-statuslabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-statusremove-label-three toolbar-selected-filters-example-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-statusremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-selected-filters-example-label-group-risk-label-group-label\"\n >Risk</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-risk-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-risklabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-riskremove-label-one toolbar-selected-filters-example-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-riskremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-risklabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-riskremove-label-two toolbar-selected-filters-example-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-riskremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-selected-filters-example-label-group-risklabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-selected-filters-example-label-group-riskremove-label-three toolbar-selected-filters-example-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-selected-filters-example-label-group-riskremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-action-group-inline\">\n <div class=\"pf-v6-c-toolbar__item\">6 filters applied</div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Clear all filters</span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Save all filters</span>\n </button>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
359
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
360
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
359
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3344" data-pf-content="true" class="pf-v6-c-content--h3">Stacked</h3>
|
|
360
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3345" data-pf-content="true" class="pf-v6-c-content--h3">Stacked on desktop</h3>
|
|
361
361
|
|
|
362
362
|
<astro-island uid="2ur6Is" 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-toolbar\" id=\"toolbar-stacked-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-stacked-example--overflow-menu\"\n >\n <div class=\"pf-v6-c-overflow-menu__content\">\n <div class=\"pf-v6-c-overflow-menu__group pf-m-button-group\">\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary</span>\n </button>\n </div>\n <div class=\"pf-v6-c-overflow-menu__item\">\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary</span>\n </button>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-overflow-menu__control\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"toolbar-stacked-example-overflow-toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item pf-m-bulk-select\">\n <div\n class=\"pf-v6-c-menu-toggle pf-m-split-button\"\n id=\"toolbar-stacked-example-check\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"toolbar-stacked-example-check-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"toolbar-stacked-example-check-check-input\"\n name=\"toolbar-stacked-example-check-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n <button\n class=\"pf-v6-c-menu-toggle__button\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-stacked-example-menu-toggle-toggle-button\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div class=\"pf-v6-c-pagination\" aria-label=\"Element pagination\">\n <div class=\"pf-v6-c-pagination__total-items\">37 items</div>\n <div class=\"pf-v6-c-pagination__page-menu\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"toolbar-stacked-example-pagination-menu-toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">\n <b>1 - 10</b>&nbsp;of&nbsp;\n <b>36</b>\n </span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n\n <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\n <div class=\"pf-v6-c-pagination__nav-control pf-m-first\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to first page\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-double-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-pagination__nav-control pf-m-prev\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to previous page\"\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\n <div\n class=\"pf-v6-c-pagination__nav-page-select\"\n aria-label=\"Current page 1 of 4\"\n >\n <span class=\"pf-v6-c-form-control\">\n <input\n aria-label=\"Current page\"\n type=\"number\"\n min=\"1\"\n max=\"4\"\n value=\"1\"\n />\n </span>\n <span aria-hidden=\"true\">of 4</span>\n </div>\n <div class=\"pf-v6-c-pagination__nav-control pf-m-next\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to next page\"\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 class=\"pf-v6-c-pagination__nav-control pf-m-last\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to last page\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-double-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </nav>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
363
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
363
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3346" data-pf-content="true" class="pf-v6-c-content--h3">Stacked on mobile (filters collapsed, expandable content expanded)</h3>
|
|
364
364
|
|
|
365
365
|
<astro-island uid="Z1n6cyg" 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-toolbar\" id=\"toolbar-stacked-collapsed-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__toggle\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-expanded\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-label=\"Show filters\"\n aria-controls=\"toolbar-stacked-collapsed-example-expandable-content\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-filter\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-input-group\"\n aria-label=\"search filter\"\n role=\"group\"\n >\n <div class=\"pf-v6-c-input-group__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-stacked-collapsed-example-search-filter-menu\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Name</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-input-group__item pf-m-fill\">\n <div class=\"pf-v6-c-text-input-group\">\n <div class=\"pf-v6-c-text-input-group__main pf-m-icon\">\n <span class=\"pf-v6-c-text-input-group__text\">\n <span class=\"pf-v6-c-text-input-group__icon\">\n <i class=\"fas fa-fw fa-search\"></i>\n </span>\n <input\n class=\"pf-v6-c-text-input-group__text-input\"\n type=\"text\"\n placeholder=\"Find by name\"\n value\n aria-label=\"Search input\"\n />\n </span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pf-v6-c-toolbar__group pf-m-filter-group pf-m-toggle-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-stacked-collapsed-example-menu-toggle-checkbox-status\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <button\n class=\"pf-v6-c-menu-toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-stacked-collapsed-example-menu-toggle-checkbox-risk\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Risk</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <div\n class=\"pf-v6-c-toolbar__expandable-content pf-m-expanded\"\n id=\"toolbar-stacked-collapsed-example-expandable-content\"\n >\n <div class=\"pf-v6-c-toolbar__group pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__group pf-m-grow pf-m-label-group\">\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-stacked-collapsed-example-label-group-status-label-group-label\"\n >Status</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-status-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-statuslabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-one toolbar-stacked-collapsed-example-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-statuslabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-two toolbar-stacked-collapsed-example-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-statuslabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-three toolbar-stacked-collapsed-example-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-statusremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item\">\n <div class=\"pf-v6-c-label-group pf-m-category\">\n <div class=\"pf-v6-c-label-group__main\">\n <span\n class=\"pf-v6-c-label-group__label\"\n aria-hidden=\"true\"\n id=\"toolbar-stacked-collapsed-example-label-group-risk-label-group-label\"\n >Risk</span>\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-risk-label-group-label\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-risklabel-one\"\n >Label one</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-one toolbar-stacked-collapsed-example-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-one\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-risklabel-two\"\n >Label two</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-two toolbar-stacked-collapsed-example-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-two\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-outline\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__content\">\n <span\n class=\"pf-v6-c-label__text\"\n id=\"toolbar-stacked-collapsed-example-label-group-risklabel-three\"\n >Label three</span>\n </span>\n <span class=\"pf-v6-c-label__actions\">\n <button\n class=\"pf-v6-c-button pf-m-no-padding pf-m-plain\"\n type=\"button\"\n aria-labelledby=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-three toolbar-stacked-collapsed-example-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-stacked-collapsed-example-label-group-riskremove-label-three\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </span>\n </span>\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item pf-m-bulk-select\">\n <div\n class=\"pf-v6-c-menu-toggle pf-m-split-button\"\n id=\"toolbar-stacked-collapsed-example-check\"\n >\n <label\n class=\"pf-v6-c-check pf-m-standalone\"\n for=\"toolbar-stacked-collapsed-example-check-check-input\"\n >\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"toolbar-stacked-collapsed-example-check-check-input\"\n name=\"toolbar-stacked-collapsed-example-check-check-input\"\n aria-label=\"Standalone check\"\n />\n </label>\n <button\n class=\"pf-v6-c-menu-toggle__button\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"toolbar-stacked-collapsed-example-menu-toggle-toggle-button\"\n aria-label=\"Menu toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div class=\"pf-v6-c-pagination\" aria-label=\"Element pagination\">\n <div class=\"pf-v6-c-pagination__total-items\">37 items</div>\n <div class=\"pf-v6-c-pagination__page-menu\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"toolbar-stacked-collapsed-example-pagination-menu-toggle\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">\n <b>1 - 10</b>&nbsp;of&nbsp;\n <b>36</b>\n </span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n\n <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\n <div class=\"pf-v6-c-pagination__nav-control pf-m-first\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to first page\"\n disabled\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-double-left\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-pagination__nav-control pf-m-prev\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to previous page\"\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\n <div\n class=\"pf-v6-c-pagination__nav-page-select\"\n aria-label=\"Current page 1 of 4\"\n >\n <span class=\"pf-v6-c-form-control\">\n <input\n aria-label=\"Current page\"\n type=\"number\"\n min=\"1\"\n max=\"4\"\n value=\"1\"\n />\n </span>\n <span aria-hidden=\"true\">of 4</span>\n </div>\n <div class=\"pf-v6-c-pagination__nav-control pf-m-next\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to next page\"\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 class=\"pf-v6-c-pagination__nav-control pf-m-last\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Go to last page\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-angle-double-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n </nav>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
366
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
366
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3347" data-pf-content="true" class="pf-v6-c-content--h3">Primary background</h3>
|
|
367
367
|
|
|
368
368
|
<astro-island uid="1iGDdo" 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-toolbar pf-m-primary\"\n id=\"toolbar-primary-background-example\"\n>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
369
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
369
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3348" data-pf-content="true" class="pf-v6-c-content--h3">Secondary background</h3>
|
|
370
370
|
|
|
371
371
|
<astro-island uid="1yDwwj" 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-toolbar pf-m-secondary\"\n id=\"toolbar-secondary-background-example\"\n>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
372
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
372
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3349" data-pf-content="true" class="pf-v6-c-content--h3">No background</h3>
|
|
373
373
|
|
|
374
374
|
<astro-island uid="Zep44V" 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-toolbar pf-m-no-background\"\n id=\"toolbar-no-background-example\"\n>\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
375
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
375
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3350" data-pf-content="true" class="pf-v6-c-content--h3">Sticky toolbar</h3>
|
|
376
376
|
|
|
377
377
|
<astro-island uid="1sWFcP" 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-toolbar pf-m-sticky\" id=\"toolbar-sticky-example\">\n <div class=\"pf-v6-c-toolbar__content\">\n <div class=\"pf-v6-c-toolbar__content-section\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n\n <div class=\"pf-v6-c-toolbar__group\">\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n <div class=\"pf-v6-c-toolbar__item\">Item</div>\n </div>\n </div>\n</div>\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempor mattis massa dignissim blandit. Mauris pellentesque nisi a erat ultricies, mollis auctor nulla volutpat. Donec eu nisl magna. Donec nisi nulla, blandit et mauris in, lobortis elementum neque. Nunc pharetra eleifend purus, in commodo nisl accumsan in. Vestibulum feugiat nisl eu venenatis feugiat. Morbi ornare velit vitae tellus sollicitudin, sed ornare neque sagittis. Proin sodales, libero et vestibulum luctus, nunc mi euismod dui, vel accumsan lacus odio vel nibh. Etiam at mattis purus, sit amet vestibulum metus. Maecenas feugiat condimentum ligula eget hendrerit. Nullam eleifend convallis sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam rhoncus consectetur enim, at interdum mi tincidunt eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.\n<br />\n<br />\nMaecenas vel sollicitudin ipsum, pulvinar pharetra magna. Aenean vel ipsum vel purus malesuada sagittis eget ac odio. Nullam vitae diam mollis, consectetur est vitae, sodales diam. Vivamus eu lectus quis mi maximus porta. Praesent erat sapien, vestibulum nec libero non, tincidunt congue mauris. Pellentesque vitae imperdiet mi. Nulla in ipsum neque. Cras a quam ut sem venenatis euismod non at tortor. Mauris porta purus augue, ut pharetra elit varius at. Vestibulum fringilla ligula ac leo tristique, porta venenatis nibh convallis.\n<br />\n<br />\nVestibulum vel orci mattis magna tristique suscipit. In vel tellus tempor, consectetur mi at, pellentesque enim. Cras venenatis tellus eget velit porttitor, sit amet malesuada tortor venenatis. Maecenas vitae augue ac orci volutpat gravida. In fermentum, orci eget tincidunt lobortis, turpis orci porta nibh, cursus dignissim lectus sapien at felis. Nulla facilisi. Aenean lectus justo, pellentesque sed nulla ut, pulvinar pellentesque tortor. Ut tempus euismod dolor gravida rhoncus. Quisque sed lorem sit amet erat tincidunt aliquet quis in nulla. Maecenas arcu erat, hendrerit a dui eget, convallis pharetra sapien. Nunc tellus enim, dictum eu egestas vel, ultrices eget est. Etiam quis vehicula sem. Nulla facilisi. Donec ante ipsum, fringilla iaculis ex a, tincidunt lobortis mi.\n<br />\n<br />\nEtiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse porttitor sem quis ante consequat, vitae commodo nulla ultricies. Nulla fermentum ipsum ac dolor elementum, eu luctus ex condimentum. Sed sed arcu aliquam, porta metus in, sollicitudin felis. Sed faucibus lacus consectetur orci ultricies laoreet. Morbi sed lectus dictum sem tempor porta. Donec ut diam tempor, venenatis erat vitae, accumsan diam. Etiam sed purus eget lacus vehicula iaculis non euismod dolor. Quisque ultricies eget est in semper.\n<br />\n<br />Fusce tristique nulla id vestibulum maximus. Morbi sit amet nisi nec orci pulvinar interdum. Duis convallis, nunc vel pharetra blandit, urna neque eleifend nunc, maximus faucibus tellus nisl a velit. Aliquam quis turpis tempor nisi ultricies fermentum at et ipsum. Pellentesque vel tincidunt nisl. Donec elit ante, sodales ac ultrices vitae, egestas ut magna. Nulla sollicitudin ornare mi, a porttitor sem fermentum vitae. Praesent maximus fringilla gravida. Sed ultricies turpis ut lacus sodales, et aliquet risus accumsan. Pellentesque lacus sapien, cursus vitae nulla vel, bibendum tristique risus.\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
378
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
379
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
380
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
381
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
378
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3351" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
379
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3352" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
|
|
380
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3353" data-pf-content="true" class="pf-v6-c-content--p">As the toolbar component is a hybrid layout and component, some of its elements are presentational, while some require accessibility support.</p>
|
|
381
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3354" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
382
382
|
|
|
383
383
|
|
|
384
384
|
|
|
@@ -534,8 +534,8 @@
|
|
|
534
534
|
|
|
535
535
|
|
|
536
536
|
|
|
537
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-toolbar</code></td><td><code><div></code></td><td>Initiates the toolbar component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__item</code></td><td><code><div></code></td><td>Initiates a toolbar item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__group</code></td><td><code><div></code></td><td>Initiates a toolbar group.</td></tr><tr><td><code>.pf-v6-c-toolbar__content</code></td><td><code><div></code></td><td>Initiates a toolbar content container. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__content-section</code></td><td><code><div></code></td><td>Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one <code>.pf-v6-c-toolbar__content-section</code> per <code>.pf-v6-c-toolbar__content</code> <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td><code><div></code></td><td>Initiates a toolbar expandable content section.</td></tr><tr><td><code>.pf-v6-c-toolbar__expand-all-icon</code></td><td><code><div></code></td><td>Initiates a toolbar expand all icon.</td></tr><tr><td><code>.pf-m-sticky</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar component to be sticky to the top of its container.</td></tr><tr><td><code>.pf-m-full-height</code></td><td><code>.pf-v6-c-toolbar</code>, <code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar component to full height of its container and removes vertical padding.</td></tr><tr><td><code>.pf-m-static</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar.</td></tr><tr><td><code>.pf-m-primary</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have primary background color.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have secondary background color.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have no padding.</td></tr><tr><td><code>.pf-m-no-background</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have no background color.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td>Modifies expandable content section for the expanded state.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__item.pf-m-expand-all</code></td><td>Modifies an expand all button for the expanded state.</td></tr><tr><td><code>.pf-m-action-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates action group spacing.</td></tr><tr><td><code>.pf-m-action-group-inline</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates inline action group spacing.</td></tr><tr><td><code>.pf-m-action-group-plain</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates plain action group spacing.</td></tr><tr><td><code>.pf-m-filter-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates filter group spacing.</td></tr><tr><td><code>.pf-m-label</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Initiates label item presenatation.</td></tr><tr><td><code>.pf-m-label-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates label group spacing.</td></tr><tr><td><code>.pf-m-overflow-container</code></td><td><code>.pf-v6-c-toolbar__item</code>, <code>.pf-v6-c-toolbar__group</code></td><td>Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code>, <code>.pf-v6-c-toolbar__toggle</code></td><td>Modifies the component for the expanded state.</td></tr><tr><td><code>.pf-m-[wrap/nowrap]</code></td><td><code>.pf-v6-c-toolbar__content</code>, <code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies the toolbar element to wrap/not wrap.</td></tr><tr><td><code>.pf-m-align-[start/center/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
538
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
537
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-toolbar</code></td><td><code><div></code></td><td>Initiates the toolbar component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__item</code></td><td><code><div></code></td><td>Initiates a toolbar item. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__group</code></td><td><code><div></code></td><td>Initiates a toolbar group.</td></tr><tr><td><code>.pf-v6-c-toolbar__content</code></td><td><code><div></code></td><td>Initiates a toolbar content container. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__content-section</code></td><td><code><div></code></td><td>Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one <code>.pf-v6-c-toolbar__content-section</code> per <code>.pf-v6-c-toolbar__content</code> <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td><code><div></code></td><td>Initiates a toolbar expandable content section.</td></tr><tr><td><code>.pf-v6-c-toolbar__expand-all-icon</code></td><td><code><div></code></td><td>Initiates a toolbar expand all icon.</td></tr><tr><td><code>.pf-m-sticky</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar component to be sticky to the top of its container.</td></tr><tr><td><code>.pf-m-full-height</code></td><td><code>.pf-v6-c-toolbar</code>, <code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar component to full height of its container and removes vertical padding.</td></tr><tr><td><code>.pf-m-static</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar.</td></tr><tr><td><code>.pf-m-primary</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have primary background color.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have secondary background color.</td></tr><tr><td><code>.pf-m-no-padding</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have no padding.</td></tr><tr><td><code>.pf-m-no-background</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar to have no background color.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td>Modifies expandable content section for the expanded state.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__item.pf-m-expand-all</code></td><td>Modifies an expand all button for the expanded state.</td></tr><tr><td><code>.pf-m-action-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates action group spacing.</td></tr><tr><td><code>.pf-m-action-group-inline</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates inline action group spacing.</td></tr><tr><td><code>.pf-m-action-group-plain</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates plain action group spacing.</td></tr><tr><td><code>.pf-m-filter-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates filter group spacing.</td></tr><tr><td><code>.pf-m-label</code></td><td><code>.pf-v6-c-toolbar__item</code></td><td>Initiates label item presenatation.</td></tr><tr><td><code>.pf-m-label-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Initiates label group spacing.</td></tr><tr><td><code>.pf-m-overflow-container</code></td><td><code>.pf-v6-c-toolbar__item</code>, <code>.pf-v6-c-toolbar__group</code></td><td>Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code>, <code>.pf-v6-c-toolbar__toggle</code></td><td>Modifies the component for the expanded state.</td></tr><tr><td><code>.pf-m-[wrap/nowrap]</code></td><td><code>.pf-v6-c-toolbar__content</code>, <code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies the toolbar element to wrap/not wrap.</td></tr><tr><td><code>.pf-m-align-[start/center/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3355" data-pf-content="true" class="pf-v6-c-content--a">main axis</a> element alignment.</td></tr><tr><td><code>.pf-m-align-items-[stretch/baseline/start/center/end]</code></td><td><code>.pf-v6-c-toolbar__content</code>, <code>.pf-v6-c-toolbar__content-section</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element <a 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--a">cross axis</a> child alignment.</td></tr><tr><td><code>.pf-m-align-self-[stretch/baseline/start/center/end]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar element <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3357" data-pf-content="true" class="pf-v6-c-content--a">cross axis</a> self alignment.</td></tr><tr><td><code>.pf-m-inset-[none/sm/md/lg/xl/2xl]</code></td><td><code>.pf-v6-c-toolbar</code></td><td>Modifies toolbar horizontal.</td></tr></tbody></table>
|
|
538
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3358" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
|
|
539
539
|
|
|
540
540
|
|
|
541
541
|
|
|
@@ -577,7 +577,7 @@
|
|
|
577
577
|
|
|
578
578
|
|
|
579
579
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>hidden</code></td><td><code>.pf-v6-c-toolbar__item</code>, <code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__toggle</code>, <code>.pf-v6-c-toolbar__expandable-content</code></td><td>Indicates that the toolbar element is hidden. <strong>Required</strong></td></tr><tr><td><code>aria-expanded="[true/false]"</code></td><td><code>.pf-v6-c-toolbar__toggle > .pf-v6-c-button</code></td><td>Indicates the the expandable content is hidden/visible. <strong>Required</strong></td></tr><tr><td><code>aria-controls="[id of expandable content]"</code></td><td><code>.pf-v6-c-toolbar__toggle > .pf-v6-c-button</code></td><td>Identifies the expanded content controlled by the toggle button. <strong>Required</strong></td></tr><tr><td><code>id="[expandable-content_id]"</code></td><td><code>.pf-v6-c-toolbar__expandable-content</code></td><td>Provides a reference for toggle button description. <strong>Required</strong></td></tr><tr><td><code>aria-label="Expand all"</code></td><td><code>.pf-v6-c-toolbar__item.pf-m-expand-all</code></td><td>Provides an accessible label for the expand all item button. <strong>Required</strong></td></tr><tr><td><code>aria-label="Collapse all"</code></td><td><code>.pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded</code></td><td>Provides an accessible label for the expand all item button. <strong>Required</strong></td></tr></tbody></table>
|
|
580
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
580
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3359" data-pf-content="true" class="pf-v6-c-content--h3">Toggle group usage</h3>
|
|
581
581
|
|
|
582
582
|
|
|
583
583
|
|
|
@@ -599,7 +599,7 @@
|
|
|
599
599
|
|
|
600
600
|
|
|
601
601
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-toggle-group</code></td><td><code>.pf-v6-c-toolbar__group</code></td><td>Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached.</td></tr><tr><td><code>.pf-m-[show/hide]</code></td><td><code>.pf-v6-c-toolbar__group.pf-m-toggle-group</code>, <code>.pf-v6-c-toolbar__expandable-content</code></td><td>Modifies toolbar element to hidden.</td></tr></tbody></table>
|
|
602
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
602
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3360" data-pf-content="true" class="pf-v6-c-content--h3">Spacer system</h3>
|
|
603
603
|
|
|
604
604
|
|
|
605
605
|
|
|
@@ -620,6 +620,6 @@
|
|
|
620
620
|
|
|
621
621
|
|
|
622
622
|
|
|
623
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
623
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3361" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>.pf-m-gap-[none/sm/md/lg/xl/2xl]</code></td><td><code>.pf-v6-c-toolbar__group</code>, <code>.pf-v6-c-toolbar__item</code></td><td>Modifies both column and row gap for toolbar group or item spacing at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3362" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</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-3305" 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>
|
|
624
624
|
CSS variables
|
|
625
625
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZTcjsE" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-toolbar"]}" 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>
|