@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,52 +42,52 @@
|
|
|
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="Z1XJupF" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-925"><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="Z2thaPA" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-309"><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-926"><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-927"><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-309"><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 pf-m-current"> <a class="pf-v6-c-tabs__link" href="/layouts/flex/html"> HTML </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-5829" data-pf-content="true" class="pf-v6-c-content--p">import ’./Flex.css’</p>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
48
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
51
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
52
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
-
<li 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="ZgRCAI" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-1195"><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="NjnkS" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-399"><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-1196"><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-1197"><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-399"><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 pf-m-current"> <a class="pf-v6-c-tabs__link" href="/layouts/flex/html"> HTML </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-7844" data-pf-content="true" class="pf-v6-c-content--p">import ’./Flex.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7845" data-pf-content="true" class="pf-v6-c-content--h2">Introduction</h2>
|
|
47
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7926" data-pf-content="true" class="pf-v6-c-content--p">The flex layout is based on the CSS Flex properties where the layout determines how a flex item will grow or shrink to fit the space available in its container. By default, a flex layout uses the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7846" data-pf-content="true" class="pf-v6-c-content--a">spacing system</a> to space children along the main axis and <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7847" data-pf-content="true" class="pf-v6-c-content--a">gap spacing</a> to space any wrapping children along the cross axis, <code>flex-wrap</code> is set to <code>wrap</code>, and <code>align-items</code> is set to <code>baseline</code>. The flex layout is infinitely nestable and can be nested to group items within.</p>
|
|
48
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7848" data-pf-content="true" class="pf-v6-c-content--h3">Spacing</h3>
|
|
49
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7849" data-pf-content="true" class="pf-v6-c-content--p">The flex layout provides two ways of spacing its direct children.</p>
|
|
50
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7934" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
51
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7932" data-pf-content="true" class="pf-v6-c-content--li"><a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7850" data-pf-content="true" class="pf-v6-c-content--a">Spacing system</a>
|
|
52
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7929" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
53
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7851" data-pf-content="true" class="pf-v6-c-content--li">The spacing system applies a margin between the flex layout’s direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.</li>
|
|
54
54
|
</ul>
|
|
55
55
|
</li>
|
|
56
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
57
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7933" data-pf-content="true" class="pf-v6-c-content--li"><a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7852" data-pf-content="true" class="pf-v6-c-content--a">Gap spacing</a>
|
|
57
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7931" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
58
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7919" data-pf-content="true" class="pf-v6-c-content--li">Gap spacing uses flex <code>gap</code> to space the flex layout’s direct children, and can be applied to space rows (<code>row-gap</code>), columns (<code>column-gap</code>), or both (<code>gap</code>). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex’s logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.</li>
|
|
59
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7920" data-pf-content="true" class="pf-v6-c-content--li"><strong>Note</strong> using <code>gap</code> along the main axis will override any other spacing applied using the spacing system.</li>
|
|
60
60
|
</ul>
|
|
61
61
|
</li>
|
|
62
62
|
</ul>
|
|
63
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
66
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
67
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
63
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7853" data-pf-content="true" class="pf-v6-c-content--h3">Breakpoints</h3>
|
|
64
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7927" data-pf-content="true" class="pf-v6-c-content--p"><a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7854" data-pf-content="true" class="pf-v6-c-content--a">Breakpoints</a> <code>-on-sm</code>, <code>-on-md</code>, <code>-on-lg</code>, <code>-on-xl</code>, and <code>-on-2xl</code> are provided.</p>
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7855" data-pf-content="true" class="pf-v6-c-content--h3">Usefulness</h3>
|
|
66
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7928" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
67
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7856" data-pf-content="true" class="pf-v6-c-content--li">Use when content dictates layout and elements wrap when necessary.</li>
|
|
68
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7857" data-pf-content="true" class="pf-v6-c-content--li">Use when a rigid grid is not necessary/wanted.</li>
|
|
69
69
|
</ul>
|
|
70
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
72
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
75
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
70
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7858" data-pf-content="true" class="pf-v6-c-content--h3">Differences from utility class</h3>
|
|
71
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7930" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
72
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7921" data-pf-content="true" class="pf-v6-c-content--li">It contains multiple css declarations and does not use the <code>!important</code> tag.</li>
|
|
73
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7859" data-pf-content="true" class="pf-v6-c-content--li">It does not require wrapping elements in columns or rows.</li>
|
|
74
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7860" data-pf-content="true" class="pf-v6-c-content--li">It breaks the dependency upon adding utility classes to each child.</li>
|
|
75
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7861" data-pf-content="true" class="pf-v6-c-content--li">It can be applied to container elements or components.</li>
|
|
76
76
|
</ul>
|
|
77
|
-
<h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
78
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
79
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h1 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7862" data-pf-content="true" class="pf-v6-c-content--h1">Examples</h1>
|
|
78
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7863" data-pf-content="true" class="pf-v6-c-content--h2">Basic flex layout</h2>
|
|
79
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7864" data-pf-content="true" class="pf-v6-c-content--h3">Basic flex example</h3>
|
|
80
80
|
|
|
81
81
|
<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="1Wwh0G" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
82
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
82
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7865" data-pf-content="true" class="pf-v6-c-content--h3">Nested flex example</h3>
|
|
83
83
|
|
|
84
84
|
<astro-island uid="Fo3fi" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
85
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
85
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7866" data-pf-content="true" class="pf-v6-c-content--h3">Nested flex and items example</h3>
|
|
86
86
|
|
|
87
87
|
<astro-island uid="Z1S1VJF" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
88
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
90
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
88
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7867" data-pf-content="true" class="pf-v6-c-content--h3">Basic flex layout overview</h3>
|
|
89
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7868" data-pf-content="true" class="pf-v6-c-content--p">The CSS approach, by keeping specificity low on base class properties and resetting css variable values at higher specificities, allows any spacer property to be overwritten with a single selector (specificity of 10 or greater).</p>
|
|
90
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7869" data-pf-content="true" class="pf-v6-c-content--h3">Basic flex layout usage</h3>
|
|
91
91
|
|
|
92
92
|
|
|
93
93
|
|
|
@@ -109,17 +109,17 @@
|
|
|
109
109
|
|
|
110
110
|
|
|
111
111
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-l-flex</code></td><td><code>*</code></td><td>Initiates the flex layout. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-l-flex__item</code></td><td><code>.pf-v6-l-flex > *</code></td><td>Initiates a flex item. <strong>Required</strong></td></tr></tbody></table>
|
|
112
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
113
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
112
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7870" data-pf-content="true" class="pf-v6-c-content--h2">Spacing system</h2>
|
|
113
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7871" data-pf-content="true" class="pf-v6-c-content--h3">Spacing system on parent example</h3>
|
|
114
114
|
|
|
115
115
|
<astro-island uid="Z2sqVQd" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-space-items-2xl\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
116
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
116
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7872" data-pf-content="true" class="pf-v6-c-content--h3">Spacing system on children example</h3>
|
|
117
117
|
|
|
118
118
|
<astro-island uid="HdDX7" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item pf-m-spacer-none\">Item - none</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-xs\">Item - xs</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-sm\">Item - sm</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-md\">Item - md</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-lg\">Item - lg</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-xl\">Item - xl</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-2xl\">Item - 2xl</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-3xl\">Item - 3xl</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-4xl\">Item - 4xl</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
119
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
119
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7873" data-pf-content="true" class="pf-v6-c-content--h3">Spacing system on parent and children example</h3>
|
|
120
120
|
|
|
121
121
|
<astro-island uid="Z2q4Imj" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-space-items-2xl\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item pf-m-spacer-md\">Flex item - md</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
122
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
122
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7874" data-pf-content="true" class="pf-v6-c-content--h3">Spacing system usage</h3>
|
|
123
123
|
|
|
124
124
|
|
|
125
125
|
|
|
@@ -141,17 +141,17 @@
|
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the spacer between direct children along the main axis of a flex layout.</td></tr><tr><td><code>.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > *</code></td><td>Modifies the spacer for any individual direct child along the main axis of a flex layout.</td></tr></tbody></table>
|
|
144
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
145
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
144
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7875" data-pf-content="true" class="pf-v6-c-content--h2">Gap spacing</h2>
|
|
145
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7876" data-pf-content="true" class="pf-v6-c-content--h3">Row gap example</h3>
|
|
146
146
|
|
|
147
147
|
<astro-island uid="Z7K5Jm" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-row-gap-2xl\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
148
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
148
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7877" data-pf-content="true" class="pf-v6-c-content--h3">Column gap example</h3>
|
|
149
149
|
|
|
150
150
|
<astro-island uid="gqsWp" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-column-gap-2xl\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
151
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
151
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7878" data-pf-content="true" class="pf-v6-c-content--h3">Gap example</h3>
|
|
152
152
|
|
|
153
153
|
<astro-island uid="168RUa" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-gap-2xl\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
154
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
154
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7879" data-pf-content="true" class="pf-v6-c-content--h3">Gap spacing usage</h3>
|
|
155
155
|
|
|
156
156
|
|
|
157
157
|
|
|
@@ -178,25 +178,25 @@
|
|
|
178
178
|
|
|
179
179
|
|
|
180
180
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns and rows.</td></tr><tr><td><code>.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between rows.</td></tr><tr><td><code>.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns.</td></tr></tbody></table>
|
|
181
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
182
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
181
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7880" data-pf-content="true" class="pf-v6-c-content--h2">Layout modifiers</h2>
|
|
182
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7881" data-pf-content="true" class="pf-v6-c-content--h3">Default layout example</h3>
|
|
183
183
|
|
|
184
184
|
<astro-island uid="1RNftK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
185
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
185
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7882" data-pf-content="true" class="pf-v6-c-content--h3">Inline flex layout example</h3>
|
|
186
186
|
|
|
187
187
|
<astro-island uid="k4gd2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-inline-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
188
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
189
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
188
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7883" data-pf-content="true" class="pf-v6-c-content--h3">Basic flex grow example</h3>
|
|
189
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7922" data-pf-content="true" class="pf-v6-c-content--p">Adjusting width with <code>.pf-m-grow</code>, which sets <code>flex-grow: 1</code>. In this example, the first group is set to <code>.pf-m-grow</code>, will occupy the remaining available space.</p>
|
|
190
190
|
|
|
191
191
|
<astro-island uid="2rnvx8" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex pf-m-grow ws-example-flex-border\"\n data-label=\".pf-m-grow\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
192
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
193
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
192
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7884" data-pf-content="true" class="pf-v6-c-content--h3">Flex grow 1 example</h3>
|
|
193
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7923" data-pf-content="true" class="pf-v6-c-content--p">Adjusting width with <code>.pf-m-flex-1</code>. In this example, all groups are set to <code>.pf-m-flex-1</code>. They will share available space equally.</p>
|
|
194
194
|
|
|
195
195
|
<astro-island uid="agOlb" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex pf-m-flex-1 ws-example-flex-border\"\n data-label=\".pf-m-flex-1\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-flex-1 ws-example-flex-border\"\n data-label=\".pf-m-flex-1\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-flex-1 ws-example-flex-border\"\n data-label=\".pf-m-flex-1\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
196
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
196
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7885" data-pf-content="true" class="pf-v6-c-content--h3">Flex grow 1-4 example</h3>
|
|
197
197
|
|
|
198
198
|
<astro-island uid="Z2dlDqS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex pf-m-flex-1 ws-example-flex-border\"\n data-label=\".pf-m-flex-1\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-flex-2 ws-example-flex-border\"\n data-label=\".pf-m-flex-2\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-flex-3 ws-example-flex-border\"\n data-label=\".pf-m-flex-3\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-flex-4 ws-example-flex-border\"\n data-label=\".pf-m-flex-4\"\n >\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
199
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
199
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7886" data-pf-content="true" class="pf-v6-c-content--h3">Layout modifiers usage</h3>
|
|
200
200
|
|
|
201
201
|
|
|
202
202
|
|
|
@@ -258,14 +258,14 @@
|
|
|
258
258
|
|
|
259
259
|
|
|
260
260
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-inline-flex{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout display property to inline-flex.</td></tr><tr><td><code>.pf-m-grow{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex-grow property to 1.</td></tr><tr><td><code>.pf-m-shrink{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex-shrink property to 1.</td></tr><tr><td><code>.pf-m-full-width{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex item to full width of parent.</td></tr><tr><td><code>.pf-m-flex-1{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.</td></tr><tr><td><code>.pf-m-flex-2{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.</td></tr><tr><td><code>.pf-m-flex-3{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.</td></tr><tr><td><code>.pf-m-flex-4{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.</td></tr><tr><td><code>.pf-m-flex-default{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Resets a nested flex layout or flex item flex shorthand property to 0 1 auto.</td></tr><tr><td><code>.pf-m-flex-none{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to none.</td></tr></tbody></table>
|
|
261
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
262
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
261
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7887" data-pf-content="true" class="pf-v6-c-content--h2">Column layout modifiers</h2>
|
|
262
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7888" data-pf-content="true" class="pf-v6-c-content--h3">Basic column example</h3>
|
|
263
263
|
|
|
264
264
|
<astro-island uid="ZzeQuh" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
265
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
265
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7889" data-pf-content="true" class="pf-v6-c-content--h3">Nested column example</h3>
|
|
266
266
|
|
|
267
267
|
<astro-island uid="Z1ctz5t" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n<br />\n<br />\n<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
268
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
268
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7890" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
269
269
|
|
|
270
270
|
|
|
271
271
|
|
|
@@ -282,11 +282,11 @@
|
|
|
282
282
|
|
|
283
283
|
|
|
284
284
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-column{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies flex-direction property to column.</td></tr></tbody></table>
|
|
285
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
286
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
285
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7891" data-pf-content="true" class="pf-v6-c-content--h2">Responsive layouts</h2>
|
|
286
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7892" data-pf-content="true" class="pf-v6-c-content--h3">Flex direction responsive example</h3>
|
|
287
287
|
|
|
288
288
|
<astro-island uid="Z3iJCV" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-column pf-m-row-on-lg\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n<br />\n<br />\n<div class=\"pf-v6-l-flex pf-m-column pf-m-row-on-lg\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">\n <b>Because this text is long enough to wrap, this item's width will force the adjacent item to wrap. If content is likely to wrap, modifiers will need to be used to control width.</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.\n </div>\n </div>\n\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n<br />\n<br />\n<div class=\"pf-v6-l-flex pf-m-column pf-m-row-on-lg\">\n <div class=\"pf-v6-l-flex pf-m-flex-1\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <b>\n To control the width of the flex item, set\n <code>.pf-m-flex-1</code>.\n </b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Est animi modi temporibus, alias qui obcaecati ullam dolor nam, nulla magni iste rem praesentium numquam provident amet ut nesciunt harum accusamus.\n </div>\n </div>\n\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
289
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
289
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7893" data-pf-content="true" class="pf-v6-c-content--h3">Responsive layouts usage</h3>
|
|
290
290
|
|
|
291
291
|
|
|
292
292
|
|
|
@@ -308,33 +308,33 @@
|
|
|
308
308
|
|
|
309
309
|
|
|
310
310
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-column{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies flex-direction property to column.</td></tr><tr><td><code>.pf-m-row{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies flex-direction property to row.</td></tr></tbody></table>
|
|
311
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
312
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
313
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
311
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7894" data-pf-content="true" class="pf-v6-c-content--h2">Alignment</h2>
|
|
312
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7895" data-pf-content="true" class="pf-v6-c-content--h3">Basic align right example</h3>
|
|
313
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7924" data-pf-content="true" class="pf-v6-c-content--p">Aligning right with <code>.pf-m-align-right</code>. This solution will always align element right by setting margin-inline-start: auto, including when wrapped.</p>
|
|
314
314
|
|
|
315
315
|
<astro-island uid="10cfys" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item pf-m-align-right\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
316
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
316
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7896" data-pf-content="true" class="pf-v6-c-content--h3">Align right on single item example</h3>
|
|
317
317
|
|
|
318
318
|
<astro-island uid="Z3FJs2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item pf-m-align-right\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
319
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
319
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7897" data-pf-content="true" class="pf-v6-c-content--h3">Align right on multiple groups example</h3>
|
|
320
320
|
|
|
321
321
|
<astro-island uid="1ie4VS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-align-right\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-align-right\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
322
|
-
<h4 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
322
|
+
<h4 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7898" data-pf-content="true" class="pf-v6-c-content--h4">Alignment using .pf-m-flex-1 example</h4>
|
|
323
323
|
|
|
324
324
|
<astro-island uid="28nuKp" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-flex-1\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
325
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
325
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7899" data-pf-content="true" class="pf-v6-c-content--h3">Alignment using .pf-m-align-self-flex-end example</h3>
|
|
326
326
|
|
|
327
327
|
<astro-island uid="ZTqbTJ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-align-self-flex-end\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
328
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
328
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7900" data-pf-content="true" class="pf-v6-c-content--h3">Aligning nested columns with .pf-m-align-self-center example</h3>
|
|
329
329
|
|
|
330
330
|
<astro-island uid="1xYoxr" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-align-self-center\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
331
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
331
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7901" data-pf-content="true" class="pf-v6-c-content--h3">Aligning nested columns with .pf-m-align-self-baseline example</h3>
|
|
332
332
|
|
|
333
333
|
<astro-island uid="Z1aHxyB" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-align-self-baseline\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
334
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
334
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7902" data-pf-content="true" class="pf-v6-c-content--h3">Aligning nested columns with .pf-m-align-self-stretch example</h3>
|
|
335
335
|
|
|
336
336
|
<astro-island uid="ZK0pTe" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-align-self-stretch\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
337
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
337
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7903" data-pf-content="true" class="pf-v6-c-content--h3">Alignment usage</h3>
|
|
338
338
|
|
|
339
339
|
|
|
340
340
|
|
|
@@ -381,14 +381,14 @@
|
|
|
381
381
|
|
|
382
382
|
|
|
383
383
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-align-right{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies margin-inline-start property to auto.</td></tr><tr><td><code>.pf-m-align-left{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Resets margin-inline-start property 0.</td></tr><tr><td><code>.pf-m-align-self-flex-start{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies align-self property to flex-start.</td></tr><tr><td><code>.pf-m-align-self-flex-end{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies align-self property to flex-end.</td></tr><tr><td><code>.pf-m-align-self-flex-center{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies align-self property to center.</td></tr><tr><td><code>.pf-m-align-self-flex-baseline{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies align-self property to baseline.</td></tr><tr><td><code>.pf-m-align-self-flex-stretch{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies align-self property to stretch.</td></tr></tbody></table>
|
|
384
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
385
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
384
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7904" data-pf-content="true" class="pf-v6-c-content--h2">Justification</h2>
|
|
385
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7905" data-pf-content="true" class="pf-v6-c-content--h3">Justify content flex end example</h3>
|
|
386
386
|
|
|
387
387
|
<astro-island uid="ZSI5Ft" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex pf-m-justify-content-flex-end ws-example-flex-border\">\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
388
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
388
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7906" data-pf-content="true" class="pf-v6-c-content--h3">Justify content space between example</h3>
|
|
389
389
|
|
|
390
390
|
<astro-island uid="1L8cbB" 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-l-flex pf-m-justify-content-space-between ws-example-flex-border\"\n>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
391
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
391
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7907" data-pf-content="true" class="pf-v6-c-content--h3">Justify content flex start example</h3>
|
|
392
392
|
|
|
393
393
|
<astro-island uid="Z1nhh7a" 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-l-flex pf-m-justify-content-flex-start ws-example-flex-border\"\n>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n <div class=\"pf-v6-l-flex__item\">Flex item</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
394
394
|
|
|
@@ -417,21 +417,21 @@
|
|
|
417
417
|
|
|
418
418
|
|
|
419
419
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-justify-content-flex-end{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies justification property and descendant spacing.</td></tr><tr><td><code>.pf-m-justify-content-flex-space-between{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies justification property and descendant spacing.</td></tr><tr><td><code>.pf-m-justify-content-flex-start{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies justification property and descendant spacing, used primarily to reset spacing to default.</td></tr></tbody></table>
|
|
420
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
421
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
422
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
420
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7908" data-pf-content="true" class="pf-v6-c-content--h2">Ordering</h2>
|
|
421
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7925" data-pf-content="true" class="pf-v6-c-content--p">Ordering - Ordering can be applied to nested <code>.pf-v6-l-flex</code> and <code>.pf-v6-l-flex__item</code>s. Spacing may need to be managed based on how items are ordered. Because order could apply to an innumerable number of elements, order is set inline as <code>--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}</code>.</p>
|
|
422
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7909" data-pf-content="true" class="pf-v6-c-content--h3">Basic ordering example</h3>
|
|
423
423
|
|
|
424
424
|
<astro-island uid="Jds6g" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order: 1;\"\n >\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order: 3;\"\n >Set 1, Item A</div>\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order: 1;\"\n >Set 1, Item B</div>\n <div class=\"pf-v6-l-flex__item\">Set 1, Item C</div>\n <div class=\"pf-v6-l-flex__item pf-m-order-2 pf-m-spacer-md\">Set 1, Item D</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-spacer-md\">\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order: 3;\"\n >Set 2, Item A</div>\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order-on-lg: 1;\"\n >Set 2, Item B</div>\n <div class=\"pf-v6-l-flex__item\">Set 2, Item C</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-md\"\n style=\"--pf-v6-l-flex--item--Order: 2;\"\n >Set 2, Item D</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
425
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
425
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7910" data-pf-content="true" class="pf-v6-c-content--h3">First and last ordering example</h3>
|
|
426
426
|
|
|
427
427
|
<astro-island uid="1KL8of" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order: 2;\"\n >Item A</div>\n <div class=\"pf-v6-l-flex__item\">Item B</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-md\"\n style=\"--pf-v6-l-flex--item--Order: -1;\"\n >Item C</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
428
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
428
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7911" data-pf-content="true" class="pf-v6-c-content--h3">Responsive first last ordering example</h3>
|
|
429
429
|
|
|
430
430
|
<astro-island uid="Zq3Ujx" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none-on-lg\"\n style=\"--pf-v6-l-flex--item--Order-on-lg: 2;\"\n >Item A</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none-on-md pf-m-spacer-md-on-lg\"\n style=\"--pf-v6-l-flex--item--Order: -1; --pf-v6-l-flex--item--Order-on-md: 1;\"\n >Item B</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-md\"\n style=\"--pf-v6-l-flex--item--Order-on-md: -1;\"\n >Item C</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
431
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
431
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7912" data-pf-content="true" class="pf-v6-c-content--h3">Responsive ordering example</h3>
|
|
432
432
|
|
|
433
433
|
<astro-island uid="19TVMH" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-flex\">\n <div\n class=\"pf-v6-l-flex pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order-on-lg: 1;\"\n >\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order-on-md: 2;\"\n >Set 1, Item A</div>\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order-on-md: -1;\"\n >Set 1, Item B</div>\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order-on-xl: 1;\"\n >Set 1, Item C</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none-on-xl\"\n style=\"--pf-v6-l-flex--item--Order-on-xl: 2;\"\n >Set 1, Item D</div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-spacer-md-on-lg\">\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-none\"\n style=\"--pf-v6-l-flex--item--Order: 3;\"\n >Set 2, Item A</div>\n <div\n class=\"pf-v6-l-flex__item\"\n style=\"--pf-v6-l-flex--item--Order: 1;\"\n >Set 2, Item B</div>\n <div class=\"pf-v6-l-flex__item\">Set 2, Item C</div>\n <div\n class=\"pf-v6-l-flex__item pf-m-spacer-md\"\n style=\"--pf-v6-l-flex--item--Order: 2;\"\n >Set 2, Item D</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
434
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
434
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7913" data-pf-content="true" class="pf-v6-c-content--h3">Ordering usage</h3>
|
|
435
435
|
|
|
436
436
|
|
|
437
437
|
|
|
@@ -448,11 +448,11 @@
|
|
|
448
448
|
|
|
449
449
|
|
|
450
450
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies the flex layout element order property.</td></tr></tbody></table>
|
|
451
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
451
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7914" data-pf-content="true" class="pf-v6-c-content--h2">Flex layout as list</h2>
|
|
452
452
|
|
|
453
453
|
<astro-island uid="Z2MW1b" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<ul class=\"pf-v6-l-flex\">\n <li class=\"pf-v6-l-flex__item\">Flex item</li>\n <li class=\"pf-v6-l-flex__item\">Flex item</li>\n <li class=\"pf-v6-l-flex__item\">Flex item</li>\n <li class=\"pf-v6-l-flex__item\">Flex item</li>\n</ul>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
454
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
455
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
454
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7915" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
455
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7916" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
456
456
|
|
|
457
457
|
|
|
458
458
|
|
|
@@ -654,7 +654,7 @@
|
|
|
654
654
|
|
|
655
655
|
|
|
656
656
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-l-flex</code></td><td><code>*</code></td><td>Initiates the flex layout. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-l-flex__item</code></td><td><code>.pf-v6-l-flex > *</code></td><td>Initiates a flex item. <strong>Required</strong></td></tr><tr><td><code>.pf-m-flex{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Initializes or resets the flex layout display property to flex.</td></tr><tr><td><code>.pf-m-inline-flex{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout display property to inline-flex.</td></tr><tr><td><code>.pf-m-grow{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex-grow property to 1.</td></tr><tr><td><code>.pf-m-shrink{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex-shrink property to 1.</td></tr><tr><td><code>.pf-m-full-width{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex item to full width of parent.</td></tr><tr><td><code>.pf-m-flex-1{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 1 0 0.</td></tr><tr><td><code>.pf-m-flex-2{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 2 0 0.</td></tr><tr><td><code>.pf-m-flex-3{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 3 0 0.</td></tr><tr><td><code>.pf-m-flex-4{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to 4 0 0.</td></tr><tr><td><code>.pf-m-flex-default{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Resets a nested flex layout or flex item flex shorthand property to 0 1 auto.</td></tr><tr><td><code>.pf-m-flex-none{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies a nested flex layout or flex item flex shorthand property to none.</td></tr><tr><td><code>.pf-m-column-reverse{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout flex-direction property to column-reverse.</td></tr><tr><td><code>.pf-m-row-reverse{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout flex-direction property to row-reverse.</td></tr><tr><td><code>.pf-m-wrap{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout flex-wrap property to wrap.</td></tr><tr><td><code>.pf-m-wrap-reverse{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout flex-wrap property to wrap-reverse.</td></tr><tr><td><code>.pf-m-nowrap{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout flex-wrap property to nowrap.</td></tr><tr><td><code>.pf-m-justify-content-flex-start{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to flex-start.</td></tr><tr><td><code>.pf-m-justify-content-flex-end{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to flex-end.</td></tr><tr><td><code>.pf-m-justify-content-center{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to center.</td></tr><tr><td><code>.pf-m-justify-content-space-between{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to space-between.</td></tr><tr><td><code>.pf-m-justify-content-space-around{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to space-around.</td></tr><tr><td><code>.pf-m-justify-content-space-evenly{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout justify-content property to space-evenly.</td></tr><tr><td><code>.pf-m-align-items-flex-start{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-items property to flex-start.</td></tr><tr><td><code>.pf-m-align-items-flex-end{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-items property to flex-end.</td></tr><tr><td><code>.pf-m-align-items-center{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-items property to center.</td></tr><tr><td><code>.pf-m-align-items-stretch{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-items property to stretch.</td></tr><tr><td><code>.pf-m-align-items-baseline{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-items property to baseline.</td></tr><tr><td><code>.pf-m-align-content-flex-start{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to flex-start.</td></tr><tr><td><code>.pf-m-align-content-flex-end{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to flex-end.</td></tr><tr><td><code>.pf-m-align-content-center{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to center.</td></tr><tr><td><code>.pf-m-align-content-stretch{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to stretch.</td></tr><tr><td><code>.pf-m-align-content-space-between{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to space-between.</td></tr><tr><td><code>.pf-m-align-content-space-around{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout align-content property to space-around.</td></tr><tr><td><code>.pf-m-align-left{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Resets the flex layout element margin-inline-start property to 0.</td></tr><tr><td><code>.pf-m-align-right{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies the flex layout element margin-inline-start property to auto.</td></tr><tr><td><code>--pf-v6-l-flex--item--Order{-on-[breakpoint]}: {order}</code></td><td><code>.pf-v6-l-flex > .pf-v6-l-flex</code>, <code>.pf-v6-l-flex__item</code></td><td>Modifies the flex layout element order property.</td></tr></tbody></table>
|
|
657
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
657
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7917" data-pf-content="true" class="pf-v6-c-content--h3">Spacer system usage</h3>
|
|
658
658
|
|
|
659
659
|
|
|
660
660
|
|
|
@@ -676,7 +676,7 @@
|
|
|
676
676
|
|
|
677
677
|
|
|
678
678
|
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-space-items-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the flex layout to add space between items on the main axis.</td></tr><tr><td><code>.pf-m-spacer-{none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code>, <code>.pf-v6-l-flex > .pf-v6-l-flex__item</code></td><td>Modifies the spacer for any direct child along the main axis of a flex layout.</td></tr></tbody></table>
|
|
679
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
679
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7918" data-pf-content="true" class="pf-v6-c-content--h3">Gap spacing usage</h3>
|
|
680
680
|
|
|
681
681
|
|
|
682
682
|
|
|
@@ -702,6 +702,6 @@
|
|
|
702
702
|
|
|
703
703
|
|
|
704
704
|
|
|
705
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns and rows.</td></tr><tr><td><code>.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between rows.</td></tr><tr><td><code>.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
705
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-m-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns and rows.</td></tr><tr><td><code>.pf-m-row-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between rows.</td></tr><tr><td><code>.pf-m-column-gap{-[none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl]}{-on-[breakpoint]}</code></td><td><code>.pf-v6-l-flex</code></td><td>Modifies the space between columns.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-7843" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
706
706
|
CSS variables
|
|
707
707
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="2EAjC" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-l-flex"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|