@patternfly/patternfly-doc-core 1.9.1 → 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/cli/convertToMDX.ts +77 -22
- package/dist/.assetsignore +2 -0
- package/dist/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js +1 -0
- package/dist/{client/_astro/LiveExample.DZkxbJA_.js → _astro/LiveExample.DjPiO80i.js} +1 -1
- 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/cli/convertToMDX.js +53 -16
- package/dist/components/accordion/index.html +60 -0
- package/dist/components/accordion/react/index.html +60 -0
- 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/components/LiveExample.astro +2 -2
- package/src/components/LiveExample.tsx +38 -9
- 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/accordion/index.html +0 -110
- package/dist/client/components/accordion/react/index.html +0 -110
- 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_DxJLmW-j.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}/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
|
@@ -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>
|
|
@@ -0,0 +1,198 @@
|
|
|
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=EE1441313976766FA4EC5ED5ZQ1XBAaXzobMl1HTIG%2BV7nFt&s=%7B%7D" crossorigin="anonymous"><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=1CEAD6AB77CB239367EF83F6v1F7fBameUUPMxE2pN3JNnJh&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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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><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><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="1hGeDB" prefix="r11" 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-10"><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="1sQMN7" prefix="r13" 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-4"><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-11"><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-12"><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-4"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><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="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p>You can use <strong>typography</strong> to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.</p>
|
|
48
|
+
<p>This page outlines PatternFly’s typography principles and standards, including token values and usage information.</p>
|
|
49
|
+
<p>You can place text content on a page using the content or title component:</p>
|
|
50
|
+
<ul>
|
|
51
|
+
<li><strong><a href="/components/content">Content component:</a></strong> Used to create formatted blocks of text content. Content accepts all general HTML text formatting tags, including heading, paragraph, and list styles.</li>
|
|
52
|
+
<li><strong><a href="/components/title">Title component:</a></strong> Used specifically for headings or title text in components. Title is flexible and allows you to set the size of the text and heading level independently.</li>
|
|
53
|
+
</ul>
|
|
54
|
+
<h2 id="patternfly-fonts">PatternFly fonts</h2>
|
|
55
|
+
<p>We use 3 fonts in PatternFly:</p>
|
|
56
|
+
<ul>
|
|
57
|
+
<li><strong>Red Hat Display:</strong> Used for larger text, such as headings.</li>
|
|
58
|
+
<li><strong>Red Hat Text:</strong> Used for smaller text, subheadings, and body text. More readable for long-form text.</li>
|
|
59
|
+
<li><strong>Red Hat Mono:</strong> A tabular font used to format text as code. <a href="#tabular-font-styling">Read more about our use of tabular font styling.</a></li>
|
|
60
|
+
</ul>
|
|
61
|
+
<p><a href="https://github.com/RedHatOfficial/RedHatFont">Download PatternFly’s fonts from GitHub.</a></p>
|
|
62
|
+
<h3 id="font-sizing-rem-vs-pixel">Font sizing: rem vs pixel</h3>
|
|
63
|
+
<p>Font size tokens use rems, rather than pixels. Rems are relative units that adjust font size based on a webpage’s HTML document root element size. For example, if the root size is 10px, a rem size of 1.5 would be 15px.</p>
|
|
64
|
+
<p>PatternFly’s default root element size is 16px. If you change this default size, note that the following tables will no longer show accurate pixel measurements (though the rem values will stay the same).</p>
|
|
65
|
+
<h2 id="headings">Headings</h2>
|
|
66
|
+
<p>All headings use Red Hat Display bold.</p>
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><title headinglevel="h5" size="2xl"> Aa </title></td><td>—pf-t—global—font—size—heading—h1</td><td>1.375rem (22px)</td><td>1.3</td><td>Super hero headings <br> H1 <br> Page titles</td></tr><tr><td><title headinglevel="h5" size="xl"> Aa </title></td><td>—pf-t—global—font—size—heading—h2</td><td>1.25rem (20px)</td><td>1.3</td><td>Hero headings <br> H2</td></tr><tr><td><title headinglevel="h5" size="lg"> Aa </title></td><td>—pf-t—global—font—size—heading—h3</td><td>1.125rem (18px)</td><td>1.3</td><td>H3</td></tr><tr><td><title headinglevel="h5" size="md"> Aa </title></td><td>—pf-t—global—font—size—heading—h4 <br> —pf-t—global—font—size—heading—h5 <br> —pf-t—global—font—size—heading—h6</td><td>1rem (16px)</td><td>1.3</td><td>H4 <br> H5 <br> H6</td></tr></tbody></table>
|
|
108
|
+
<h3 id="customizing-heading-levels">Customizing heading levels</h3>
|
|
109
|
+
<p>The <a href="/components/title">title component</a> allows you to customize the visual hierarchy of text on your page, while keeping the semantic hierarchy consistent with expectations for accessibility.</p>
|
|
110
|
+
<p>The following table shows the default mapping of PatternFly heading levels to text size:</p>
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
<table><thead><tr><th>Heading level</th><th>Default size</th></tr></thead><tbody><tr><td>H1</td><td>2xl (1.375rem, 22px)</td></tr><tr><td>H2</td><td>xl (1.25rem, 20px)</td></tr><tr><td>H3</td><td>lg (1.125rem, 18px)</td></tr><tr><td>H4</td><td>md (1 rem, 16px)</td></tr><tr><td>H5</td><td>md (1 rem, 16px)</td></tr><tr><td>H6</td><td>md (1 rem, 16px)</td></tr></tbody></table>
|
|
145
|
+
<p>If you use the title component, you can change the text size of your heading levels to customize beyond this default behavior.</p>
|
|
146
|
+
<p>For example, you may decide that the default size of 20px for secondary headings is too large and you want to decrease the size from 20px (xl) to 18px (lg). Instead of making your secondary headings H3’s to set the size, you should use the title component to keep them as H2 headings and change the <code>size</code> property from <code>xl</code> to <code>lg</code>.</p>
|
|
147
|
+
<p>Example:</p>
|
|
148
|
+
<title headinglevel="h2"> This is a default "xl" H2. </title>
|
|
149
|
+
```<title headinglevel="h2" size="lg"> Aa </title>```
|
|
150
|
+
<title headinglevel="h2" size="lg"> This is a customized "lg" H2. </title>
|
|
151
|
+
```<title headinglevel="h2" size="lg"> Aa </title>```
|
|
152
|
+
<p>Make sure that you maintain good visual hierarchy and mapping between heading levels and text sizes. In most cases, H1 should always be your largest heading and subheadings should get progressively smaller as you move down the hierarchy. Rare exceptions to this rule do occur, but should only be used to highlight critical data. For example, there might be scenarios where card titles use a text size that is larger than the H1 page title.</p>
|
|
153
|
+
<p>Refer to the <a href="/components/title#custom-sizes">title component examples</a> to understand the range of customization options.</p>
|
|
154
|
+
<h2 id="body-text">Body text</h2>
|
|
155
|
+
<p>All body text uses Red Hat Text.</p>
|
|
156
|
+
|
|
157
|
+
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
<table><thead><tr><th>Example</th><th>Tokens</th><th>Size</th><th>Line height</th><th>Usage</th></tr></thead><tbody><tr><td><p style="font-size:16px">Aa</p></td><td>—pf-t—global—font—size—body—lg</td><td>1rem (16px)</td><td>1.5</td><td>Use for larger body text, like in xl empty states.</td></tr><tr><td><content><content component="{ContentVariants.p}">Aa</content></content></td><td>—pf-t—global—font—size—body—default</td><td>0.875rem (14px)</td><td>1.5</td><td>Use for standard body text.</td></tr><tr><td><content><content component="{ContentVariants.small}">Aa</content></content></td><td>—pf-t—global—font—size—body—sm</td><td>0.75rem (12px)</td><td>1.5</td><td>User for smaller body text, like helper text.</td></tr></tbody></table>
|
|
190
|
+
<h2 id="tabular-font-styling">Tabular font styling</h2>
|
|
191
|
+
<p>The primary fonts used in PatternFly (Red Hat Display and Red Hat Text) are proportional fonts, which typically offer better readability for standard blocks of text. When numerals are placed within long text bodies, as part of the text, it is best to use a proportional font.</p>
|
|
192
|
+
<p>Sometimes, numerals benefit from the use of a tabular font instead. <strong>Tabular fonts</strong> apply uniform width and spacing to helps maintain proper alignment of numbers. This can be particularly helpful when numbers are dynamically changing on screen, to prevent rough and jumpy movement.</p>
|
|
193
|
+
<p>Tabular font styling is used in a couple of PatternFly components, including slider and progress, but we also offer a modifier that allows you to apply tabular styling on your own: <code>.pf-v6-m-tabular-nums</code>, which sets <code>font-variant-numeric: tabular-nums;</code></p>
|
|
194
|
+
<h2 id="line-height-and-spacing">Line height and spacing</h2>
|
|
195
|
+
<p>The line height of your text impacts how you should use <a href="/design-foundations/spacers">spacers</a> in your design.</p>
|
|
196
|
+
<p>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.</p>
|
|
197
|
+
<p>For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.</p>
|
|
198
|
+
<p><img src="/content/typography/line-height.png" alt="Correct and incorrect text spacing examples."></p> <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>
|
|
@@ -1,10 +1,10 @@
|
|
|
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
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
4
4
|
<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)}
|
|
5
5
|
</style>
|
|
6
6
|
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
7
|
-
<link rel="stylesheet" href="/_astro/_page_.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
|
+
<link rel="stylesheet" href="/_astro/_page_.Chv_bGyU.css"><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=6329A8094DA1C362A1652BE7oajddYjO7ViNAq2WTv5YFkZn&s=%7B%7D" crossorigin="anonymous"><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=A6E1BFDEC3ECD13088C3B07CzGLZSzflQ5F8Kug1s8i%2BoQQt&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
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
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
10
|
animation-duration: 180ms;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
animation-fill-mode: both;
|
|
45
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
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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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"));})();;(()=>{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><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="Z18pYTc" prefix="r0" component-url="/_astro/PageToggle.CMZ3C1v1.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.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-13"><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="NT4yD" prefix="r2" component-url="/_astro/Toolbar.CroDQcyv.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.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-5"><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-14"><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-15"><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-5"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="1EjclH" component-url="/_astro/Navigation.kbLxctIo.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.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"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 id="patternfly-component-usage-and-behavior-guidelines">PatternFly component usage and behavior guidelines</h1>
|
|
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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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><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><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="Z18pYTc" prefix="r11" 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-13"><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="NT4yD" prefix="r13" 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-5"><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-14"><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-15"><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-5"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><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="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 id="patternfly-component-usage-and-behavior-guidelines">PatternFly component usage and behavior guidelines</h1>
|
|
48
48
|
<p>As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.</p>
|
|
49
49
|
<h2 id="displaying-structured-data">Displaying structured data</h2>
|
|
50
50
|
<p>Structured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the <strong><a href="/components/data-list">data list</a></strong> and the <strong><a href="/components/table">table</a></strong> components.</p>
|
|
@@ -344,54 +344,4 @@
|
|
|
344
344
|
|
|
345
345
|
|
|
346
346
|
|
|
347
|
-
<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><
|
|
348
|
-
let script = document.querySelector('script[data-island-id="572c5b2f-ae7a-43c5-b197-c3d056c7a981"]');
|
|
349
|
-
|
|
350
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=0E0971C1E80D5AADDD01D21F39RbU3nQp%2FjW0jPL7xEgShRO&s=%7B%7D');
|
|
351
|
-
|
|
352
|
-
if (script) {
|
|
353
|
-
if(
|
|
354
|
-
response.status === 200
|
|
355
|
-
&& response.headers.has('content-type')
|
|
356
|
-
&& response.headers.get('content-type').split(";")[0].trim() === 'text/html') {
|
|
357
|
-
let html = await response.text();
|
|
358
|
-
|
|
359
|
-
// Swap!
|
|
360
|
-
while(script.previousSibling &&
|
|
361
|
-
script.previousSibling.nodeType !== 8 &&
|
|
362
|
-
script.previousSibling.data !== '[if astro]>server-island-start<![endif]') {
|
|
363
|
-
script.previousSibling.remove();
|
|
364
|
-
}
|
|
365
|
-
script.previousSibling?.remove();
|
|
366
|
-
|
|
367
|
-
let frag = document.createRange().createContextualFragment(html);
|
|
368
|
-
script.before(frag);
|
|
369
|
-
}
|
|
370
|
-
script.remove();
|
|
371
|
-
}
|
|
372
|
-
</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=A27FA5760438C774F2130E17QP5q8JzlweUq%2B46D%2B56RpkHl&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="70ee0b6f-10dd-4dde-ab35-c8e1233dbf65">
|
|
373
|
-
let script = document.querySelector('script[data-island-id="70ee0b6f-10dd-4dde-ab35-c8e1233dbf65"]');
|
|
374
|
-
|
|
375
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=A27FA5760438C774F2130E17QP5q8JzlweUq%2B46D%2B56RpkHl&s=%7B%7D');
|
|
376
|
-
|
|
377
|
-
if (script) {
|
|
378
|
-
if(
|
|
379
|
-
response.status === 200
|
|
380
|
-
&& response.headers.has('content-type')
|
|
381
|
-
&& response.headers.get('content-type').split(";")[0].trim() === 'text/html') {
|
|
382
|
-
let html = await response.text();
|
|
383
|
-
|
|
384
|
-
// Swap!
|
|
385
|
-
while(script.previousSibling &&
|
|
386
|
-
script.previousSibling.nodeType !== 8 &&
|
|
387
|
-
script.previousSibling.data !== '[if astro]>server-island-start<![endif]') {
|
|
388
|
-
script.previousSibling.remove();
|
|
389
|
-
}
|
|
390
|
-
script.previousSibling?.remove();
|
|
391
|
-
|
|
392
|
-
let frag = document.createRange().createContextualFragment(html);
|
|
393
|
-
script.before(frag);
|
|
394
|
-
}
|
|
395
|
-
script.remove();
|
|
396
|
-
}
|
|
397
|
-
</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>
|
|
347
|
+
<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table> <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>
|