@patternfly/patternfly-doc-core 1.13.0 → 1.13.1
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 +25 -25
- package/cli/buildPropsData.ts +13 -8
- package/cli/cli.ts +44 -33
- package/cli/createCollectionContent.ts +109 -9
- package/cli/getConfig.ts +1 -0
- package/dist/cli/buildPropsData.js +11 -8
- package/dist/cli/cli.js +36 -28
- package/dist/cli/createCollectionContent.js +70 -9
- package/dist/docs/_worker.js/index.js +1 -1
- package/dist/docs/_worker.js/manifest_CJjpUQ_9.mjs +100 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +23 -5
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +8 -8
- package/dist/docs/components/back-to-top/index.html +5 -5
- package/dist/docs/components/back-to-top/react/index.html +5 -5
- package/dist/docs/components/backdrop/index.html +3 -3
- package/dist/docs/components/backdrop/react/index.html +3 -3
- package/dist/docs/components/background-image/index.html +3 -3
- package/dist/docs/components/background-image/react/index.html +3 -3
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +6 -6
- package/dist/docs/components/button/index.html +37 -37
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/index.html +9 -9
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/index.html +55 -55
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +16 -16
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +9 -9
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/content/react/index.html +19 -19
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/data-list/react/index.html +21 -21
- package/dist/docs/components/description-list/index.html +39 -39
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/divider/react/index.html +11 -11
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/drawer/react/index.html +25 -25
- package/dist/docs/components/dropdown/index.html +17 -17
- package/dist/docs/components/dropdown/react/index.html +17 -17
- package/dist/docs/components/dual-list-selector/index.html +20 -20
- package/dist/docs/components/dual-list-selector/react/index.html +17 -17
- package/dist/docs/components/dual-list-selector/react-deprecated/index.html +28 -28
- package/dist/docs/components/empty-state/index.html +10 -10
- package/dist/docs/components/empty-state/react/index.html +10 -10
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +18 -18
- package/dist/docs/components/form/index.html +16 -16
- package/dist/docs/components/form/react/index.html +16 -16
- 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/index.html +9 -9
- package/dist/docs/components/helper-text/react/index.html +9 -9
- package/dist/docs/components/hint/index.html +11 -11
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/index.html +20 -20
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/input-group/index.html +9 -9
- package/dist/docs/components/input-group/react/index.html +9 -9
- package/dist/docs/components/jump-links/index.html +12 -12
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/index.html +25 -25
- package/dist/docs/components/label/react/index.html +25 -25
- package/dist/docs/components/list/index.html +12 -12
- package/dist/docs/components/list/react/index.html +12 -12
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/login-page/react/index.html +13 -13
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/masthead/react/index.html +18 -18
- 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/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/modal/react/index.html +41 -41
- package/dist/docs/components/modal/react-deprecated/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/multiple-file-upload/react/index.html +26 -26
- package/dist/docs/components/navigation/index.html +21 -21
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +13 -13
- package/dist/docs/components/notification-badge/react/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +5 -5
- package/dist/docs/components/notification-drawer/react/index.html +5 -5
- package/dist/docs/components/number-input/index.html +14 -14
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +9 -9
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/index.html +14 -14
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/panel/react/index.html +22 -22
- package/dist/docs/components/popover/index.html +23 -23
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/index.html +20 -20
- package/dist/docs/components/progress/react/index.html +20 -20
- package/dist/docs/components/progress-stepper/index.html +13 -13
- package/dist/docs/components/progress-stepper/react/index.html +13 -13
- package/dist/docs/components/radio/index.html +12 -12
- package/dist/docs/components/radio/react/index.html +12 -12
- package/dist/docs/components/search-input/index.html +11 -11
- package/dist/docs/components/search-input/react/index.html +11 -11
- package/dist/docs/components/select/index.html +60 -60
- package/dist/docs/components/select/react/index.html +60 -60
- package/dist/docs/components/sidebar/index.html +14 -14
- package/dist/docs/components/sidebar/react/index.html +14 -14
- package/dist/docs/components/simple-file-upload/index.html +29 -29
- package/dist/docs/components/simple-file-upload/react/index.html +29 -29
- package/dist/docs/components/simple-list/index.html +6 -6
- package/dist/docs/components/simple-list/react/index.html +6 -6
- 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/index.html +3 -3
- package/dist/docs/components/skip-to-content/react/index.html +3 -3
- package/dist/docs/components/slider/index.html +19 -19
- package/dist/docs/components/slider/react/index.html +19 -19
- package/dist/docs/components/spinner/index.html +6 -6
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/index.html +9 -9
- package/dist/docs/components/switch/react/index.html +9 -9
- package/dist/docs/components/tabs/index.html +74 -74
- package/dist/docs/components/tabs/react/index.html +74 -74
- package/dist/docs/components/text-area/index.html +12 -12
- package/dist/docs/components/text-area/react/index.html +12 -12
- 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/index.html +16 -16
- package/dist/docs/components/text-input-group/react/index.html +16 -16
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +23 -23
- 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/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/index.html +7 -7
- package/dist/docs/components/title/react/index.html +7 -7
- package/dist/docs/components/toggle-group/index.html +21 -21
- package/dist/docs/components/toggle-group/react/index.html +21 -21
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/toolbar/react/index.html +42 -42
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tooltip/react/index.html +12 -12
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/tree-view/react/index.html +23 -23
- package/dist/docs/components/truncate/index.html +10 -10
- package/dist/docs/components/truncate/react/index.html +10 -10
- package/dist/docs/components/wizard/react/index.html +29 -29
- package/package.json +1 -1
- package/src/content.config.ts +4 -2
- package/src/content.ts +1 -1
- package/src/pages/props.ts +8 -4
- package/dist/docs/_worker.js/manifest_BT0KogAj.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_assets_Cpp4aFxG.mjs → _astro_assets_gAZzkAab.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_D-EXtmSy.mjs → _astro_data-layer-content_Dvh2cBdG.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_CUXjIWnT.mjs → content-modules_PMz0mfKv.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{sharp_C-KnEafm.mjs → sharp_CXlY1snz.mjs} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,73 +42,73 @@
|
|
|
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="Z1RY9Yu" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-154"><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="Z1Cpvgm" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.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-52"><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-155"><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-156"><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-52"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.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,"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,"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,"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,"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,"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]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/page/react"> React </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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-942" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
48
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
-
<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="23oDgN" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-145"><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="26iquF" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.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-49"><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-146"><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-147"><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-49"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.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,"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,"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,"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,"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,"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]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/page/react"> React </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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-883" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-884" data-pf-content="true" class="pf-v6-c-content--h3">Basic page components</h3>
|
|
47
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-885" data-pf-content="true" class="pf-v6-c-content--p">A page will typically contain the following components:</p>
|
|
48
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-929" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
49
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-925" data-pf-content="true" class="pf-v6-c-content--li">A <code><Page></code> with a <code>masthead</code> prop that often contains a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-886" data-pf-content="true" class="pf-v6-c-content--a">masthead</a> component</li>
|
|
50
50
|
</ul>
|
|
51
|
-
<p 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-
|
|
54
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
55
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
51
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-901" data-pf-content="true" class="pf-v6-c-content--p">The <code><MastheadMain></code> component includes the smaller area that typically contains the <code><MastheadToggle></code> and a <code><MastheadLogo></code>. <code><MastheadContent></code> represents the main portion of the masthead, and will typically contain a <code><Toolbar></code> or other menu-like components, like a <code><Dropdown></code>.</p>
|
|
52
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-928" 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-902" data-pf-content="true" class="pf-v6-c-content--li">Mastheads contain a <code><MastheadMain></code> component, which includes the <code><MastheadToggle></code>, a <code><MastheadLogo></code>, and the page’s toolbar (via <code><MastheadContent></code>.) The <code><MastheadToggle></code> component contains a <code><PageToggleButton></code>, and the <code><MastheadLogo></code> component contains a <code><MastheadBrand></code>.</li>
|
|
54
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-903" data-pf-content="true" class="pf-v6-c-content--li">1 or more <code><PageSidebarBody></code> components inside <code><PageSidebar></code> for vertical navigation or other sidebar content</li>
|
|
55
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-904" data-pf-content="true" class="pf-v6-c-content--li">1 or more <code><PageSection></code> components</li>
|
|
56
56
|
</ul>
|
|
57
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
57
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-887" data-pf-content="true" class="pf-v6-c-content--h3">Vertical navigation</h3>
|
|
58
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-905" data-pf-content="true" class="pf-v6-c-content--p">To add a vertical sidebar to a <code><Page></code>, pass a <code><PageSidebar></code> component into the <code>sidebar</code> property. To render navigation in the sidebar, pass a <code><PageSidebarBody></code> component to <code><PageSidebar></code>.</p>
|
|
59
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-906" data-pf-content="true" class="pf-v6-c-content--p">The <code>isSidebarOpen</code> property helps facilitate the opening and closing of the sidebar and should be ‘true’ when the sidebar is visible.</p>
|
|
60
60
|
|
|
61
61
|
<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="1eB1Tc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageVerticalNav: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"vertical-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"vertical-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"vertical-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageSection>Section 1</PageSection>\n <PageSection variant=\"secondary\">Section 2 with secondary variant styling</PageSection>\n <PageSection>Section 3</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
62
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
63
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
66
|
-
<li 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-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-888" data-pf-content="true" class="pf-v6-c-content--h3">Multiple sidebar body</h3>
|
|
63
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-907" data-pf-content="true" class="pf-v6-c-content--p">You can have multiple <code><PageSidebarBody></code> components inside the <code><PageSidebar></code> for more customization. You can modify the <code><PageSidebarBody></code> further by passing the following properties:</p>
|
|
64
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-926" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
65
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-908" data-pf-content="true" class="pf-v6-c-content--li"><code>usePageInsets</code> will modify the component’s insets to match page insets</li>
|
|
66
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-909" data-pf-content="true" class="pf-v6-c-content--li"><code>isFilled={true}</code> will cause the component to grow to fill the available vertical space</li>
|
|
67
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-910" data-pf-content="true" class="pf-v6-c-content--li"><code>isFilled={false}</code> will cause the component to <strong>not</strong> grow to fill the available vertical space</li>
|
|
68
68
|
</ul>
|
|
69
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
69
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-911" data-pf-content="true" class="pf-v6-c-content--p">By default, the last <code><PageSidebarBody></code> will grow to fill the available vertical space. This can be changed by passing <code>isFilled={false}</code> as demonstrated in the following example.</p>
|
|
70
70
|
|
|
71
71
|
<astro-island uid="ZrURJO" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageMultipleSidebarBody: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"multiple-sidebar-body-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"multiple-sidebar-body-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"multiple-sidebar-body-sidebar\">\n <PageSidebarBody isContextSelector>\n First sidebar body (for a context selector/perspective switcher)\n </PageSidebarBody>\n <PageSidebarBody usePageInsets>Second sidebar body (with insets)</PageSidebarBody>\n <PageSidebarBody isFilled={true}>Third sidebar body (with fill)</PageSidebarBody>\n <PageSidebarBody isFilled={false} usePageInsets>\n Fourth sidebar body (with insets and no fill)\n </PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageSection>Section 1</PageSection>\n <PageSection>Section 2</PageSection>\n <PageSection>Section 3</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
72
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
72
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-889" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal navigation</h3>
|
|
73
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-912" data-pf-content="true" class="pf-v6-c-content--p">To add horizontal navigation to the top of a <code><Page></code>, add the navigation inside of a <code><ToolbarItem></code> in the <code><Toolbar></code> that is passed to the <code><MastheadContent></code> of the <code><Masthead></code>.</p>
|
|
74
74
|
|
|
75
75
|
<astro-island uid="1wYTEm" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Page,\n Masthead,\n MastheadMain,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSection,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\n\nexport const PageHorizontalNav: React.FunctionComponent = () => {\n const headerToolbar = (\n <Toolbar id=\"horizontal-toolbar\">\n <ToolbarContent>\n <ToolbarItem>Navigation</ToolbarItem>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead inset={{ default: 'insetXs' }}>\n <MastheadMain>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n return (\n <Page masthead={masthead}>\n <PageSection>Section 1</PageSection>\n <PageSection variant=\"secondary\">Section 2 with secondary variant styling</PageSection>\n <PageSection>Section 3</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
76
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
76
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-890" data-pf-content="true" class="pf-v6-c-content--h3">Uncontrolled navigation</h3>
|
|
77
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-913" data-pf-content="true" class="pf-v6-c-content--p">When the <code>isManagedSidebar</code> property is true, it manages the sidebar open/close state, removing the need to pass both <code>isSidebarOpen</code> into the <code><PageSidebar></code> and <code>onSidebarToggle</code> into the <code><PageToggleButton></code>.</p>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="1g1xAk" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageUncontrolledNav: React.FunctionComponent = () => {\n const headerToolbar = (\n <Toolbar id=\"uncontrolled-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton variant=\"plain\" aria-label=\"Global navigation\" id=\"uncontrolled-nav-toggle\">\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar id=\"uncontrolled-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>\n <PageSection>Section 1</PageSection>\n <PageSection>Section 2</PageSection>\n <PageSection>Section 3</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
81
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
82
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-891" data-pf-content="true" class="pf-v6-c-content--h3">Filled page sections</h3>
|
|
81
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-892" data-pf-content="true" class="pf-v6-c-content--p">By default, page sections will not expand to fill in the available vertical space in a page.</p>
|
|
82
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-914" data-pf-content="true" class="pf-v6-c-content--p">To change this default behavior, pass <code>isContentFilled</code> to the <code><Page></code> component and <code>isFilled={true}</code> to any child <code><PageSection></code> or <code><PageGroup></code> component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.</p>
|
|
83
83
|
|
|
84
84
|
<astro-island uid="ux5n8" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageWithOrWithoutFill: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"fill-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"fill-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"fill-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page isContentFilled masthead={masthead} sidebar={sidebar}>\n <PageSection>A default page section</PageSection>\n <PageSection isFilled={true} variant=\"secondary\">\n This section fills the available space.\n </PageSection>\n <PageSection>A default page section</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" 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-
|
|
86
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
87
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
88
|
-
<p 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
|
-
<p 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-893" data-pf-content="true" class="pf-v6-c-content--h3">Main section padding</h3>
|
|
86
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-915" data-pf-content="true" class="pf-v6-c-content--p">To adjust the padding of a <code><PageSection></code>, you can pass in different values to the <code>padding</code> property. These values should be aligned to a specific breakpoint: ‘default’, ‘sm’, ‘md’, ‘lg’, ‘xl’, and ‘2xl’. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’.</p>
|
|
87
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-894" data-pf-content="true" class="pf-v6-c-content--p">As the page’s viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on ‘lg’ also applies to ‘xl’ and ‘2xl’.</p>
|
|
88
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-916" data-pf-content="true" class="pf-v6-c-content--p">To remove padding entirely, pass ‘noPadding’ to the <code>default</code> breakpoint. For example, the second section in this example passes in <code>padding={{ default: 'noPadding' }}</code>. Since no specific breakpoints are mentioned, every breakpoint will have ‘noPadding’.</p>
|
|
89
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-917" data-pf-content="true" class="pf-v6-c-content--p">To add padding at specific breakpoints, pass in “padding” at those breakpoints. For example, the third section in this example passes in <code>padding={{ default: 'noPadding', md: 'padding' }}</code>. At ‘md’, ‘lg’, ‘xl’, and ‘2xl’ breakpoints, the default value will be overwritten, and padding will be added.</p>
|
|
90
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-918" data-pf-content="true" class="pf-v6-c-content--p">To remove padding at specific breakpoints, pass in ‘noPadding’ at those breakpoints. For example, the fourth section in this example passes in <code>padding={{ md: 'noPadding' }}</code>, which means that ‘md’, ‘lg’ ‘xl’, and ‘2xl’ breakpoints will have <code>noPadding</code>.</p>
|
|
91
91
|
|
|
92
92
|
<astro-island uid="Z2b1Bst" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageMainSectionPadding: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"main-padding-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"main-padding-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"main-padding-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageSection>Section with default padding</PageSection>\n <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>\n <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>\n <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
93
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
94
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
93
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-895" data-pf-content="true" class="pf-v6-c-content--h3">Main section variations</h3>
|
|
94
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-896" data-pf-content="true" class="pf-v6-c-content--p">This example shows all types of page sections.</p>
|
|
95
95
|
|
|
96
96
|
<astro-island uid="Z154fza" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageMainSectionPadding: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"main-variations-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const header = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"main-variations-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"main-variations-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page header={header} sidebar={sidebar}>\n <PageSection type=\"subnav\">\n Section with <code>type=\"subnav\"</code> for horizontal subnav navigation\n </PageSection>\n <PageSection type=\"nav\">\n Section with <code>type=\"nav\"</code> for tertiary navigation\n </PageSection>\n <PageSection type=\"tabs\">\n Section with <code>type=\"tabs\"</code> for tabs\n </PageSection>\n <PageSection type=\"breadcrumb\">\n Section with <code>type=\"breadcrumb\"</code> for breadcrumbs\n </PageSection>\n <PageSection>\n Section without <code>type</code> prop or <code>type=\"default\"</code> for main sections\n </PageSection>\n <PageSection type=\"wizard\">\n Section with <code>type=\"wizard\"</code> for wizards\n </PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
97
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
99
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
100
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
101
|
-
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
102
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
103
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
-
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-897" data-pf-content="true" class="pf-v6-c-content--h3">Group section</h3>
|
|
98
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-919" data-pf-content="true" class="pf-v6-c-content--p">To group page content sections, add 1 or more <code><PageGroup></code> components to a <code><Page></code>.</p>
|
|
99
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-920" data-pf-content="true" class="pf-v6-c-content--p">The following example adds a group containing <code><PageBreadcrumb></code> and <code><PageSection></code> components.</p>
|
|
100
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-898" data-pf-content="true" class="pf-v6-c-content--p">To add additional components and information to a group, you may use the following properties:</p>
|
|
101
|
+
<ul data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-927" data-pf-content="true" class="pf-v6-c-content--ul">
|
|
102
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-921" data-pf-content="true" class="pf-v6-c-content--li">To indicate that a breadcrumb should be in a group, use <code>isBreadcrumbGrouped</code>.</li>
|
|
103
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-922" data-pf-content="true" class="pf-v6-c-content--li">To indicate that horizontal sub navigation should be in a group, use <code>isHorizontalSubnavGrouped</code>.</li>
|
|
104
|
+
<li data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-923" data-pf-content="true" class="pf-v6-c-content--li">To specify additional group content, use <code>additionalGroupedContent</code>.</li>
|
|
105
105
|
</ul>
|
|
106
106
|
|
|
107
107
|
<astro-island uid="2i8jAc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageGroup,\n PageBreadcrumb,\n PageToggleButton,\n Breadcrumb,\n BreadcrumbItem,\n Nav,\n NavList,\n NavItem,\n Toolbar,\n ToolbarContent,\n ToolbarItem\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n\nexport const PageGroupSection: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"group-section-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"group-section-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"group-section-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageGroup>\n <Nav aria-label=\"Group section navigation\" variant=\"horizontal-subnav\">\n <NavList>\n <NavItem href=\"#\" itemId={0} isActive>\n System panel\n </NavItem>\n <NavItem href=\"#\" itemId={1}>\n Policy\n </NavItem>\n <NavItem href=\"#\" itemId={2}>\n Authentication\n </NavItem>\n <NavItem href=\"#\" itemId={3}>\n Network services\n </NavItem>\n <NavItem href=\"#\" itemId={4}>\n Server\n </NavItem>\n </NavList>\n </Nav>\n <PageBreadcrumb>\n <Breadcrumb>\n <BreadcrumbItem>Section home</BreadcrumbItem>\n <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n <BreadcrumbItem to=\"#\">Section title</BreadcrumbItem>\n <BreadcrumbItem to=\"#\" isActive>\n Section landing\n </BreadcrumbItem>\n </Breadcrumb>\n </PageBreadcrumb>\n <PageSection>Grouped section</PageSection>\n </PageGroup>\n <PageSection>Section 1</PageSection>\n <PageSection>Section 2</PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
108
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
109
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
110
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
108
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-899" data-pf-content="true" class="pf-v6-c-content--h3">Centered section</h3>
|
|
109
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-924" data-pf-content="true" class="pf-v6-c-content--p">By default, a page section spans the width of the page. To reduce the width of a section, use the <code>isWidthLimited</code> property. To center align width-limited page sections, use the <code>isCenterAligned</code> property. When the main content area of a page is wider than the value of a centered, width-limited page section’s <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code> custom property, the section will automatically be centered.</p>
|
|
110
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-900" data-pf-content="true" class="pf-v6-c-content--p">The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.</p>
|
|
111
111
|
|
|
112
|
-
<astro-island uid="Z1TQ9Xm" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem,\n Card,\n CardBody\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n/* eslint-disable camelcase */\nimport c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';\n\nexport const PageCenteredSection: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"centered-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"centered-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"centered-section-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageSection isWidthLimited isCenterAligned>\n <Card>\n <CardBody>\n When a width limited page section is wider than the value of\n <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.\n <br />\n <br />\n The content in this example is placed in a card to better illustrate how the section behaves when it is\n centered. A card is not required to center a page section.\n </CardBody>\n </Card>\n </PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1ckW9O" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Page"],[0,"PageSidebar"],[0,"PageSidebarBody"],[0,"PageSection"],[0,"PageGroup"],[0,"PageBreadcrumb"],[0,"PageToggleButton"]]],"url":[7,"http://localhost:4321/components/page/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><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-
|
|
112
|
+
<astro-island uid="Z1TQ9Xm" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Page,\n Masthead,\n MastheadMain,\n MastheadToggle,\n MastheadBrand,\n MastheadLogo,\n MastheadContent,\n PageSidebar,\n PageSidebarBody,\n PageSection,\n PageToggleButton,\n Toolbar,\n ToolbarContent,\n ToolbarItem,\n Card,\n CardBody\n} from '@patternfly/react-core';\nimport BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';\n/* eslint-disable camelcase */\nimport c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';\n\nexport const PageCenteredSection: React.FunctionComponent = () => {\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n\n const onSidebarToggle = () => {\n setIsSidebarOpen(!isSidebarOpen);\n };\n\n const headerToolbar = (\n <Toolbar id=\"centered-toolbar\">\n <ToolbarContent>\n <ToolbarItem>header-tools</ToolbarItem>\n </ToolbarContent>\n </Toolbar>\n );\n\n const masthead = (\n <Masthead>\n <MastheadMain>\n <MastheadToggle>\n <PageToggleButton\n variant=\"plain\"\n aria-label=\"Global navigation\"\n isSidebarOpen={isSidebarOpen}\n onSidebarToggle={onSidebarToggle}\n id=\"centered-nav-toggle\"\n >\n <BarsIcon />\n </PageToggleButton>\n </MastheadToggle>\n <MastheadBrand>\n <MastheadLogo href=\"https://patternfly.org\" target=\"_blank\">\n Logo\n </MastheadLogo>\n </MastheadBrand>\n </MastheadMain>\n <MastheadContent>{headerToolbar}</MastheadContent>\n </Masthead>\n );\n\n const sidebar = (\n <PageSidebar isSidebarOpen={isSidebarOpen} id=\"centered-section-sidebar\">\n <PageSidebarBody>Navigation</PageSidebarBody>\n </PageSidebar>\n );\n\n return (\n <Page masthead={masthead} sidebar={sidebar}>\n <PageSection isWidthLimited isCenterAligned>\n <Card>\n <CardBody>\n When a width limited page section is wider than the value of\n <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.\n <br />\n <br />\n The content in this example is placed in a card to better illustrate how the section behaves when it is\n centered. A card is not required to center a page section.\n </CardBody>\n </Card>\n </PageSection>\n </Page>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1ckW9O" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Page"],[0,"PageSidebar"],[0,"PageSidebarBody"],[0,"PageSection"],[0,"PageGroup"],[0,"PageBreadcrumb"],[0,"PageToggleButton"]]],"url":[7,"http://localhost:4321/components/page/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><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-882" 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>
|
|
113
113
|
CSS variables
|
|
114
114
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="Z14jvIx" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-page"]}" 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>
|