@patternfly/patternfly-doc-core 1.10.0 → 1.11.0
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.config.mjs +3 -4
- package/cli/cli.ts +60 -19
- package/dist/.assetsignore +2 -0
- package/dist/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js +1 -0
- package/dist/_astro/client.DN8ES6L5.js +1 -0
- package/dist/_routes.json +20 -0
- package/dist/_worker.js/_@astrojs-ssr-adapter.mjs +2 -0
- package/dist/_worker.js/_astro-internal_middleware.mjs +21 -0
- package/dist/_worker.js/_noop-actions.mjs +4 -0
- package/dist/{server/chunks/AutoLinkHeader_C2GD0g-K.mjs → _worker.js/chunks/AutoLinkHeader_xh_mBOfs.mjs} +13 -14
- package/dist/{server/chunks/Button_BKhHR-ak.mjs → _worker.js/chunks/Button_ByndGYyw.mjs} +83 -13
- package/dist/{server/chunks/CSSTable_B8tlH3gz.mjs → _worker.js/chunks/CSSTable_DAbso55e.mjs} +3 -3
- package/dist/_worker.js/chunks/PropsTables_BZngJp47.mjs +6628 -0
- package/dist/_worker.js/chunks/_@astrojs-ssr-adapter_C9Nk07-M.mjs +1082 -0
- package/dist/_worker.js/chunks/angle-down-icon_yt3z9cvI.mjs +3686 -0
- package/dist/_worker.js/chunks/astro/server_BpfPtTmt.mjs +7278 -0
- package/dist/_worker.js/chunks/astro-designed-error-pages_4xWqsa9_.mjs +928 -0
- package/dist/_worker.js/chunks/cloudflare-kv-binding_DMly_2Gl.mjs +107 -0
- package/dist/_worker.js/chunks/index_Dc2aKkl4.mjs +57 -0
- package/dist/{server/chunks/_@astrojs-ssr-adapter_CbICuCdt.mjs → _worker.js/chunks/index_DlGha6WC.mjs} +1295 -1817
- package/dist/_worker.js/chunks/noop-middleware_Ct44Kk5Y.mjs +10 -0
- package/dist/_worker.js/chunks/parse_EttCPxrw.mjs +271 -0
- package/dist/{server/chunks/path_Cvt6sEOY.mjs → _worker.js/chunks/path_C-ZOwaTP.mjs} +2 -1
- package/dist/{server/entry.mjs → _worker.js/index.js} +12 -19
- package/dist/_worker.js/manifest_DcBPbZXQ.mjs +100 -0
- package/dist/_worker.js/pages/_image.astro.mjs +24 -0
- package/dist/_worker.js/pages/_section_/_page_/_---tab_.astro.mjs +1 -0
- package/dist/_worker.js/pages/index.astro.mjs +1 -0
- package/dist/{server → _worker.js}/pages/props.astro.mjs +3 -2
- package/dist/_worker.js/renderers.mjs +484 -0
- package/dist/cli/cli.js +46 -12
- package/dist/{client/components/accordion/react → components/accordion}/index.html +14 -64
- package/dist/{client/components/accordion → components/accordion/react}/index.html +14 -64
- package/dist/components/all-components/index.html +47 -0
- package/dist/design-foundations/typography/index.html +198 -0
- package/dist/{client/design-foundations → design-foundations}/usage-and-behavior/index.html +4 -54
- package/dist/get-started/contribute/index.html +94 -0
- package/dist/index.html +43 -0
- package/package.json +12 -8
- package/public/.assetsignore +2 -0
- package/src/pages/props.ts +2 -2
- package/wrangler.jsonc +14 -0
- package/dist/client/_astro/ClientRouter.astro_astro_type_script_index_0_lang.Cainpjm5.js +0 -1
- package/dist/client/_astro/client.zs76E0tG.js +0 -1
- package/dist/client/components/all-components/index.html +0 -97
- package/dist/client/design-foundations/typography/index.html +0 -248
- package/dist/client/get-started/contribute/index.html +0 -144
- package/dist/client/index.html +0 -43
- package/dist/server/_@astrojs-ssr-adapter.mjs +0 -1
- package/dist/server/_noop-middleware.mjs +0 -3
- package/dist/server/chunks/PropsTables_PVzRHJNB.mjs +0 -1750
- package/dist/server/chunks/_astro_assets_DaYumpRZ.mjs +0 -1507
- package/dist/server/chunks/angle-down-icon_BO1Ed-9Z.mjs +0 -3288
- package/dist/server/chunks/astro/server_Cl9jPh4p.mjs +0 -2859
- package/dist/server/chunks/astro-designed-error-pages_BFveJFnQ.mjs +0 -282
- package/dist/server/chunks/consts_BmVDRGlB.mjs +0 -32
- package/dist/server/chunks/sharp_CbOL3WDk.mjs +0 -88
- package/dist/server/manifest_DsbMfV1U.mjs +0 -102
- package/dist/server/pages/_image.astro.mjs +0 -132
- package/dist/server/renderers.mjs +0 -308
- /package/dist/{client/PF-HorizontalLogo-Color.svg → PF-HorizontalLogo-Color.svg} +0 -0
- /package/dist/{client/PF-HorizontalLogo-Reverse.svg → PF-HorizontalLogo-Reverse.svg} +0 -0
- /package/dist/{client/_astro → _astro}/Button.BQCwQ5pE.js +0 -0
- /package/dist/{client/_astro → _astro}/CSSTable.DC79W1Ct.js +0 -0
- /package/dist/{client/_astro → _astro}/Content.B4M2qzJY.js +0 -0
- /package/dist/{client/_astro → _astro}/DropdownList.cxp03sS4.js +0 -0
- /package/dist/{client/_astro → _astro}/LiveExample.CxJsMvEq.css +0 -0
- /package/dist/{client/_astro → _astro}/LiveExample.DjPiO80i.js +0 -0
- /package/dist/{client/_astro → _astro}/Navigation.kbLxctIo.js +0 -0
- /package/dist/{client/_astro → _astro}/PageContext.miTsIqVo.js +0 -0
- /package/dist/{client/_astro → _astro}/PageSidebarBody.B0AJe8Hg.js +0 -0
- /package/dist/{client/_astro → _astro}/PageToggle.CMZ3C1v1.js +0 -0
- /package/dist/{client/_astro → _astro}/RedHatDisplayVF-Italic.CRpusWc8.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatDisplayVF.CYDHf1NI.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatMonoVF-Italic.DGQo2ogW.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatMonoVF.C4fMH6Vz.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatTextVF-Italic.Dkj_WqbA.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/RedHatTextVF.wYvZ7prR.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/SearchInput.DhHo7yPx.js +0 -0
- /package/dist/{client/_astro → _astro}/SectionGallery.3ABpQwE4.js +0 -0
- /package/dist/{client/_astro → _astro}/Toolbar.CroDQcyv.js +0 -0
- /package/dist/{client/_astro → _astro}/ToolbarContent.UH3ZRlHp.js +0 -0
- /package/dist/{client/_astro → _astro}/_page_.Chv_bGyU.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.CtheD08_.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.D1z73Byz.css +0 -0
- /package/dist/{client/_astro → _astro}/_page_.DxJDkZPc.css +0 -0
- /package/dist/{client/_astro → _astro}/angle-left-icon.teo8GC0v.js +0 -0
- /package/dist/{client/_astro → _astro}/bars-icon.Dk6ua1rr.js +0 -0
- /package/dist/{client/_astro → _astro}/divider.tlrBPkzg.js +0 -0
- /package/dist/{client/_astro → _astro}/fa-solid-900.DguXoeIz.woff2 +0 -0
- /package/dist/{client/_astro → _astro}/github-icon.ByC5XEPt.js +0 -0
- /package/dist/{client/_astro → _astro}/index.BQFV5hT1.js +0 -0
- /package/dist/{client/_astro → _astro}/index.CAChmxYj.js +0 -0
- /package/dist/{client/_astro → _astro}/index.DYVB4vTo.js +0 -0
- /package/dist/{client/_astro → _astro}/index.eCxJ45ll.js +0 -0
- /package/dist/{client/_astro → _astro}/link-icon.BNHnRn73.js +0 -0
- /package/dist/{client/_astro → _astro}/page.BTC3Kf3x.js +0 -0
- /package/dist/{client/_astro → _astro}/pf-v6-pficon.Dy6oiu9u.woff2 +0 -0
- /package/dist/{server/chunks/Accordion_BJka4Qvb.mjs → _worker.js/chunks/Accordion_BNafbla6.mjs} +0 -0
- /package/dist/{server/chunks/Accordion_BQIphkaZ.mjs → _worker.js/chunks/Accordion_CZsuyu9E.mjs} +0 -0
- /package/dist/{server/chunks/AllComponents_CRhgTsiT.mjs → _worker.js/chunks/AllComponents_BrL9IHSc.mjs} +0 -0
- /package/dist/{server/chunks/AllComponents_CjOtwUH6.mjs → _worker.js/chunks/AllComponents_CI7S6uwA.mjs} +0 -0
- /package/dist/{server/chunks/_astro_data-layer-content_D4Ib_RjR.mjs → _worker.js/chunks/_astro_assets_vBCb4v6U.mjs} +0 -0
- /package/dist/{server/chunks/content-assets_DleWbedO.mjs → _worker.js/chunks/_astro_data-layer-content_CgXoS6Mm.mjs} +0 -0
- /package/dist/{server/chunks/content-modules_fX1c2JRG.mjs → _worker.js/chunks/content-assets_XqCgPAV2.mjs} +0 -0
- /package/dist/{server/pages/_section_/_---page_.astro.mjs → _worker.js/chunks/content-modules_CKq2j9RQ.mjs} +0 -0
- /package/dist/{server/pages/_section_/_page_/_---tab_.astro.mjs → _worker.js/chunks/sharp_CNjr3bU4.mjs} +0 -0
- /package/dist/{server/pages/index.astro.mjs → _worker.js/pages/_section_/_---page_.astro.mjs} +0 -0
- /package/dist/{client/avatarImg.svg → avatarImg.svg} +0 -0
- /package/dist/{client/avatarImgDark.svg → avatarImgDark.svg} +0 -0
- /package/dist/{client/content → content}/typography/line-height.png +0 -0
- /package/dist/{client/favicon.svg → favicon.svg} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
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.
|
|
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_.D1z73Byz.css">
|
|
2
2
|
<link rel="stylesheet" href="/_astro/_page_.CtheD08_.css">
|
|
3
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
+
<link rel="stylesheet" href="/_astro/_page_.Chv_bGyU.css">
|
|
4
4
|
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
5
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css"><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=F3419043F56C2F36F2C691092Ot6gYIW5jGIJbZLGOEyip3pKcvVVxMVJvCdSA4XeOhd0nA57nlTWK9f4GYHApen5IB8EUywikN1bQ8QkycOcNdgPgWM84v5WymK0jToFoetKGR9NmTlmmHu8N%2Frq6d2PqJhn030M44dUWyfWPKnKvKZ7KzFnjm27qMQM%2F5TwD9ZA%2FRHJ4s%3D&s=%7B%7D" crossorigin="anonymous"><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=4FC66FC277448C4A54408663z6IW%2B9RaPJpcSkoVDxLQzFRQUcNDVXNRXFF5tnKm%2F52lIg1PQfPvXqrB8bNUVvVkfkGt&s=%7B%7D" crossorigin="anonymous"><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,69 +42,19 @@
|
|
|
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="
|
|
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="1YSmpQ" prefix="r25" component-url="/_astro/PageToggle.CMZ3C1v1.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-1"><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="Z2gowuL" prefix="r27" component-url="/_astro/Toolbar.CroDQcyv.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-1"><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-2"><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-3"><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-1"><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="1EjclH" component-url="/_astro/Navigation.kbLxctIo.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"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"> <script>async function replaceServerIsland(id, r) { let s = document.querySelector(`script[data-island-id="${id}"]`); if (!s || r.status !== 200 || r.headers.get('content-type')?.split(';')[0].trim() !== 'text/html') return; let html = await r.text(); while (s.previousSibling && s.previousSibling.nodeType !== 8 && s.previousSibling.data !== '[if astro]>server-island-start<![endif]') s.previousSibling.remove(); s.previousSibling?.remove(); s.before(document.createRange().createContextualFragment(html)); s.remove(); }</script><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/accordion/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1" 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-2" data-pf-content="true" class="pf-v6-c-content--h3">Definition list</h3>
|
|
47
47
|
|
|
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"));})()
|
|
49
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
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="ZjlBn0" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';\n\nexport const AccordionDefinitionList: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('def-list-toggle2');\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('');\n } else {\n setExpanded(id);\n }\n };\n\n return (\n <Accordion asDefinitionList>\n <AccordionItem isExpanded={expanded === 'def-list-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('def-list-toggle1');\n }}\n id=\"def-list-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"def-list-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'def-list-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('def-list-toggle2');\n }}\n id=\"def-list-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"def-list-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n ultrices, faucibus erat id, maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'def-list-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('def-list-toggle3');\n }}\n id=\"def-list-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"def-list-expand3\">\n <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'def-list-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('def-list-toggle4');\n }}\n id=\"def-list-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"def-list-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'def-list-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('def-list-toggle5');\n }}\n id=\"def-list-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"def-list-expand5\">\n <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\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-3" data-pf-content="true" class="pf-v6-c-content--h3">Single expand behavior</h3>
|
|
50
50
|
|
|
51
|
-
<astro-island uid="Z1nWbRt" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.
|
|
52
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
51
|
+
<astro-island uid="Z1nWbRt" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionSingleExpandBehavior: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('ex-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion asDefinitionList={false}>\n <AccordionItem isExpanded={expanded === 'ex-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('ex-toggle1')\n }}\n id=\"ex-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"ex-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'ex-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('ex-toggle2')\n }}\n id=\"ex-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"ex-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'ex-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('ex-toggle3')\n }}\n id=\"ex-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"ex-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'ex-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('ex-toggle4')\n }}\n id=\"ex-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"ex-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'ex-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('ex-toggle5')\n }}\n id=\"ex-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"ex-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
52
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-4" data-pf-content="true" class="pf-v6-c-content--h3">Fixed with multiple expand behavior</h3>
|
|
53
53
|
|
|
54
|
-
<astro-island uid="Z1b7wOW" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.
|
|
55
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
54
|
+
<astro-island uid="Z1b7wOW" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =\n () => {\n const [expanded, setExpanded] = useState(['ex2-toggle4'])\n\n const toggle = (id: string) => {\n const index = expanded.indexOf(id)\n const newExpanded: string[] =\n index >= 0\n ? [\n ...expanded.slice(0, index),\n ...expanded.slice(index + 1, expanded.length),\n ]\n : [...expanded, id]\n setExpanded(newExpanded)\n }\n\n return (\n <Accordion asDefinitionList={false}>\n <AccordionItem isExpanded={expanded.includes('ex2-toggle1')}>\n <AccordionToggle\n onClick={() => toggle('ex2-toggle1')}\n id=\"ex2-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"ex2-expand1\" isFixed>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded.includes('ex2-toggle2')}>\n <AccordionToggle\n onClick={() => toggle('ex2-toggle2')}\n id=\"ex2-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"ex2-expand2\" isFixed>\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded.includes('ex2-toggle3')}>\n <AccordionToggle\n onClick={() => toggle('ex2-toggle3')}\n id=\"ex2-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"ex2-expand3\" isFixed>\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n orci quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded.includes('ex2-toggle4')}>\n <AccordionToggle\n onClick={() => toggle('ex2-toggle4')}\n id=\"ex2-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent\n aria-labelledby=\"ex2-toggle4\"\n id=\"ex2-expand4\"\n isFixed\n >\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat\n volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n eros.\n </p>\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat\n volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded.includes('ex2-toggle5')}>\n <AccordionToggle\n onClick={() => toggle('ex2-toggle5')}\n id=\"ex2-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"ex2-expand5\" isFixed>\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n iaculis blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n }\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
55
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-5" data-pf-content="true" class="pf-v6-c-content--h3">Bordered</h3>
|
|
56
56
|
|
|
57
|
-
<astro-island uid="2rpo6E" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.
|
|
58
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
57
|
+
<astro-island uid="2rpo6E" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n AccordionExpandableContentBody,\n Button,\n Checkbox,\n} from '@patternfly/react-core'\nimport ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'\n\nexport const AccordionBordered: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('bordered-toggle4')\n const [isDisplayLarge, setIsDisplayLarge] = useState(false)\n\n const displaySize = isDisplayLarge ? 'lg' : 'default'\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <>\n <Accordion isBordered displaySize={displaySize}>\n <AccordionItem isExpanded={expanded === 'bordered-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle1')\n }}\n id=\"bordered-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle2')\n }}\n id=\"bordered-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle3')\n }}\n id=\"bordered-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n orci quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'bordered-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle4')\n }}\n id=\"bordered-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand4\" isCustomContent>\n <AccordionExpandableContentBody>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n Mauris et velit neque. Donec ultricies condimentum mauris,\n pellentesque imperdiet libero convallis convallis. Aliquam erat\n volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n eros.\n </AccordionExpandableContentBody>\n <AccordionExpandableContentBody>\n <Button variant=\"link\" size=\"lg\" isInline>\n Call to action <ArrowRightIcon />\n </Button>\n </AccordionExpandableContentBody>\n </AccordionContent>\n </AccordionItem>\n <AccordionItem isExpanded={expanded === 'bordered-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('bordered-toggle5')\n }}\n id=\"bordered-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"bordered-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n iaculis blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n <div style={{ marginTop: '30px' }}>\n <Checkbox\n label=\"Display size large\"\n isChecked={isDisplayLarge}\n onChange={(_event, checked) => setIsDisplayLarge(checked)}\n aria-label=\"show display large variation checkbox\"\n id=\"toggle-display-lg\"\n name=\"toggle-display-lg\"\n />\n </div>\n </>\n )\n}\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6" data-pf-content="true" class="pf-v6-c-content--h3">Toggle icon at start</h3>
|
|
59
59
|
|
|
60
|
-
<astro-island uid="ZRwOxm" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.
|
|
61
|
-
let script = document.querySelector('script[data-island-id="e7c31e16-328c-493c-ac7d-2f279d776fb4"]');
|
|
62
|
-
|
|
63
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=AB50A3274CA43FE73553E203iVvFUhsZaPsDb%2BEu3rX06l71iIIReSj4VAVlRJh9t%2Bbi7SpiJKC3Y1RWRG8csO8l%2Bq9Am2SJiVPmK0HLbG1XRxYxjZM5Fs839cmrs2MOxGjBpoO7ncou%2B%2F4rEjNug4y7lYCteriJ7UwSu0CLyO%2FEsINbkdaeFhGDzxWSRh3GsveJIXZewKo%3D&s=%7B%7D');
|
|
64
|
-
|
|
65
|
-
if (script) {
|
|
66
|
-
if(
|
|
67
|
-
response.status === 200
|
|
68
|
-
&& response.headers.has('content-type')
|
|
69
|
-
&& response.headers.get('content-type').split(";")[0].trim() === 'text/html') {
|
|
70
|
-
let html = await response.text();
|
|
71
|
-
|
|
72
|
-
// Swap!
|
|
73
|
-
while(script.previousSibling &&
|
|
74
|
-
script.previousSibling.nodeType !== 8 &&
|
|
75
|
-
script.previousSibling.data !== '[if astro]>server-island-start<![endif]') {
|
|
76
|
-
script.previousSibling.remove();
|
|
77
|
-
}
|
|
78
|
-
script.previousSibling?.remove();
|
|
79
|
-
|
|
80
|
-
let frag = document.createRange().createContextualFragment(html);
|
|
81
|
-
script.before(frag);
|
|
82
|
-
}
|
|
83
|
-
script.remove();
|
|
84
|
-
}
|
|
85
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=1A0F169A7DB20E97A9F19EFDSIxQ0hnJjcRfCh0fA%2B79Ym3%2B02%2FmI%2Bys5z5IhmGSt21cXgdGb%2F0FN7ORKFGSH21UgQNw&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="efd726cd-280f-407d-8877-2070c19ba5a2">
|
|
86
|
-
let script = document.querySelector('script[data-island-id="efd726cd-280f-407d-8877-2070c19ba5a2"]');
|
|
87
|
-
|
|
88
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=1A0F169A7DB20E97A9F19EFDSIxQ0hnJjcRfCh0fA%2B79Ym3%2B02%2FmI%2Bys5z5IhmGSt21cXgdGb%2F0FN7ORKFGSH21UgQNw&s=%7B%7D');
|
|
89
|
-
|
|
90
|
-
if (script) {
|
|
91
|
-
if(
|
|
92
|
-
response.status === 200
|
|
93
|
-
&& response.headers.has('content-type')
|
|
94
|
-
&& response.headers.get('content-type').split(";")[0].trim() === 'text/html') {
|
|
95
|
-
let html = await response.text();
|
|
96
|
-
|
|
97
|
-
// Swap!
|
|
98
|
-
while(script.previousSibling &&
|
|
99
|
-
script.previousSibling.nodeType !== 8 &&
|
|
100
|
-
script.previousSibling.data !== '[if astro]>server-island-start<![endif]') {
|
|
101
|
-
script.previousSibling.remove();
|
|
102
|
-
}
|
|
103
|
-
script.previousSibling?.remove();
|
|
104
|
-
|
|
105
|
-
let frag = document.createRange().createContextualFragment(html);
|
|
106
|
-
script.before(frag);
|
|
107
|
-
}
|
|
108
|
-
script.remove();
|
|
109
|
-
}
|
|
110
|
-
</script> </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>
|
|
60
|
+
<astro-island uid="ZRwOxm" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react'\nimport {\n Accordion,\n AccordionItem,\n AccordionContent,\n AccordionToggle,\n} from '@patternfly/react-core'\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () => {\n const [expanded, setExpanded] = useState('start-toggle-toggle2')\n\n const onToggle = (id: string) => {\n if (id === expanded) {\n setExpanded('')\n } else {\n setExpanded(id)\n }\n }\n\n return (\n <Accordion togglePosition=\"start\">\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle1'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle1')\n }}\n id=\"start-toggle-toggle1\"\n >\n Item one\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand1\">\n <p>\n Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n eiusmod tempor incididunt ut labore et dolore magna aliqua.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle2'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle2')\n }}\n id=\"start-toggle-toggle2\"\n >\n Item two\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand2\">\n <p>\n Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n maximus nunc.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle3'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle3')\n }}\n id=\"start-toggle-toggle3\"\n >\n Item three\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand3\">\n <p>\n Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n quis ultricies tempus.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle4'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle4')\n }}\n id=\"start-toggle-toggle4\"\n >\n Item four\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand4\">\n <p>\n Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n velit neque. Donec ultricies condimentum mauris, pellentesque\n imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem isExpanded={expanded === 'start-toggle-toggle5'}>\n <AccordionToggle\n onClick={() => {\n onToggle('start-toggle-toggle5')\n }}\n id=\"start-toggle-toggle5\"\n >\n Item five\n </AccordionToggle>\n <AccordionContent id=\"start-toggle-expand5\">\n <p>\n Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n blandit.\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n )\n}\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><script type="module" data-astro-rerun data-island-id="undefined">undefined</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><script type="module" data-astro-rerun data-island-id="undefined">undefined</script> </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>
|
|
@@ -0,0 +1,47 @@
|
|
|
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_.D1z73Byz.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.CtheD08_.css">
|
|
3
|
+
<link rel="stylesheet" href="/_astro/_page_.Chv_bGyU.css">
|
|
4
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
5
|
+
<style>.ws-section-gallery .pf-v6-c-toolbar{margin-block-end:var(--pf-t--global--spacer--md)}.ws-section-gallery-item{text-decoration:inherit;color:inherit}.ws-section-gallery .pf-v6-c-card{height:100%}.ws-section-gallery .pf-v6-c-data-list{max-width:var(--pf-t--global--breakpoint--lg)}
|
|
6
|
+
</style>
|
|
7
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css"><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=8603FD6549C0217155E98AC7iLVLyskyn%2FZOTNzPf95DDMWn&s=%7B%7D" crossorigin="anonymous"><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=41C41CEBE5A44AFB587D9B9BmXJ91IW0cn19dw0Qrcmjhv0J&s=%7B%7D" crossorigin="anonymous"><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"],
|
|
8
|
+
[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"],
|
|
9
|
+
[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) {
|
|
10
|
+
animation-duration: 180ms;
|
|
11
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
12
|
+
animation-fill-mode: both;
|
|
13
|
+
animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
|
|
14
|
+
animation-duration: 180ms;
|
|
15
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
16
|
+
animation-fill-mode: both;
|
|
17
|
+
animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
|
|
18
|
+
animation-duration: 180ms;
|
|
19
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
20
|
+
animation-fill-mode: both;
|
|
21
|
+
animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
|
|
22
|
+
animation-duration: 180ms;
|
|
23
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
24
|
+
animation-fill-mode: both;
|
|
25
|
+
animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
|
|
26
|
+
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
|
|
27
|
+
animation-duration: 180ms;
|
|
28
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
29
|
+
animation-fill-mode: both;
|
|
30
|
+
animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
|
|
31
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
|
|
32
|
+
animation-duration: 180ms;
|
|
33
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
34
|
+
animation-fill-mode: both;
|
|
35
|
+
animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
|
|
36
|
+
[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
|
|
37
|
+
animation-duration: 180ms;
|
|
38
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
39
|
+
animation-fill-mode: both;
|
|
40
|
+
animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
|
|
41
|
+
[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
|
|
42
|
+
animation-duration: 180ms;
|
|
43
|
+
animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
|
|
44
|
+
animation-fill-mode: both;
|
|
45
|
+
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"],
|
|
46
|
+
[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"],
|
|
47
|
+
[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="ZqdR7W" prefix="r13" component-url="/_astro/PageToggle.CMZ3C1v1.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-4"><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="BTuNE" prefix="r15" component-url="/_astro/Toolbar.CroDQcyv.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-2"><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-5"><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-6"><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-2"><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="1EjclH" component-url="/_astro/Navigation.kbLxctIo.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"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"> <script>async function replaceServerIsland(id, r) { let s = document.querySelector(`script[data-island-id="${id}"]`); if (!s || r.status !== 200 || r.headers.get('content-type')?.split(';')[0].trim() !== 'text/html') return; let html = await r.text(); while (s.previousSibling && s.previousSibling.nodeType !== 8 && s.previousSibling.data !== '[if astro]>server-island-start<![endif]') s.previousSibling.remove(); s.previousSibling?.remove(); s.before(document.createRange().createContextualFragment(html)); s.remove(); }</script><section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-2" class="pf-v6-c-title pf-m-4xl">All components</h1><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <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="1zQf7w" component-url="/_astro/SectionGallery.3ABpQwE4.js" component-export="SectionGallery" renderer-url="/_astro/client.DN8ES6L5.js" props="{"illustrations":[0],"section":[0,"components"],"galleryItemsData":[0,{"about-modal":[0,{"illustration":[0,"./images/component-illustrations/about-modal.png"],"summary":[0,"An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."]}],"accordion":[0,{"illustration":[0,"./images/component-illustrations/accordion.png"],"summary":[0,"An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."]}],"action-list":[0,{"illustration":[0,"./images/component-illustrations/action-list.png"],"summary":[0,"An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."]}],"alert":[0,{"illustration":[0,"./images/component-illustrations/alert.png"],"summary":[0,"An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."]}],"application-launcher":[0,{"illustration":[0,"./images/component-illustrations/application-launcher.png"],"summary":[0,"An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."],"label":[0,"demo"]}],"avatar":[0,{"illustration":[0,"./images/component-illustrations/avatar.png"],"summary":[0,"An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."]}],"back-to-top":[0,{"illustration":[0,"./images/component-illustrations/back-to-top.png"],"summary":[0,"The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."]}],"backdrop":[0,{"illustration":[0,"./images/component-illustrations/backdrop.png"],"summary":[0,"A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."]}],"background-image":[0,{"illustration":[0,"./images/component-illustrations/background-image.png"],"summary":[0,"A <b>background image</b> is an image that fills the background of a page."]}],"badge":[0,{"illustration":[0,"./images/component-illustrations/badge.png"],"summary":[0,"A <b>badge</b> is an annotation that displays a numeric value."]}],"banner":[0,{"illustration":[0,"./images/component-illustrations/banner.png"],"summary":[0,"A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."]}],"brand":[0,{"illustration":[0,"./images/component-illustrations/brand.png"],"summary":[0,"A <b>brand</b> is a visual representation of a product&mdash;typically its logo."]}],"breadcrumb":[0,{"illustration":[0,"./images/component-illustrations/breadcrumb.png"],"summary":[0,"A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."]}],"button":[0,{"illustration":[0,"./images/component-illustrations/button.png"],"summary":[0,"A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."]}],"calendar-month":[0,{"illustration":[0,"./images/component-illustrations/calendar-month.png"],"summary":[0,"A <b>calendar month</b> component allows users to select and navigate between days, months, and years."]}],"card":[0,{"illustration":[0,"./images/component-illustrations/card.png"],"summary":[0,"A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."]}],"checkbox":[0,{"illustration":[0,"./images/component-illustrations/checkbox.png"],"summary":[0,"A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."]}],"chip":[0,{"illustration":[0,"./images/component-illustrations/chip.png"],"summary":[0,"A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <a href='/components/label'>the label component</a> instead."],"label":[0,"deprecated"]}],"clipboard-copy":[0,{"illustration":[0,"./images/component-illustrations/clipboard-copy.png"],"summary":[0,"The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."]}],"code-block":[0,{"illustration":[0,"./images/component-illustrations/code-block.png"],"summary":[0,"A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."]}],"code-editor":[0,{"illustration":[0,"./images/component-illustrations/code-editor.png"],"summary":[0,"A <b>code editor</b> is a versatile <a href='https://microsoft.github.io/monaco-editor/'>Monaco-based</a> text editor that supports various programming languages."]}],"content":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>content</b> component contains a block of styled HTML content."]}],"context-selector":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."],"label":[0,"demo"]}],"custom-menus":[0,{"illustration":[0,"./images/component-illustrations/custom-menus.png"],"summary":[0,"<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <a href='/components/menus/menu'>menus</a> and <a href='/components/menus/menu-toggle'>menu toggles.</a>"],"label":[0,"demo"]}],"data-list":[0,{"illustration":[0,"./images/component-illustrations/data-list.png"],"summary":[0,"A <b>data list</b> displays large data sets and interactive content in a flexible layout."]}],"date-picker":[0,{"illustration":[0,"./images/component-illustrations/date-picker.png"],"summary":[0,"A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."]}],"date-and-time-picker":[0,{"illustration":[0,"./images/component-illustrations/date-and-time-picker.png"],"summary":[0,"A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <a href='/components/date-and-time/date-picker'>date picker</a> and <a href='/components/date-and-time/time-picker'>time picker</a> components."],"label":[0,"demo"]}],"description-list":[0,{"illustration":[0,"./images/component-illustrations/description-list.png"],"summary":[0,"A <b>description list</b> displays terms and their corresponding descriptions."]}],"divider":[0,{"illustration":[0,"./images/component-illustrations/divider.png"],"summary":[0,"A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."]}],"drag-and-drop":[0,{"illustration":[0,"./images/component-illustrations/drag-and-drop.png"],"summary":[0,"The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."]}],"drawer":[0,{"illustration":[0,"./images/component-illustrations/drawer.png"],"summary":[0,"A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."]}],"dropdown":[0,{"illustration":[0,"./images/component-illustrations/dropdown.png"],"summary":[0,"A <b>dropdown</b> displays a menu of actions that trigger a process and as that navigate to a new location."],"label":[0,"beta"]}],"dual-list-selector":[0,{"illustration":[0,"./images/component-illustrations/dual-list-selector.png"],"summary":[0,"A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."]}],"empty-state":[0,{"illustration":[0,"./images/component-illustrations/empty-state.png"],"summary":[0,"An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."]}],"expandable-section":[0,{"illustration":[0,"./images/component-illustrations/expandable-section.png"],"summary":[0,"An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."]}],"multiple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload-multiple.png"],"summary":[0,"A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."]}],"simple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload.png"],"summary":[0,"A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."]}],"form-control":[0,{"illustration":[0,"./images/component-illustrations/form-control.png"],"summary":[0,"A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."]}],"form":[0,{"illustration":[0,"./images/component-illustrations/form.png"],"summary":[0,"A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."]}],"form-select":[0,{"illustration":[0,"./images/component-illustrations/form-select.png"],"summary":[0,"A <b>form select</b> is a form element that embeds browser-native menus."]}],"helper-text":[0,{"illustration":[0,"./images/component-illustrations/helper-text.png"],"summary":[0,"<b>Helper text</b> is a text-based support method that adds additional context to field inputs."]}],"hint":[0,{"illustration":[0,"./images/component-illustrations/hint.png"],"summary":[0,"A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page or modal."]}],"icon":[0,{"illustration":[0,"./images/component-illustrations/icon.png"],"summary":[0,"An <b>icon</b> component is a container that supports <a href='/design-foundations/icons#all-icons'>icons</a> of varying dimensions and styles, as well as <a href='/components/spinner'>spinners.</a>"]}],"inline-edit":[0,{"illustration":[0,"./images/component-illustrations/inline-edit.png"],"summary":[0,"An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."]}],"input-group":[0,{"illustration":[0,"./images/component-illustrations/input-group.png"],"summary":[0,"An <b>input group</b> combines multiple related controls or inputs to appear as a single control."]}],"jump-links":[0,{"illustration":[0,"./images/component-illustrations/jump-links.png"],"summary":[0,"When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."]}],"label":[0,{"illustration":[0,"./images/component-illustrations/label.png"],"summary":[0,"A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."]}],"list":[0,{"illustration":[0,"./images/component-illustrations/list.png"],"summary":[0,"A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."]}],"login-page":[0,{"illustration":[0,"./images/component-illustrations/login-page.png"],"summary":[0,"A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."]}],"masthead":[0,{"illustration":[0,"./images/component-illustrations/masthead.png"],"summary":[0,"A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."]}],"menu-toggle":[0,{"illustration":[0,"./images/component-illustrations/menu-toggle.png"],"summary":[0,"A <b>menu toggle</b> is a selectable control that opens and closes a menu."]}],"menu":[0,{"illustration":[0,"./images/component-illustrations/menu.png"],"summary":[0,"A <b>menu</b> is a list of options or actions that users can choose from."]}],"modal":[0,{"illustration":[0,"./images/component-illustrations/modal.png"],"summary":[0,"A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."]}],"navigation":[0,{"illustration":[0,"./images/component-illustrations/navigation.png"],"summary":[0,"A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."]}],"notification-badge":[0,{"illustration":[0,"./images/component-illustrations/notification-badge.png"],"summary":[0,"A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."]}],"notification-drawer":[0,{"illustration":[0,"./images/component-illustrations/notification-drawer.png"],"summary":[0,"A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."]}],"number-input":[0,{"illustration":[0,"./images/component-illustrations/number-input.png"],"summary":[0,"A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."]}],"options-menu":[0,{"illustration":[0,"./images/component-illustrations/options-menu.png"],"summary":[0,"An <b>options menu</b> contains a set of optional settings."],"label":[0,"demo"]}],"overflow-menu":[0,{"illustration":[0,"./images/component-illustrations/overflow-menu.png"],"summary":[0,"An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."]}],"page":[0,{"illustration":[0,"./images/component-illustrations/page.png"],"summary":[0,"A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."]}],"pagination":[0,{"illustration":[0,"./images/component-illustrations/pagination.png"],"summary":[0,"A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."]}],"panel":[0,{"illustration":[0,"./images/component-illustrations/panel.png"],"summary":[0,"A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."]}],"password-generator":[0,{"illustration":[0,"./images/component-illustrations/password-generator.png"],"summary":[0,"This demo demonstrates how to create an input field that generates unique passwords."],"label":[0,"demo"]}],"password-strength":[0,{"illustration":[0,"./images/component-illustrations/password-strength.png"],"summary":[0,"This demo demonstrates how to validate and display feedback about password strength."],"label":[0,"demo"]}],"popover":[0,{"illustration":[0,"./images/component-illustrations/popover.png"],"summary":[0,"A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."]}],"progress-stepper":[0,{"illustration":[0,"./images/component-illustrations/progress-stepper.png"],"summary":[0,"A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."]}],"progress":[0,{"illustration":[0,"./images/component-illustrations/progress.png"],"summary":[0,"A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."]}],"radio":[0,{"illustration":[0,"./images/component-illustrations/radio.png"],"summary":[0,"A <b>radio</b> is a button that's used to present users with mutually exclusive choices."]}],"search-input":[0,{"illustration":[0,"./images/component-illustrations/search-input.png"],"summary":[0,"A <b>search input</b> is a type of input field that can be used to search, find, or filter."]}],"select":[0,{"illustration":[0,"./images/component-illustrations/select.png"],"summary":[0,"A <b>select</b> component is a menu that enables users to select 1 or more items from a list."],"label":[0,"beta"]}],"sidebar":[0,{"illustration":[0,"./images/component-illustrations/sidebar.png"],"summary":[0,"A <b>sidebar</b> is a panel that splits content into a secondary area within a page."]}],"simple-list":[0,{"illustration":[0,"./images/component-illustrations/simple-list.png"],"summary":[0,"A <b>simple list</b> displays selectable items within a page."]}],"skeleton":[0,{"illustration":[0,"./images/component-illustrations/skeleton.png"],"summary":[0,"A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."]}],"skip-to-content":[0,{"illustration":[0,"./images/component-illustrations/skip-to-content.png"],"summary":[0,"A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"]}],"slider":[0,{"illustration":[0,"./images/component-illustrations/slider.png"],"summary":[0,"A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."]}],"spinner":[0,{"illustration":[0,"./images/component-illustrations/spinner.png"],"summary":[0,"A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."]}],"switch":[0,{"illustration":[0,"./images/component-illustrations/switch.png"],"summary":[0,"A <b>switch</b> is a control that toggles the state of a setting between on and off."]}],"tab-content":[0,{"illustration":[0,"./images/component-illustrations/tab-content.png"],"summary":[0,"A <b>tab content</b> component is used to contain content within a tab."]}],"table":[0,{"illustration":[0,"./images/component-illustrations/table.png"],"summary":[0,"A <b>table</b> displays large data sets in a simple grid with column headers."]}],"tabs":[0,{"illustration":[0,"./images/component-illustrations/tabs.png"],"summary":[0,"<b>Tabs</b> group similar content within sub-views of a page."]}],"text-area":[0,{"illustration":[0,"./images/component-illustrations/text-area.png"],"summary":[0,"A <b>text area</b> allows users to enter a longer paragraph of text."]}],"text-input-group":[0,{"illustration":[0,"./images/component-illustrations/text-input-group.png"],"summary":[0,"A <b>text input group</b> is a more custom, flexible, and composable version of a <a href='/components/forms/text-input'>text input</a> that includes elements like icons and buttons."]}],"text-input":[0,{"illustration":[0,"./images/component-illustrations/text-input.png"],"summary":[0,"A <b>text input</b> components allows users to input short text."]}],"tile":[0,{"illustration":[0,"./images/component-illustrations/tile.png"],"summary":[0,"A <b>tile</b> is a container that allows users to select a static option."],"label":[0,"deprecated"]}],"time-picker":[0,{"illustration":[0,"./images/component-illustrations/time-picker.png"],"summary":[0,"A <b>time picker</b> component allows users to select a time from a list of options."]}],"timestamp":[0,{"illustration":[0,"./images/component-illustrations/timestamp.png"],"summary":[0,"A <b>timestamp</b> is a consistently formatted visual that displays date and time values."]}],"title":[0,{"illustration":[0,"./images/component-illustrations/title.png"],"summary":[0,"A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."]}],"toggle-group":[0,{"illustration":[0,"./images/component-illustrations/toggle-group.png"],"summary":[0,"A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."]}],"toolbar":[0,{"illustration":[0,"./images/component-illustrations/toolbar.png"],"summary":[0,"A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."]}],"tooltip":[0,{"illustration":[0,"./images/component-illustrations/tooltip.png"],"summary":[0,"A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."]}],"tree-view":[0,{"illustration":[0,"./images/component-illustrations/tree-view.png"],"summary":[0,"A <b>tree view</b> is a structure that displays data in a hierarchical view."]}],"truncate":[0,{"illustration":[0,"./images/component-illustrations/truncate.png"],"summary":[0,"A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."]}],"wizard":[0,{"illustration":[0,"./images/component-illustrations/wizard.png"],"summary":[0,"A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."]}]}],"placeholderText":[0,"Search components by name"],"countText":[0],"initialLayout":[0],"hasGridText":[0,true],"hasGridImages":[0],"hasListText":[0,true],"hasListImages":[0]}" ssr client="only" opts="{"name":"SectionGalleryBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><script type="module" data-astro-rerun data-island-id="undefined">undefined</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><script type="module" data-astro-rerun data-island-id="undefined">undefined</script> </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>
|