@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
|
@@ -42,13 +42,13 @@
|
|
|
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="ZJQhYX" prefix="r4" 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-349"><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="ZWqBuY" prefix="r6" 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-117"><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-350"><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-351"><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-117"><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-2009" data-pf-content="true" class="pf-v6-c-content--p">import ’./Toolbar.css’</p>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1NKv0m" prefix="r4" 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-325"><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="ZKG6RK" prefix="r6" 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-109"><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-326"><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-327"><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-109"><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-1822" data-pf-content="true" class="pf-v6-c-content--p">import ’./Toolbar.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1823" data-pf-content="true" class="pf-v6-c-content--h2">Demos</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1824" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value search filter on desktop</h3>
|
|
48
48
|
|
|
49
49
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="Znj8pY" 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-attribute-value-search-filter-desktop-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__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-attribute-value-search-filter-desktop-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-attribute-value-search-filter-desktop-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 </div>\n\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-attribute-value-search-filter-desktop-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-attribute-value-search-filter-desktop-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-search-filter-desktop-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-search-filter-desktop-example-expandable-content\"\n hidden\n ></div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
51
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1825" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar with validation on desktop</h3>
|
|
51
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1832" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-page"</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"toolbar-pagination-management-example"</span><span style="color:#E1E4E8">></span></span>
|
|
52
52
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-skip-to-content"</span><span style="color:#E1E4E8">></span></span>
|
|
53
53
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span></span>
|
|
54
54
|
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-button pf-m-primary"</span></span>
|
|
@@ -968,23 +968,23 @@
|
|
|
968
968
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
969
969
|
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
970
970
|
<span class="line"></span></code></pre>
|
|
971
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
971
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1826" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value search filter on mobile</h3>
|
|
972
972
|
|
|
973
973
|
<astro-island uid="1XnTDs" 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-attribute-value-search-filter-mobile-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__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-attribute-value-search-filter-mobile-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-attribute-value-search-filter-mobile-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-attribute-value-search-filter-mobile-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-attribute-value-search-filter-mobile-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\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-attribute-value-search-filter-mobile-example--overflow-menu\"\n >\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-attribute-value-search-filter-mobile-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-search-filter-mobile-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-search-filter-mobile-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-attribute-value-search-filter-mobile-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 </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
974
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
974
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1827" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value single select filter on desktop</h3>
|
|
975
975
|
|
|
976
976
|
<astro-island uid="Z2fnsds" 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-attribute-value-single-menu-toggle-filter-desktop-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__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-attribute-value-single-menu-toggle-filter-desktop-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-attribute-value-single-menu-toggle-filter-desktop-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-attribute-value-single-menu-toggle-filter-desktop-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-attribute-value-single-menu-toggle-filter-desktop-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-single-menu-toggle-filter-desktop-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-single-menu-toggle-filter-desktop-example-expandable-content\"\n hidden\n ></div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
977
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
977
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1828" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value single select filter on mobile</h3>
|
|
978
978
|
|
|
979
979
|
<astro-island uid="Z2nRa1p" 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-attribute-value-single-menu-toggle-filter-mobile-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__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-attribute-value-single-menu-toggle-filter-mobile-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-attribute-value-single-menu-toggle-filter-mobile-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-attribute-value-single-menu-toggle-filter-mobile-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-attribute-value-single-menu-toggle-filter-mobile-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\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-attribute-value-single-menu-toggle-filter-mobile-example--overflow-menu\"\n >\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-attribute-value-single-menu-toggle-filter-mobile-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-single-menu-toggle-filter-mobile-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-single-menu-toggle-filter-mobile-example-expandable-content\"\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-attribute-value-single-menu-toggle-filter-mobile-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-attribute-value-single-menu-toggle-filter-mobile-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 </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
980
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
980
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1829" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value checkbox menu toggle filter on desktop</h3>
|
|
981
981
|
|
|
982
982
|
<astro-island uid="Z1PGg0q" 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-attribute-value-checkbox-menu-toggle-filter-desktop-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__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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-checkbox-menu-toggle-filter-desktop-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-checkbox-menu-toggle-filter-desktop-example-expandable-content\"\n hidden\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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statusremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-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-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-riskremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-example-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-desktop-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>
|
|
983
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
983
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1830" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar attribute value checkbox menu toggle filter on mobile</h3>
|
|
984
984
|
|
|
985
985
|
<astro-island uid="Z2h9rfL" 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-attribute-value-checkbox-menu-toggle-filter-mobile-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__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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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\n <div class=\"pf-v6-c-toolbar__item\">\n <div\n class=\"pf-v6-c-overflow-menu\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example--overflow-menu\"\n >\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-attribute-value-checkbox-menu-toggle-filter-mobile-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 class=\"pf-v6-c-toolbar__item pf-m-pagination\">\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\n <div\n class=\"pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md\"\n >\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-attribute-value-checkbox-menu-toggle-filter-mobile-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 <nav class=\"pf-v6-c-pagination__nav\" aria-label=\"Pagination\">\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 disabled\n aria-label=\"Go to previous page\"\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 <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 </nav>\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-attribute-value-checkbox-menu-toggle-filter-mobile-example-expandable-content\"\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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statusremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-statuslabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-one toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-one\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-two toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-two\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-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-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-riskremove-label-three toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-example-label-group-risklabel-three\"\n aria-label=\"Remove\"\n id=\"toolbar-attribute-value-checkbox-menu-toggle-filter-mobile-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>
|
|
986
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
987
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
986
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1831" data-pf-content="true" class="pf-v6-c-content--h3">Toolbar pagination management on mobile</h3>
|
|
987
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1833" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-page"</span><span style="color:#B392F0"> id</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"toolbar-pagination-management-example"</span><span style="color:#E1E4E8">></span></span>
|
|
988
988
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-skip-to-content"</span><span style="color:#E1E4E8">></span></span>
|
|
989
989
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">a</span></span>
|
|
990
990
|
<span class="line"><span style="color:#B392F0"> class</span><span style="color:#E1E4E8">=</span><span style="color:#9ECBFF">"pf-v6-c-button pf-m-primary"</span></span>
|