@patternfly/patternfly-doc-core 1.12.1 → 1.12.2
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 +24 -24
- package/dist/docs/_worker.js/index.js +1 -1
- package/dist/docs/_worker.js/{manifest_DGS5MtBy.mjs → manifest_Dsi4HnVg.mjs} +1 -1
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/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/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/index.html +18 -18
- package/dist/docs/components/clipboard-copy/react/index.html +18 -18
- package/dist/docs/components/code-block/index.html +6 -6
- package/dist/docs/components/code-block/react/index.html +6 -6
- 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 +24 -24
- package/dist/docs/components/data-list/react/index.html +24 -24
- package/dist/docs/components/date-picker/index.html +17 -17
- package/dist/docs/components/date-picker/react/index.html +17 -17
- 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 +14 -14
- package/dist/docs/components/divider/react/index.html +14 -14
- package/dist/docs/components/drawer/index.html +28 -28
- package/dist/docs/components/drawer/react/index.html +28 -28
- package/dist/docs/components/dropdown/index.html +20 -20
- package/dist/docs/components/dropdown/react/index.html +20 -20
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +18 -18
- package/dist/docs/components/form-select/index.html +6 -6
- package/dist/docs/components/form-select/react/index.html +6 -6
- 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/jump-links/index.html +12 -12
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/label/react/index.html +28 -28
- 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 +65 -65
- package/dist/docs/components/menu/react/index.html +65 -65
- 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/react/index.html +38 -38
- 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 +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- 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 +25 -25
- package/dist/docs/components/panel/react/index.html +25 -25
- 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 +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/search-input/index.html +14 -14
- package/dist/docs/components/search-input/react/index.html +14 -14
- package/dist/docs/components/select/index.html +62 -62
- package/dist/docs/components/select/react/index.html +62 -62
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-area/index.html +15 -15
- package/dist/docs/components/text-area/react/index.html +15 -15
- 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 +13 -13
- package/dist/docs/components/text-input-group/react/index.html +13 -13
- 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 +18 -18
- package/dist/docs/components/timestamp/react/index.html +18 -18
- 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 +20 -20
- package/dist/docs/components/tree-view/react/index.html +20 -20
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/truncate/react/index.html +13 -13
- package/dist/docs/components/wizard/react/index.html +32 -32
- package/package.json +3 -3
- /package/dist/docs/_worker.js/chunks/{_astro_assets_tcq0nD7B.mjs → _astro_assets_Dcv7PKDL.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_gjMewtSO.mjs → _astro_data-layer-content_CPgQSQEx.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_D0Eecfsp.mjs → content-modules_pw1AqUgZ.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{sharp_BPZD2zgR.mjs → sharp_BKxWP4lT.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/LiveExample.CxJsMvEq.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.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,79 +42,79 @@
|
|
|
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="Z1CPusm" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.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-229"><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="Z18VAuh" 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-77"><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-230"><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-231"><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-77"><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/wizard/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/wizard/react-deprecated"> React deprecated </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-1424" 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-
|
|
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="MgJ5r" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.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-226"><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="Z2i69mQ" 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-76"><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-227"><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-228"><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-76"><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/wizard/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/wizard/react-deprecated"> React deprecated </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-1403" 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-1404" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
|
|
47
47
|
|
|
48
48
|
<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="Z2wyPf6" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardBasic: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Basic wizard\">\n <WizardStep name=\"Step 1\" id=\"basic-first-step\">\n <p>\n The content of this step overflows and creates a scrollbar, which causes a tabindex of \"0\", a role of \"region\",\n and an aria-label or aria-labelledby to be applied.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis lacinia\n vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor\n odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus\n ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi\n mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.\n </p>\n <p>\n Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices orci\n fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum\n sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna.\n Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo\n orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh.\n Quisque et felis diam. Integer ac metus dolor.\n </p>\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"basic-second-step\">\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"basic-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
49
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1405" data-pf-content="true" class="pf-v6-c-content--h3">Focus content on next/back</h3>
|
|
50
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1428" data-pf-content="true" class="pf-v6-c-content--p">To focus the main content element of the <code>Wizard</code>, pass in the <code>shouldFocusContent</code> property. It is recommended that this is passed in so that users can navigate through a <code>WizardStep</code> content in order.</p>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="ZIimzG" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardFocusOnNextBack: React.FunctionComponent = () => (\n <Wizard shouldFocusContent title=\"Wizard that focuses content on next or back click\">\n <WizardStep name=\"Step 1\" id=\"wizard-focus-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"wizard-focus-second-step\">\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"wizard-focus-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1406" data-pf-content="true" class="pf-v6-c-content--h3">Basic with disabled steps</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="ZDi09i" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardBasicDisabledSteps: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Basic disabled wizard\">\n <WizardStep name=\"Step 1\" id=\"bdisabled-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"bdisabled-second-step\" isDisabled>\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Step 3\" id=\"bdisabled-third-step\">\n Step 3 content\n </WizardStep>\n <WizardStep name=\"Step 4\" id=\"bdisabled-fourth-step\" isDisabled>\n Step 4 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"bdisabled-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1407" data-pf-content="true" class="pf-v6-c-content--h3">Anchors for nav items</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="Z2s13fR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Button, Wizard, WizardStep } from '@patternfly/react-core';\nimport ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';\nimport SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';\n\nexport const WizardWithNavAnchors: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Anchor link wizard\">\n <WizardStep\n name={\n <>\n <ExternalLinkAltIcon /> PF3\n </>\n }\n id=\"navanchors-pf3-step\"\n navItem={{ component: 'a', href: 'https://www.patternfly.org/v3', target: '_blank' }}\n >\n Step 1: Read about PF3\n </WizardStep>\n <WizardStep\n name={\n <>\n <ExternalLinkAltIcon /> PF4\n </>\n }\n id=\"navanchors-pf4-step\"\n navItem={{ component: 'a', href: 'https://www.patternfly.org/v4', target: '_blank' }}\n >\n Step 2: Read about PF4\n </WizardStep>\n <WizardStep\n name={\n <>\n <SlackHashIcon /> Join us on slack\n </>\n }\n id=\"navanchors-slack-step\"\n navItem={{ component: 'a', href: 'https://patternfly.slack.com', target: '_blank' }}\n >\n <Button variant=\"link\" component=\"a\" target=\"_blank\" href=\"https://patternfly.slack.com\">\n Join the conversation\n </Button>\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
59
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1408" data-pf-content="true" class="pf-v6-c-content--h3">Incrementally enabled steps</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="1SlS9R" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardStepVisitRequired: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Incrementally enabled steps wizard\" isVisitRequired>\n <WizardStep name=\"Step 1\" id=\"req-visit-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"req-visit-second-step\">\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Step 3\" id=\"req-visit-third-step\">\n Step 3 content\n </WizardStep>\n <WizardStep name=\"Step 4\" id=\"req-visit-fourth-step\">\n Step 4 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"req-visit-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\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-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1409" data-pf-content="true" class="pf-v6-c-content--h3">Expandable steps</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="Z2c6LNo" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardExpandableSteps: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Expandable steps wizard\" nav={{ isExpanded: true }}>\n <WizardStep\n name=\"Step 1\"\n id=\"expand-steps-1\"\n isExpandable\n steps={[\n <WizardStep name=\"Substep A\" id=\"expand-steps-sub-a\" key=\"expand-steps-sub-a\">\n Substep A content\n </WizardStep>,\n <WizardStep name=\"Substep B\" id=\"expand-steps-sub-b\" key=\"expand-steps-sub-b\">\n Substep B content\n </WizardStep>\n ]}\n />\n <WizardStep name=\"Step 2\" id=\"expand-steps-2\">\n Step 2 content\n </WizardStep>\n <WizardStep\n name=\"Step 3\"\n id=\"expand-steps-3\"\n isExpandable\n steps={[\n <WizardStep name=\"Substep C\" id=\"expand-steps-sub-c\" key=\"expand-steps-sub-c\">\n Substep C content\n </WizardStep>,\n <WizardStep name=\"Substep D\" id=\"expand-steps-sub-d\" key=\"expand-steps-sub-d\">\n Substep D content\n </WizardStep>\n ]}\n />\n <WizardStep name=\"Step 4\" id=\"expand-steps-4\">\n Step 4 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"expand-steps-review\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1410" data-pf-content="true" class="pf-v6-c-content--h3">Progress after submission</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="gdvfH" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useCallback, useEffect, useState } from 'react';\nimport {\n EmptyState,\n EmptyStateFooter,\n EmptyStateBody,\n EmptyStateActions,\n Progress,\n Button,\n Wizard,\n WizardStep\n} from '@patternfly/react-core';\nimport CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\ninterface ValidationProgressProps {\n onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {\n const [percentValidated, setPercentValidated] = useState(0);\n\n const tick = useCallback(() => {\n if (percentValidated < 100) {\n setPercentValidated((prevValue) => prevValue + 20);\n }\n }, [percentValidated]);\n\n useEffect(() => {\n const interval = setInterval(() => tick(), 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [tick]);\n\n return (\n <div className={layout.bullseye}>\n <EmptyState\n headingLevel=\"h4\"\n titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}\n icon={CogsIcon}\n variant=\"lg\"\n >\n <EmptyStateBody>\n <Progress value={percentValidated} measureLocation=\"outside\" aria-label=\"Wizard validation progress\" />\n </EmptyStateBody>\n <EmptyStateBody>\n Description can be used to further elaborate on the validation step, or give the user a better idea of how\n long the process will take.\n </EmptyStateBody>\n <EmptyStateFooter>\n <EmptyStateActions>\n <Button isDisabled={percentValidated !== 100} onClick={onClose}>\n Log to console\n </Button>\n </EmptyStateActions>\n </EmptyStateFooter>\n </EmptyState>\n </div>\n );\n};\n\nexport const WizardWithSubmitProgress: React.FunctionComponent = () => {\n const [isSubmitted, setIsSubmitted] = useState(false);\n\n // eslint-disable-next-line no-console\n const onClose = () => console.log('Some close action occurs here.');\n\n if (isSubmitted) {\n return <ValidationProgress onClose={onClose} />;\n }\n\n return (\n <Wizard height={400} title=\"Submit progress wizard\" onClose={onClose}>\n <WizardStep name=\"Step 1\" id=\"submit-progress-step-1\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"submit-progress-step-2\">\n Step 2 content\n </WizardStep>\n <WizardStep\n name=\"Review\"\n id=\"submit-progress-review\"\n footer={{ nextButtonText: 'Finish', onNext: () => setIsSubmitted(true) }}\n >\n Review step content\n </WizardStep>\n </Wizard>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
68
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1411" data-pf-content="true" class="pf-v6-c-content--h3">Enabled on form validation</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="Z13idMX" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Form,\n FormGroup,\n FormHelperText,\n HelperText,\n HelperTextItem,\n TextInput,\n Wizard,\n WizardStep\n} from '@patternfly/react-core';\n\ninterface SampleFormProps {\n value: string;\n isValid: boolean;\n setValue: (value: string) => void;\n setIsValid: (isValid: boolean) => void;\n}\n\nconst SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {\n const validated = isValid ? 'default' : 'error';\n\n const handleTextInputChange = (_event, value: string) => {\n const isValid = /^\\d+$/.test(value);\n\n setValue(value);\n setIsValid(isValid);\n };\n\n return (\n <Form>\n <FormGroup label=\"Age:\" type=\"number\" fieldId=\"age\">\n <TextInput\n validated={validated}\n value={value}\n id=\"age\"\n aria-describedby=\"age-helper\"\n onChange={handleTextInputChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem variant={validated}>\n {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </Form>\n );\n};\n\nexport const WizardEnabledOnFormValidation: React.FunctionComponent = () => {\n const [ageValue, setAgeValue] = useState('Thirty');\n const [isSubAFormValid, setIsSubAFormValid] = useState(false);\n\n const onSave = () => alert(`Wow, you look a lot younger than ${ageValue}.`);\n\n return (\n <Wizard isVisitRequired height={400} title=\"Enabled on form validation wizard\" onSave={onSave}>\n <WizardStep name=\"Information\" id=\"form-valid-info\">\n Information content\n </WizardStep>\n <WizardStep\n name=\"Configuration\"\n id=\"form-valid-config\"\n steps={[\n <WizardStep\n name=\"Substep A with validation\"\n id=\"form-valid-sub-a\"\n key=\"form-valid-sub-a\"\n footer={{ isNextDisabled: !isSubAFormValid }}\n >\n <SampleForm\n value={ageValue}\n setValue={setAgeValue}\n isValid={isSubAFormValid}\n setIsValid={setIsSubAFormValid}\n />\n </WizardStep>,\n <WizardStep name=\"Substep B\" id=\"form-valid-sub-b\" key=\"form-valid-sub-b\">\n Substep B content\n </WizardStep>\n ]}\n />\n <WizardStep name=\"Additional\" id=\"form-valid-additional\">\n Additional step content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"form-valid-review\" footer={{ nextButtonText: 'Submit form' }}></WizardStep>\n </Wizard>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
71
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1412" data-pf-content="true" class="pf-v6-c-content--h3">Validate on button press</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="ZJj6Wc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useCallback, useEffect, useState } from 'react';\nimport {\n Button,\n ActionList,\n ActionListGroup,\n ActionListItem,\n Alert,\n EmptyState,\n EmptyStateFooter,\n EmptyStateBody,\n EmptyStateActions,\n Progress,\n Form,\n FormGroup,\n TextInput,\n HelperText,\n HelperTextItem,\n FormHelperText,\n Wizard,\n WizardStep,\n WizardFooterWrapper,\n useWizardContext\n} from '@patternfly/react-core';\nimport CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';\nimport layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';\n\ninterface ValidationProgressProps {\n onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({ onClose }) => {\n const [percentValidated, setPercentValidated] = useState(0);\n\n const tick = useCallback(() => {\n if (percentValidated < 100) {\n setPercentValidated((prevValue) => prevValue + 20);\n }\n }, [percentValidated]);\n\n useEffect(() => {\n const interval = setInterval(() => tick(), 1000);\n\n return () => {\n clearInterval(interval);\n };\n }, [tick]);\n\n return (\n <div className={layout.bullseye}>\n <EmptyState\n headingLevel=\"h4\"\n titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}\n icon={CogsIcon}\n variant=\"lg\"\n >\n <EmptyStateBody>\n <Progress value={percentValidated} measureLocation=\"outside\" aria-label=\"Wizard validation progress\" />\n </EmptyStateBody>\n <EmptyStateBody>\n Description can be used to further elaborate on the validation step, or give the user a better idea of how\n long the process will take.\n </EmptyStateBody>\n <EmptyStateFooter>\n <EmptyStateActions>\n <Button isDisabled={percentValidated !== 100} onClick={onClose}>\n Log to console\n </Button>\n </EmptyStateActions>\n </EmptyStateFooter>\n </EmptyState>\n </div>\n );\n};\n\ninterface LastStepFooterProps {\n isValid: boolean;\n setIsSubmitted(isSubmitted: boolean): void;\n setHasErrorOnSubmit(isSubmitted: boolean): void;\n}\n\nconst LastStepFooter: React.FunctionComponent<LastStepFooterProps> = ({\n isValid,\n setIsSubmitted,\n setHasErrorOnSubmit\n}) => {\n const { goToNextStep, goToPrevStep } = useWizardContext();\n\n const onValidate = () => {\n setIsSubmitted(true);\n\n if (!isValid) {\n setIsSubmitted(false);\n setHasErrorOnSubmit(true);\n } else {\n goToNextStep();\n }\n };\n\n return (\n <WizardFooterWrapper>\n <ActionList>\n <ActionListGroup>\n <ActionListItem>\n <Button variant=\"secondary\" onClick={goToPrevStep}>\n Back\n </Button>\n </ActionListItem>\n <ActionListItem>\n <Button onClick={onValidate}>Validate</Button>\n </ActionListItem>\n </ActionListGroup>\n </ActionList>\n </WizardFooterWrapper>\n );\n};\n\ninterface SampleFormProps {\n value: string;\n isValid: boolean;\n setValue: (value: string) => void;\n setIsValid: (isValid: boolean) => void;\n}\n\nconst SampleForm: React.FunctionComponent<SampleFormProps> = ({ value, isValid, setValue, setIsValid }) => {\n const validated = isValid ? 'default' : 'error';\n\n const handleTextInputChange = (_event, value: string) => {\n const isValid = /^\\d+$/.test(value);\n\n setValue(value);\n setIsValid(isValid);\n };\n\n return (\n <Form>\n <FormGroup label=\"Age:\" type=\"number\" fieldId=\"age\">\n <TextInput\n validated={validated}\n value={value}\n id=\"age\"\n aria-describedby=\"age-helper\"\n onChange={handleTextInputChange}\n />\n <FormHelperText>\n <HelperText>\n <HelperTextItem variant={validated}>\n {validated === 'error' ? 'Age has to be a number' : 'Write your age in numbers.'}\n </HelperTextItem>\n </HelperText>\n </FormHelperText>\n </FormGroup>\n </Form>\n );\n};\n\nexport const WizardValidateOnButtonPress: React.FunctionComponent = () => {\n const [ageValue, setAgeValue] = useState('Thirty');\n const [isSubmitted, setIsSubmitted] = useState(false);\n const [isFirstStepValid, setIsFirstStepValid] = useState(false);\n const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);\n\n // eslint-disable-next-line no-console\n const onClose = () => console.log('Some close action occurs here.');\n\n if (isSubmitted && isFirstStepValid) {\n return <ValidationProgress onClose={onClose} />;\n }\n\n return (\n <Wizard title=\"Validate on button press wizard\" onClose={onClose} height={400}>\n <WizardStep name=\"Step 1\" id=\"validate-btn-step-1\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"validate-btn-step-2\">\n Step 2 content\n </WizardStep>\n <WizardStep\n name=\"Final Step\"\n id=\"validate-btn-finish-step\"\n footer={\n <LastStepFooter\n isValid={isFirstStepValid}\n setIsSubmitted={setIsSubmitted}\n setHasErrorOnSubmit={setHasErrorOnSubmit}\n />\n }\n >\n {hasErrorOnSubmit && (\n <div style={{ padding: '15px 0' }}>\n <Alert isInline variant=\"danger\" title=\"Validation failed, please try again.\" />\n </div>\n )}\n <SampleForm\n value={ageValue}\n setValue={(value) => setAgeValue(value)}\n isValid={!hasErrorOnSubmit || isFirstStepValid}\n setIsValid={setIsFirstStepValid}\n />\n </WizardStep>\n </Wizard>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
74
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1413" data-pf-content="true" class="pf-v6-c-content--h3">Progressive steps</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="2m5aYR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardProgressiveSteps: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Progressive steps wizard\" isProgressive>\n <WizardStep id=\"progressive-step-1\" name=\"Get started\">\n Get started content\n </WizardStep>\n <WizardStep id=\"progressive-step-2\" name=\"Update options\">\n Update options content\n </WizardStep>\n <WizardStep\n id=\"progressive-step-3\"\n name=\"Quick options\"\n steps={[\n <WizardStep key=\"progressive-substep-1\" id=\"progressive-substep-1\" name=\"Substep 1\">\n Substep 1 content\n </WizardStep>,\n <WizardStep key=\"progressive-substep-2\" id=\"progressive-substep-2\" name=\"Substep 2\">\n Substep 2 content\n </WizardStep>,\n <WizardStep key=\"progressive-substep-3\" id=\"progressive-substep-3\" name=\"Substep 3\">\n Substep 3 content\n </WizardStep>\n ]}\n />\n <WizardStep id=\"progressive-step-4\" name=\"Review\" footer={{ nextButtonText: 'Finish' }}>\n Review content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1414" data-pf-content="true" class="pf-v6-c-content--h3">Get current step</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="ZrbSMK" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n DescriptionList,\n DescriptionListGroup,\n DescriptionListTerm,\n DescriptionListDescription,\n Wizard,\n WizardStep,\n WizardStepType\n} from '@patternfly/react-core';\n\nconst CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) => (\n <DescriptionList isHorizontal isCompact>\n <DescriptionListGroup>\n <DescriptionListTerm>Index</DescriptionListTerm>\n <DescriptionListDescription>{currentStep?.index}</DescriptionListDescription>\n </DescriptionListGroup>\n\n <DescriptionListGroup>\n <DescriptionListTerm>ID</DescriptionListTerm>\n <DescriptionListDescription>{currentStep?.id}</DescriptionListDescription>\n </DescriptionListGroup>\n\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>{currentStep?.name}</DescriptionListDescription>\n </DescriptionListGroup>\n\n <DescriptionListGroup>\n <DescriptionListTerm>Visited</DescriptionListTerm>\n <DescriptionListDescription>{currentStep?.isVisited ? 'true' : 'false'}</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n\nexport const GetCurrentStepWizard: React.FunctionComponent = () => {\n const [currentStep, setCurrentStep] = useState<WizardStepType>();\n\n const onStepChange = (_event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType) =>\n setCurrentStep(currentStep);\n\n return (\n <Wizard height={400} title=\"Get current step wizard\" onStepChange={onStepChange}>\n <WizardStep name=\"Step 1\" id=\"get-current-step-1\">\n {currentStep ? <CurrentStepDescriptionList currentStep={currentStep} /> : 'Step 1 content'}\n </WizardStep>\n <WizardStep\n name=\"Step 2\"\n id=\"get-current-step-2\"\n isDisabled\n steps={[\n <WizardStep name=\"Substep 1\" id=\"get-current-substep-1\" key=\"get-current-substep-1\">\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>,\n <WizardStep name=\"Substep 2\" id=\"get-current-substep-2\" key=\"get-current-substep-2\">\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>\n ]}\n />\n <WizardStep\n name=\"Step 3\"\n id=\"get-current-step-3\"\n steps={[\n <WizardStep name=\"Substep 3\" id=\"get-current-substep-3\" key=\"get-current-substep-3\">\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>,\n <WizardStep name=\"Substep 4\" id=\"get-current-substep-4\" key=\"get-current-substep-4\">\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>\n ]}\n />\n <WizardStep\n name=\"Step 4\"\n id=\"get-current-step-4\"\n steps={[\n <WizardStep name=\"Substep 5\" id=\"get-current-substep-5\" key=\"get-current-substep-5\" isHidden>\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>,\n <WizardStep name=\"Substep 6\" id=\"get-current-substep-6\" key=\"get-current-substep-6\">\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>\n ]}\n />\n <WizardStep name=\"Review\" id=\"get-current-review-step\" footer={{ nextButtonText: 'Finish' }}>\n <CurrentStepDescriptionList currentStep={currentStep} />\n </WizardStep>\n </Wizard>\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-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1415" data-pf-content="true" class="pf-v6-c-content--h3">Within modal</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="13NKNu" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithinModal: React.FunctionComponent = () => {\n const [isModelOpen, setIsModalOpen] = useState(false);\n\n return (\n <>\n <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>\n\n <Modal\n isOpen={isModelOpen}\n aria-label=\"Wizard modal\"\n onEscapePress={() => setIsModalOpen(false)}\n variant={ModalVariant.medium}\n >\n <Wizard\n height={400}\n onClose={() => setIsModalOpen(false)}\n title=\"In modal wizard\"\n header={\n <WizardHeader\n onClose={() => setIsModalOpen(false)}\n title=\"Wizard in modal\"\n description=\"Simple wizard description\"\n />\n }\n >\n <WizardStep name=\"Step 1\" id=\"in-modal-step-1\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"in-modal-step-2\">\n Step 2 content\n </WizardStep>\n <WizardStep\n name=\"Review\"\n id=\"in-modal-review-step\"\n footer={{ nextButtonText: 'Finish', onNext: () => setIsModalOpen(false) }}\n >\n Review step content\n </WizardStep>\n </Wizard>\n </Modal>\n </>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
83
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
83
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1416" data-pf-content="true" class="pf-v6-c-content--h3">Step drawer content</h3>
|
|
84
84
|
|
|
85
85
|
<astro-island uid="ZaWFhs" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useRef, useState } from 'react';\nimport {\n Drawer,\n DrawerContent,\n DrawerPanelContent,\n DrawerColorVariant,\n DrawerHead,\n DrawerActions,\n DrawerCloseButton,\n Flex,\n Button,\n useWizardContext,\n Wizard,\n WizardStep\n} from '@patternfly/react-core';\nimport styles from '@patternfly/react-styles/css/components/Wizard/wizard';\n\nconst StepContentWithDrawer: React.FunctionComponent = () => {\n const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n const { activeStep } = useWizardContext();\n const drawerRef = useRef<HTMLSpanElement>(null);\n\n const onWizardExpand = () => drawerRef.current && drawerRef.current.focus();\n\n return (\n <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}>\n <DrawerContent\n panelContent={\n <DrawerPanelContent widths={{ default: 'width_50' }} colorVariant={DrawerColorVariant.secondary}>\n <DrawerHead>\n <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>\n Drawer content: <strong>{activeStep?.name}</strong>\n </span>\n <DrawerActions>\n <DrawerCloseButton onClick={() => setIsDrawerExpanded(false)} />\n </DrawerActions>\n </DrawerHead>\n </DrawerPanelContent>\n }\n >\n <Flex\n className={styles.wizardMainBody}\n direction={{ default: 'column' }}\n spaceItems={{ default: 'spaceItemsLg' }}\n height=\"100%\"\n >\n {!isDrawerExpanded && (\n <Button isInline variant=\"link\" onClick={() => setIsDrawerExpanded((prevExpanded) => !prevExpanded)}>\n Open drawer\n </Button>\n )}\n <div>{activeStep?.name} content</div>\n </Flex>\n </DrawerContent>\n </Drawer>\n );\n};\n\nexport const WizardStepDrawerContent: React.FunctionComponent = () => (\n <Wizard height={400} title=\"With drawer wizard\">\n <WizardStep body={{ hasNoPadding: true }} name=\"Step 1\" id=\"with-drawer-step-1\">\n <StepContentWithDrawer />\n </WizardStep>\n <WizardStep\n name=\"Step 2\"\n id=\"with-drawer-step-2\"\n steps={[\n <WizardStep\n body={{ hasNoPadding: true }}\n key=\"with-drawer-substep-1\"\n name=\"Substep 1\"\n id=\"with-drawer-substep-1\"\n >\n <StepContentWithDrawer />\n </WizardStep>,\n <WizardStep\n body={{ hasNoPadding: true }}\n key=\"with-drawer-substep-2\"\n name=\"Substep 2\"\n id=\"with-drawer-substep-2\"\n >\n <StepContentWithDrawer />\n </WizardStep>\n ]}\n >\n <StepContentWithDrawer />\n </WizardStep>\n <WizardStep name=\"Review\" id=\"with-drawer-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
86
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
86
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1417" data-pf-content="true" class="pf-v6-c-content--h3">Custom navigation</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="1d99Gc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Wizard,\n WizardStep,\n WizardStepType,\n CustomWizardNavFunction,\n WizardNav,\n WizardNavItem\n} from '@patternfly/react-core';\n\nexport const WizardWithCustomNav: React.FunctionComponent = () => {\n const nav: CustomWizardNavFunction = (\n isExpanded: boolean,\n steps: WizardStepType[],\n activeStep: WizardStepType,\n goToStepByIndex: (index: number) => void\n ) => (\n <WizardNav isExpanded={isExpanded}>\n {steps.map((step) => (\n <WizardNavItem\n key={step.id}\n id={step.id}\n content={step.name}\n isCurrent={activeStep.id === step.id}\n isDisabled={step.isDisabled}\n stepIndex={step.index}\n onClick={() => goToStepByIndex(step.index)}\n />\n ))}\n </WizardNav>\n );\n\n return (\n <Wizard height={400} nav={nav}>\n <WizardStep name=\"Step 1\" id=\"custom-nav-first-step\">\n Did you say...custom nav?\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"custom-nav-second-step\">\n Oh, you didn't?\n </WizardStep>\n <WizardStep name=\"Review\" id=\"custom-nav-review-step\" footer={{ nextButtonText: 'Wrap it up' }}>\n Well, this is awkward.\n </WizardStep>\n </Wizard>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
89
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1418" data-pf-content="true" class="pf-v6-c-content--h3">Header</h3>
|
|
90
90
|
|
|
91
91
|
<astro-island uid="Xeens" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithHeader: React.FunctionComponent = () => (\n <Wizard\n height={400}\n title=\"Header wizard\"\n header={\n <WizardHeader\n title=\"You're a wizard, Harry\"\n description=\"To be clear, all those not named Harry are not wizards.\"\n closeButtonAriaLabel=\"Close header\"\n />\n }\n >\n <WizardStep name=\"Step 1\" id=\"header-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"header-second-step\">\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"header-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
92
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
92
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1419" data-pf-content="true" class="pf-v6-c-content--h3">Custom footer</h3>
|
|
93
93
|
|
|
94
94
|
<astro-island uid="EhpwV" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n ActionList,\n ActionListGroup,\n ActionListItem,\n Button,\n Flex,\n FlexItem,\n Spinner,\n useWizardContext,\n Wizard,\n WizardFooter,\n WizardFooterWrapper,\n WizardStep\n} from '@patternfly/react-core';\n\nconst CustomWizardFooter = () => {\n const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();\n\n return (\n <WizardFooter\n activeStep={activeStep}\n onNext={goToNextStep}\n onBack={goToPrevStep}\n onClose={close}\n isBackDisabled={activeStep.index === 1}\n />\n );\n};\n\nconst CustomStepTwoFooter = () => {\n const { goToNextStep, goToPrevStep, close } = useWizardContext();\n const [isLoading, setIsLoading] = useState(false);\n\n async function onNext() {\n setIsLoading(true);\n await new Promise((resolve) => setTimeout(resolve, 2000));\n setIsLoading(false);\n\n goToNextStep();\n }\n\n return (\n <WizardFooterWrapper>\n <ActionList>\n <ActionListGroup>\n <ActionListItem>\n <Button variant=\"secondary\" onClick={goToPrevStep} isDisabled={isLoading}>\n Back\n </Button>\n </ActionListItem>\n <ActionListItem>\n <Button variant=\"primary\" onClick={onNext} isLoading={isLoading} isDisabled={isLoading}>\n Async Next\n </Button>\n </ActionListItem>\n </ActionListGroup>\n <ActionListGroup>\n <ActionListItem>\n <Button variant=\"link\" onClick={close} isDisabled={isLoading}>\n Cancel\n </Button>\n </ActionListItem>\n </ActionListGroup>\n </ActionList>\n </WizardFooterWrapper>\n );\n};\n\ninterface ReviewStepContentProps {\n isSubmitting: boolean | undefined;\n}\n\nconst ReviewStepContent: React.FunctionComponent<ReviewStepContentProps> = ({ isSubmitting }) => {\n if (isSubmitting === undefined) {\n return <FlexItem alignSelf={{ default: 'alignSelfFlexStart' }}>Review step content</FlexItem>;\n }\n\n if (isSubmitting) {\n return (\n <>\n <div>Calculating wizard score...</div>\n <Spinner />\n </>\n );\n }\n\n return <>50 points to Gryffindor!</>;\n};\n\nexport const WizardWithCustomFooter: React.FunctionComponent = () => {\n const [isSubmitting, setIsSubmitting] = useState<boolean>();\n\n async function onSubmit(): Promise<void> {\n setIsSubmitting(true);\n\n await new Promise((resolve) => setTimeout(resolve, 5000));\n\n setIsSubmitting(false);\n }\n\n return (\n <Wizard height={400} title=\"Custom footer wizard\" footer={<CustomWizardFooter />}>\n <WizardStep name=\"Step 1\" id=\"custom-footer-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep id=\"custom-footer-second-step\" name=\"Step 2\" footer={<CustomStepTwoFooter />}>\n Step 2 content with a custom async footer\n </WizardStep>\n <WizardStep\n id=\"custom-footer-review-step\"\n name=\"Review\"\n footer={{\n nextButtonText: 'Submit',\n onNext: onSubmit,\n isNextDisabled: isSubmitting,\n isBackDisabled: isSubmitting\n }}\n >\n <Flex\n direction={{ default: 'column' }}\n alignItems={{ default: 'alignItemsCenter' }}\n spaceItems={{ default: 'spaceItemsLg' }}\n >\n <ReviewStepContent isSubmitting={isSubmitting} />\n </Flex>\n </WizardStep>\n </Wizard>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
95
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
95
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1420" data-pf-content="true" class="pf-v6-c-content--h3">Custom navigation item</h3>
|
|
96
96
|
|
|
97
97
|
<astro-island uid="211aaI" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Wizard, WizardStep } from '@patternfly/react-core';\n\nexport const WizardWithCustomNavItem: React.FunctionComponent = () => (\n <Wizard height={400} title=\"Custom navigation item wizard\">\n <WizardStep name=\"Step 1\" id=\"custom-nav-item-first-step\">\n Step 1 content\n </WizardStep>\n <WizardStep\n id=\"custom-nav-item-second-step\"\n name=\"Step 2\"\n navItem={{\n content: <span>Custom item</span>\n }}\n >\n Step 2 content with a custom navigation item\n </WizardStep>\n <WizardStep name=\"Review\" id=\"custom-nav-item-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
98
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1421" data-pf-content="true" class="pf-v6-c-content--h3">Toggle step visibility</h3>
|
|
99
99
|
|
|
100
100
|
<astro-island uid="Zda6EJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { createContext, useContext, useState } from 'react';\nimport { Checkbox, Wizard, WizardStep } from '@patternfly/react-core';\n\ninterface SomeContextProps {\n isToggleStepChecked: boolean;\n setIsToggleStepChecked(isHidden: boolean): void;\n}\ntype SomeContextRenderProps = Pick<SomeContextProps, 'isToggleStepChecked'>;\ninterface SomeContextProviderProps {\n children: (context: SomeContextRenderProps) => React.ReactElement<any>;\n}\n\nconst SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);\n\nconst SomeContextProvider: React.FunctionComponent<SomeContextProviderProps> = ({ children }) => {\n const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);\n\n return (\n <SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}>\n {children({ isToggleStepChecked })}\n </SomeContext.Provider>\n );\n};\n\nconst StepContentWithAction: React.FunctionComponent = () => {\n const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);\n\n return (\n <Checkbox\n label=\"Toggle visibility of the next step\"\n isChecked={isToggleStepChecked}\n onChange={(_event, checked) => setIsToggleStepChecked(checked)}\n id=\"toggle-hide-step-checkbox\"\n name=\"Toggle Hide Step Checkbox\"\n />\n );\n};\n\nexport const WizardToggleStepVisibility: React.FunctionComponent = () => (\n <SomeContextProvider>\n {({ isToggleStepChecked }) => (\n <Wizard height={400} title=\"Toggle step visibility wizard\">\n <WizardStep name=\"Hidden action step\" id=\"toggle-visible-step-1\">\n <StepContentWithAction />\n </WizardStep>\n <WizardStep name=\"Step 2\" id=\"toggle-visible-step-2\" isHidden={isToggleStepChecked}>\n Step 2 content\n </WizardStep>\n <WizardStep name=\"Review\" id=\"toggle-visible-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n )}\n </SomeContextProvider>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
101
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
101
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1422" data-pf-content="true" class="pf-v6-c-content--h3">Step status</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="ZBWdjL" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { createContext, useContext, useState } from 'react';\nimport { Radio, Wizard, WizardStep } from '@patternfly/react-core';\n\ninterface SomeContextProps {\n errorMessage: string | undefined;\n setErrorMessage(error: string | undefined): void;\n successMessage: string | undefined;\n setSuccessMessage(error: string | undefined): void;\n}\ntype SomeContextRenderProps = Pick<SomeContextProps, 'successMessage', 'errorMessage'>;\ninterface SomeContextProviderProps {\n children: (context: SomeContextRenderProps) => React.ReactElement<any>;\n}\n\nconst SomeContext: React.Context<SomeContextProps> = createContext({} as SomeContextProps);\n\nconst SomeContextProvider = ({ children }: SomeContextProviderProps) => {\n const [errorMessage, setErrorMessage] = useState<string>();\n const [successMessage, setSuccessMessage] = useState<string>();\n\n return (\n <SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}>\n {children({ errorMessage, successMessage })}\n </SomeContext.Provider>\n );\n};\n\nconst StepContentWithAction = () => {\n const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);\n\n return (\n <>\n <Radio\n label=\"Give step 1 an error status\"\n isChecked={!!errorMessage}\n onChange={(_event, checked) => {\n setErrorMessage(checked ? 'Some error message' : undefined);\n setSuccessMessage(!checked ? 'Some error message' : undefined);\n }}\n id=\"toggle-error-checkbox\"\n name=\"Toggle Status\"\n />\n <Radio\n label=\"Give step 1 a success status\"\n isChecked={!!successMessage}\n onChange={(_event, checked) => {\n setSuccessMessage(checked ? 'Some success message' : undefined);\n setErrorMessage(!checked ? 'Some success message' : undefined);\n }}\n id=\"toggle-success-checkbox\"\n name=\"Toggle Status\"\n />\n </>\n );\n};\n\nexport const WizardStepStatus: React.FunctionComponent = () => (\n <SomeContextProvider>\n {({ errorMessage, successMessage }) => {\n let status = 'default';\n if (errorMessage) {\n status = 'error';\n } else if (successMessage) {\n status = 'success';\n }\n return (\n <Wizard height={400} title=\"Step status wizard\">\n <WizardStep status={status} id=\"status-step-1\" name=\"Step 1\">\n Step 1 content\n </WizardStep>\n <WizardStep name=\"Status step\" id=\"error-status-step-2\">\n <StepContentWithAction />\n </WizardStep>\n <WizardStep name=\"Review\" id=\"status-review-step\" footer={{ nextButtonText: 'Finish' }}>\n Review step content\n </WizardStep>\n </Wizard>\n );\n }}\n </SomeContextProvider>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
104
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
105
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
106
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1423" data-pf-content="true" class="pf-v6-c-content--h2">Hooks</h2>
|
|
105
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1424" data-pf-content="true" class="pf-v6-c-content--h3">useWizardContext</h3>
|
|
106
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1431" data-pf-content="true" class="pf-v6-c-content--p">Used to access any property of <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1425" data-pf-content="true" class="pf-v6-c-content--a">WizardContext</a>:</p>
|
|
107
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1429" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span></span></span>
|
|
108
108
|
<span class="line"><span>const StepContent = () => {</span></span>
|
|
109
109
|
<span class="line"><span> const { activeStep } = useWizardContext();</span></span>
|
|
110
110
|
<span class="line"><span> return <>This is the current step: {activeStep}</>;</span></span>
|
|
111
111
|
<span class="line"><span>}</span></span></code></pre>
|
|
112
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
113
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
114
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
112
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1426" data-pf-content="true" class="pf-v6-c-content--h3">useWizardFooter</h3>
|
|
113
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1427" data-pf-content="true" class="pf-v6-c-content--p">Used to set a unique footer for the wizard on any given step.</p>
|
|
114
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1430" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span></span></span>
|
|
115
115
|
<span class="line"><span>const StepContent = () => {</span></span>
|
|
116
116
|
<span class="line"><span> useWizardFooter(<>Some footer</>);</span></span>
|
|
117
117
|
<span class="line"><span> return <>Step content</>;</span></span>
|
|
118
|
-
<span class="line"><span>}</span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z29HCKV" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Wizard"],[0,"WizardFooter"],[0,"WizardFooterWrapper"],[0,"WizardToggle"],[0,"WizardStep"],[0,"WizardBody"],[0,"WizardHeader"],[0,"WizardNav"],[0,"WizardNavItem"],[0,"WizardContextProps"],[0,"WizardBasicStep"],[0,"WizardParentStep"],[0,"WizardSubStep"]]],"url":[7,"http://localhost:4321/components/wizard/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-
|
|
118
|
+
<span class="line"><span>}</span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z29HCKV" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Wizard"],[0,"WizardFooter"],[0,"WizardFooterWrapper"],[0,"WizardToggle"],[0,"WizardStep"],[0,"WizardBody"],[0,"WizardHeader"],[0,"WizardNav"],[0,"WizardNavItem"],[0,"WizardContextProps"],[0,"WizardBasicStep"],[0,"WizardParentStep"],[0,"WizardSubStep"]]],"url":[7,"http://localhost:4321/components/wizard/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-1402" 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>
|
|
119
119
|
CSS variables
|
|
120
120
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZIWqYs" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-wizard"]}" 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>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patternfly/patternfly-doc-core",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.12.
|
|
4
|
+
"version": "1.12.2",
|
|
5
5
|
"description": "PatternFly Core Documentation",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@patternfly/react-table": "^6.0.0",
|
|
62
62
|
"@patternfly/react-tokens": "^6.0.0",
|
|
63
63
|
"@types/react": "^18.3.12",
|
|
64
|
-
"@types/react-dom": "^18.3.
|
|
64
|
+
"@types/react-dom": "^18.3.7",
|
|
65
65
|
"astro": "^5.9.3",
|
|
66
66
|
"change-case": "5.4.4",
|
|
67
67
|
"commander": "^13.1.0",
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
"react-docgen": "^7.1.1",
|
|
72
72
|
"react-dom": "^18.3.1",
|
|
73
73
|
"react-error-boundary": "^6.0.0",
|
|
74
|
-
"sass": "^1.
|
|
74
|
+
"sass": "^1.89.2",
|
|
75
75
|
"typescript": "^5.6.3"
|
|
76
76
|
},
|
|
77
77
|
"devDependencies": {
|
/package/dist/docs/_worker.js/chunks/{_astro_assets_tcq0nD7B.mjs → _astro_assets_Dcv7PKDL.mjs}
RENAMED
|
File without changes
|
|
File without changes
|
/package/dist/docs/_worker.js/chunks/{content-modules_D0Eecfsp.mjs → content-modules_pw1AqUgZ.mjs}
RENAMED
|
File without changes
|
|
File without changes
|