@patternfly/patternfly-doc-core 1.12.4 → 1.13.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/content-modules.mjs +18 -18
- package/cli/buildPropsData.ts +7 -3
- package/cli/cli.ts +6 -8
- package/cli/templates/pf-docs.config.mjs +1 -1
- package/dist/cli/buildPropsData.js +7 -3
- package/dist/cli/cli.js +6 -3
- package/dist/cli/templates/pf-docs.config.mjs +1 -1
- package/dist/docs/_worker.js/index.js +1 -1
- package/dist/docs/_worker.js/{manifest_87bGUcju.mjs → manifest_BT0KogAj.mjs} +1 -1
- package/dist/docs/components/back-to-top/index.html +5 -5
- package/dist/docs/components/back-to-top/react/index.html +5 -5
- package/dist/docs/components/backdrop/index.html +3 -3
- package/dist/docs/components/backdrop/react/index.html +3 -3
- package/dist/docs/components/background-image/index.html +3 -3
- package/dist/docs/components/background-image/react/index.html +3 -3
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/card/index.html +55 -55
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +16 -16
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +9 -9
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/content/react/index.html +19 -19
- package/dist/docs/components/data-list/index.html +24 -24
- package/dist/docs/components/data-list/react/index.html +24 -24
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +36 -36
- package/dist/docs/components/divider/index.html +14 -14
- package/dist/docs/components/divider/react/index.html +14 -14
- package/dist/docs/components/drawer/index.html +28 -28
- package/dist/docs/components/drawer/react/index.html +28 -28
- package/dist/docs/components/dropdown/index.html +20 -20
- package/dist/docs/components/dropdown/react/index.html +20 -20
- package/dist/docs/components/dual-list-selector/index.html +20 -20
- package/dist/docs/components/dual-list-selector/react-deprecated/index.html +28 -28
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/hint/index.html +11 -11
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/index.html +20 -20
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/jump-links/index.html +12 -12
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/label/react/index.html +28 -28
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/modal/react/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/index.html +29 -29
- package/dist/docs/components/multiple-file-upload/react/index.html +29 -29
- package/dist/docs/components/navigation/index.html +21 -21
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/panel/index.html +25 -25
- package/dist/docs/components/panel/react/index.html +25 -25
- package/dist/docs/components/popover/index.html +23 -23
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/index.html +20 -20
- package/dist/docs/components/progress/react/index.html +20 -20
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/search-input/index.html +14 -14
- package/dist/docs/components/search-input/react/index.html +14 -14
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/sidebar/react/index.html +17 -17
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +9 -9
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/tile/index.html +26 -26
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/package.json +1 -1
- package/pf-docs.config.mjs +1 -1
- package/src/pf-docs.config.mjs +1 -1
- /package/dist/docs/_worker.js/chunks/{_astro_assets_mEeJQNtn.mjs → _astro_assets_Cpp4aFxG.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_DSexW0T9.mjs → _astro_data-layer-content_D-EXtmSy.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_ByZ0SP-q.mjs → content-modules_CUXjIWnT.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{sharp_DD2qbOXY.mjs → sharp_C-KnEafm.mjs} +0 -0
|
@@ -42,94 +42,94 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="2ns70w" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-67"><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="ZJHmxs" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-23"><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-68"><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-69"><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-23"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-348" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="29uric" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-61"><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="1U8x5i" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-21"><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-62"><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-63"><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-21"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-314" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-315" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
|
|
47
47
|
|
|
48
48
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="291bp2" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListBasic: React.FunctionComponent = () => (\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
49
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-316" data-pf-content="true" class="pf-v6-c-content--h3">Term help text</h3>
|
|
50
50
|
|
|
51
51
|
<astro-island uid="1xMm1c" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListGroup,\n DescriptionListDescription,\n DescriptionListTermHelpText,\n DescriptionListTermHelpTextButton,\n Popover\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListWithTermHelpText: React.FunctionComponent = () => (\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTermHelpText>\n <Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>\n <DescriptionListTermHelpTextButton> Name </DescriptionListTermHelpTextButton>\n </Popover>\n </DescriptionListTermHelpText>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTermHelpText>\n <Popover headerContent={<div>Namespace</div>} bodyContent={<div>Additional namespace info</div>}>\n <DescriptionListTermHelpTextButton> Namespace </DescriptionListTermHelpTextButton>\n </Popover>\n </DescriptionListTermHelpText>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTermHelpText>\n <Popover headerContent={<div>Labels</div>} bodyContent={<div>Additional labels info</div>}>\n <DescriptionListTermHelpTextButton> Labels </DescriptionListTermHelpTextButton>\n </Popover>\n </DescriptionListTermHelpText>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTermHelpText>\n <Popover headerContent={<div>Pod selector</div>} bodyContent={<div>Additional pod selector info</div>}>\n <DescriptionListTermHelpTextButton> Pod selector </DescriptionListTermHelpTextButton>\n </Popover>\n </DescriptionListTermHelpText>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTermHelpText>\n <Popover headerContent={<div>Annotation</div>} bodyContent={<div>Additional annotation info</div>}>\n <DescriptionListTermHelpTextButton> Annotation </DescriptionListTermHelpTextButton>\n </Popover>\n </DescriptionListTermHelpText>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
52
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
52
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-317" data-pf-content="true" class="pf-v6-c-content--h3">Default 2 col</h3>
|
|
53
53
|
|
|
54
54
|
<astro-island uid="Z2202Kg" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (\n <DescriptionList\n columnModifier={{\n default: '2Col'\n }}\n >\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
55
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
55
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-318" data-pf-content="true" class="pf-v6-c-content--h3">Default 3 col on lg</h3>
|
|
56
56
|
|
|
57
57
|
<astro-island uid="2pamTg" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (\n <DescriptionList columnModifier={{ lg: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-319" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
|
|
59
59
|
|
|
60
60
|
<astro-island uid="1pyplW" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontal: React.FunctionComponent = () => (\n <DescriptionList isHorizontal>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
61
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
61
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-320" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal using custom term width modifier</h3>
|
|
62
62
|
|
|
63
63
|
<astro-island uid="Z2gXHdP" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent = () => (\n <DescriptionList\n isHorizontal\n horizontalTermWidthModifier={{\n default: '12ch',\n sm: '15ch',\n md: '20ch',\n lg: '28ch',\n xl: '30ch',\n '2xl': '35ch'\n }}\n >\n <DescriptionListGroup>\n <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
64
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-321" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal 2 col</h3>
|
|
65
65
|
|
|
66
66
|
<astro-island uid="ZpvfQI" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (\n <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
67
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
67
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-322" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal 3 col on lg</h3>
|
|
68
68
|
|
|
69
69
|
<astro-island uid="rxz44" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (\n <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
70
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
70
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-323" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
|
|
71
71
|
|
|
72
72
|
<astro-island uid="Z1MKOE5" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListCompact: React.FunctionComponent = () => (\n <DescriptionList isCompact>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
73
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-324" data-pf-content="true" class="pf-v6-c-content--h3">Compact horizontal</h3>
|
|
74
74
|
|
|
75
75
|
<astro-island uid="19I684" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListCompactHorizontal: React.FunctionComponent = () => (\n <DescriptionList isCompact isHorizontal>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
76
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
76
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-325" data-pf-content="true" class="pf-v6-c-content--h3">Fluid horizontal</h3>
|
|
77
77
|
|
|
78
78
|
<astro-island uid="6Mv9O" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListFluidHorizontal: React.FunctionComponent = () => (\n <DescriptionList isHorizontal isFluid>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
79
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
79
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-326" data-pf-content="true" class="pf-v6-c-content--h3">Column fill</h3>
|
|
80
80
|
|
|
81
81
|
<astro-island uid="Z21YR3W" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListColumnFill: React.FunctionComponent = () => (\n <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>\n This is a long description that should wrap to multiple lines in a multi-column layout.\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
82
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
82
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-327" data-pf-content="true" class="pf-v6-c-content--h3">Large display size</h3>
|
|
83
83
|
|
|
84
84
|
<astro-island uid="Z1cFjA0" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription,\n Checkbox\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () => {\n const [isChecked, setIsChecked] = useState<boolean>(false);\n const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');\n\n const toggleDisplaySize = (checked: boolean) => {\n setDisplaySize(checked ? '2xl' : 'lg');\n setIsChecked(checked);\n };\n\n return (\n <>\n <div style={{ marginBottom: '12px' }}>\n <Checkbox\n label=\"displaySize 2xl\"\n isChecked={isChecked}\n onChange={(_event, checked) => toggleDisplaySize(checked)}\n aria-label=\"set display size 2xl\"\n id=\"toggle-display-size\"\n name=\"toggle-display-size\"\n />\n </div>\n <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n </>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
85
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
86
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
85
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-328" data-pf-content="true" class="pf-v6-c-content--h2">Responsive column definitions</h2>
|
|
86
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-329" data-pf-content="true" class="pf-v6-c-content--h3">Default responsive columns</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="2f9eCg" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (\n <DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
89
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-330" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal responsive columns</h3>
|
|
90
90
|
|
|
91
91
|
<astro-island uid="Z1bnRaR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (\n <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
92
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
92
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-331" data-pf-content="true" class="pf-v6-c-content--h3">Responsive horizontal, vertical group layout</h3>
|
|
93
93
|
|
|
94
94
|
<astro-island uid="1A3dvp" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = () => (\n <DescriptionList\n isHorizontal\n orientation={{\n md: 'vertical',\n lg: 'horizontal',\n xl: 'vertical',\n '2xl': 'horizontal'\n }}\n >\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
95
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
96
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
95
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-332" data-pf-content="true" class="pf-v6-c-content--h2">Auto-column-width</h2>
|
|
96
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-333" data-pf-content="true" class="pf-v6-c-content--h3">Default auto column width</h3>
|
|
97
97
|
|
|
98
98
|
<astro-island uid="ZlkdSQ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (\n <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
99
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
99
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-334" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal auto column width</h3>
|
|
100
100
|
|
|
101
101
|
<astro-island uid="Z2iNrie" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => (\n <DescriptionList isHorizontal isAutoColumnWidths columnModifier={{ lg: '2Col' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
102
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
103
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
102
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-335" data-pf-content="true" class="pf-v6-c-content--h2">Inline grid</h2>
|
|
103
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-336" data-pf-content="true" class="pf-v6-c-content--h3">Default inline grid</h3>
|
|
104
104
|
|
|
105
105
|
<astro-island uid="ZlwkK0" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (\n <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
106
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
108
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
106
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-337" data-pf-content="true" class="pf-v6-c-content--h2">Card variants</h2>
|
|
107
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-349" data-pf-content="true" class="pf-v6-c-content--p">A <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-338" data-pf-content="true" class="pf-v6-c-content--a">card component</a> can be used in place of a description list group.</p>
|
|
108
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-339" data-pf-content="true" class="pf-v6-c-content--h3">Description list with card</h3>
|
|
109
109
|
|
|
110
110
|
<astro-island uid="ZHDkqJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListDescription,\n Card,\n Checkbox\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListWithCard: React.FunctionComponent = () => {\n const [isChecked, setIsChecked] = useState<boolean>(false);\n const [isSelectable, setSelectable] = useState<boolean>(false);\n\n const toggleSelectable = (checked: boolean) => {\n setSelectable(checked ? true : false);\n setIsChecked(checked);\n };\n return (\n <>\n <div style={{ marginBottom: '12px' }}>\n <Checkbox\n label=\"isSelectable\"\n isChecked={isChecked}\n onChange={(_event, checked) => toggleSelectable(checked)}\n aria-label=\"set isSelectable\"\n id=\"toggle-isSelectable\"\n name=\"toggle-isSelectable\"\n />\n </div>\n <DescriptionList columnModifier={{ lg: '2Col' }}>\n <Card component=\"div\" isSelectable={isSelectable}>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </Card>\n <Card component=\"div\" isSelectable={isSelectable}>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\" isSelectable={isSelectable}>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </Card>\n <Card component=\"div\" isSelectable={isSelectable}>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\" isSelectable={isSelectable}>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </Card>\n </DescriptionList>\n </>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
111
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
111
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-340" data-pf-content="true" class="pf-v6-c-content--h3">Description list with large display size and card</h3>
|
|
112
112
|
|
|
113
113
|
<astro-island uid="Z2we6Hl" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListDescription,\n Card,\n Checkbox\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent = () => {\n const [isChecked, setIsChecked] = useState<boolean>(false);\n const [displaySize, setDisplaySize] = useState<'lg' | '2xl'>('lg');\n\n const toggleDisplaySize = (checked: boolean) => {\n setDisplaySize(checked ? '2xl' : 'lg');\n setIsChecked(checked);\n };\n\n return (\n <>\n <div style={{ marginBottom: '12px' }}>\n <Checkbox\n label=\"displaySize 2xl\"\n isChecked={isChecked}\n onChange={(_event, checked) => toggleDisplaySize(checked)}\n aria-label=\"set display size 2xl\"\n id=\"toggle-display-size-with-card\"\n name=\"toggle-display-size-with-card\"\n />\n </div>\n <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>\n <Card component=\"div\">\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </Card>\n </DescriptionList>\n </>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
114
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
114
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-341" data-pf-content="true" class="pf-v6-c-content--h3">Display size with card, three column on large breakpoint</h3>
|
|
115
115
|
|
|
116
116
|
<astro-island uid="JGij9" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (\n <DescriptionList displaySize=\"lg\" columnModifier={{ lg: '3Col' }}>\n <Card component=\"div\">\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </Card>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
117
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
117
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-342" data-pf-content="true" class="pf-v6-c-content--h3">Display size with card, horizontal, modified term width</h3>
|
|
118
118
|
|
|
119
119
|
<astro-island uid="1ujYQz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescription, Card } from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (\n <DescriptionList displaySize=\"lg\" isHorizontal columnModifier={{ lg: '2Col' }} termWidth=\"10ch\">\n <Card component=\"div\">\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </Card>\n <Card component=\"div\">\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </Card>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
120
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
121
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
120
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-343" data-pf-content="true" class="pf-v6-c-content--h2">Auto fit</h2>
|
|
121
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-344" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit basic</h3>
|
|
122
122
|
|
|
123
123
|
<astro-island uid="Z13s6ia" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListAutoFitBasic: React.FunctionComponent = () => (\n <DescriptionList isAutoFit>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
124
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
124
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-345" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit, min width modified grid template columns</h3>
|
|
125
125
|
|
|
126
126
|
<astro-island uid="2uwr2t" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (\n <DescriptionList isAutoFit autoFitMinModifier={{ default: '200px' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
127
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
127
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-346" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit, min width modified, responsive grid template columns</h3>
|
|
128
128
|
|
|
129
129
|
<astro-island uid="Z1XpNRr" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\n\nexport const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (\n <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}>\n <DescriptionListGroup>\n <DescriptionListTerm>Name</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
130
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
131
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
130
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-347" data-pf-content="true" class="pf-v6-c-content--h2">With icons</h2>
|
|
131
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-348" data-pf-content="true" class="pf-v6-c-content--h3">Icons on terms</h3>
|
|
132
132
|
|
|
133
|
-
<astro-island uid="ZqVk70" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';\nimport KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\nimport FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';\n\nexport const DescriptionListIconsOnTerms: React.FunctionComponent = () => (\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<BookIcon />}>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1oHTeD" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"DescriptionList"],[0,"DescriptionListDescription"],[0,"DescriptionListGroup"],[0,"DescriptionListTerm"],[0,"DescriptionListTermHelpText"],[0,"DescriptionListTermHelpTextButton"],[0,"Popover"],[0,"Card"]]],"url":[7,"http://localhost:4321/components/description-list/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
133
|
+
<astro-island uid="ZqVk70" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import {\n Button,\n DescriptionList,\n DescriptionListTerm,\n DescriptionListGroup,\n DescriptionListDescription\n} from '@patternfly/react-core';\nimport PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport BookIcon from '@patternfly/react-icons/dist/esm/icons/book-icon';\nimport KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';\nimport GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';\nimport FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';\n\nexport const DescriptionListIconsOnTerms: React.FunctionComponent = () => (\n <DescriptionList>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>\n <DescriptionListDescription>Example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<BookIcon />}>Namespace</DescriptionListTerm>\n <DescriptionListDescription>\n <a href=\"#\">mary-test</a>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<KeyIcon />}>Labels</DescriptionListTerm>\n <DescriptionListDescription>example</DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<GlobeIcon />}>Pod selector</DescriptionListTerm>\n <DescriptionListDescription>\n <Button variant=\"link\" isInline icon={<PlusCircleIcon />}>\n app=MyApp\n </Button>\n </DescriptionListDescription>\n </DescriptionListGroup>\n <DescriptionListGroup>\n <DescriptionListTerm icon={<FlagIcon />}>Annotation</DescriptionListTerm>\n <DescriptionListDescription>2 Annotations</DescriptionListDescription>\n </DescriptionListGroup>\n </DescriptionList>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z1oHTeD" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"DescriptionList"],[0,"DescriptionListDescription"],[0,"DescriptionListGroup"],[0,"DescriptionListTerm"],[0,"DescriptionListTermHelpText"],[0,"DescriptionListTermHelpTextButton"],[0,"Popover"],[0,"Card"]]],"url":[7,"http://localhost:4321/components/description-list/react/"]}" ssr client="only" opts="{"name":"PropsTables","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-313" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
134
134
|
CSS variables
|
|
135
135
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ceh1k" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-description-list"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|