@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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 +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- 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/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- 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/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- 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/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>#ws-react-c-label-filled-labels .pf-v6-c-label,#ws-react-c-label-outlined-labels .pf-v6-c-label,#ws-react-c-label-compact-labels .pf-v6-c-label{margin-inline-end:var(--pf-t--global--spacer--sm);margin-block-end:var(--pf-t--global--spacer--sm)}
|
|
6
6
|
</style><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
8
8
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
@@ -43,54 +43,54 @@
|
|
|
43
43
|
animation-fill-mode: both;
|
|
44
44
|
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"],
|
|
45
45
|
[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"],
|
|
46
|
-
[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="Z10bgMM" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.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-1123"><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="Z29HuQl" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.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-375"><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-1124"><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-1125"><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-375"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.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,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"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,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"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,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"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,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"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,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"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]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"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 pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/label/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/label/html"> HTML </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-7221" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
46
|
+
[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="1ud4c1" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.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-1078"><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="Z19Vu1U" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.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-360"><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-1079"><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-1080"><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-360"><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="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.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,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"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,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"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,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"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,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"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,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"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]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"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 pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/label/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/label/html"> HTML </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-6918" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6919" data-pf-content="true" class="pf-v6-c-content--h3">Filled labels</h3>
|
|
48
48
|
|
|
49
49
|
<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="2s5pee" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Fragment } from 'react';\nimport { Label } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const LabelFilled: React.FunctionComponent = () => {\n const logColor = (color: string) => {\n // eslint-disable-next-line no-console\n console.log(color, 'label clicked');\n };\n return (\n <Fragment>\n <strong>Non-status:</strong>\n <br />\n <br />\n <Label>Grey</Label>\n <Label icon={<CubeIcon />}>Grey icon</Label>\n <Label onClose={() => Function.prototype}>Grey removable</Label>\n <Label icon={<CubeIcon />} onClose={() => Function.prototype}>\n Grey icon removable\n </Label>\n <Label href=\"#filled\">Grey link</Label>\n <Label href=\"#filled\" onClose={() => Function.prototype}>\n Grey link removable\n </Label>{' '}\n <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}\n <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n Grey clickable removable\n </Label>{' '}\n <Label icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Grey label with icon that overflows\n </Label>{' '}\n <Label isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Grey link removable (disabled)\n </Label>{' '}\n <Label isDisabled icon={<CubeIcon />} onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n Grey clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"blue\">Blue</Label>\n <Label color=\"blue\" icon={<CubeIcon />}>\n Blue icon\n </Label>\n <Label color=\"blue\" onClose={() => Function.prototype}>\n Blue removable\n </Label>\n <Label color=\"blue\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Blue icon removable\n </Label>\n <Label color=\"blue\" href=\"#filled\">\n Blue link\n </Label>\n <Label color=\"blue\" href=\"#filled\" onClose={() => Function.prototype}>\n Blue link removable\n </Label>{' '}\n <Label color=\"blue\" onClick={() => logColor('blue')}>\n Blue clickable\n </Label>\n <Label color=\"blue\" onClick={() => logColor('blue')} onClose={() => Function.prototype}>\n Blue clickable removable\n </Label>{' '}\n <Label color=\"blue\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Blue label with icon that overflows\n </Label>{' '}\n <Label color=\"blue\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Blue link removable (disabled)\n </Label>{' '}\n <Label\n color=\"blue\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('blue')}\n onClose={() => Function.prototype}\n >\n Blue clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"green\">Green</Label>\n <Label color=\"green\" icon={<CubeIcon />}>\n Green icon\n </Label>\n <Label color=\"green\" onClose={() => Function.prototype}>\n Green removable\n </Label>\n <Label color=\"green\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Green icon removable\n </Label>\n <Label color=\"green\" href=\"#filled\">\n Green link\n </Label>\n <Label color=\"green\" href=\"#filled\" onClose={() => Function.prototype}>\n Green link removable\n </Label>{' '}\n <Label color=\"green\" onClick={() => logColor('green')}>\n Green clickable\n </Label>\n <Label color=\"green\" onClick={() => logColor('green')} onClose={() => Function.prototype}>\n Green clickable removable\n </Label>{' '}\n <Label color=\"green\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Green label with icon that overflows\n </Label>{' '}\n <Label color=\"green\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Green link removable (disabled)\n </Label>{' '}\n <Label\n color=\"green\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('green')}\n onClose={() => Function.prototype}\n >\n Green clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"orange\">Orange</Label>\n <Label color=\"orange\" icon={<CubeIcon />}>\n Orange icon\n </Label>\n <Label color=\"orange\" onClose={() => Function.prototype}>\n Orange removable\n </Label>\n <Label color=\"orange\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Orange icon removable\n </Label>\n <Label color=\"orange\" href=\"#filled\">\n Orange link\n </Label>\n <Label color=\"orange\" href=\"#filled\" onClose={() => Function.prototype}>\n Orange link removable\n </Label>{' '}\n <Label color=\"orange\" onClick={() => logColor('orange')}>\n Orange clickable\n </Label>\n <Label color=\"orange\" onClick={() => logColor('orange')} onClose={() => Function.prototype}>\n Orange clickable removable\n </Label>{' '}\n <Label color=\"orange\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Orange label with icon that overflows\n </Label>{' '}\n <Label color=\"orange\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Orange link removable (disabled)\n </Label>{' '}\n <Label\n color=\"orange\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('orange')}\n onClose={() => Function.prototype}\n >\n Orange clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"red\">Red</Label>\n <Label color=\"red\" icon={<CubeIcon />}>\n Red icon\n </Label>\n <Label color=\"red\" onClose={() => Function.prototype}>\n Red removable\n </Label>\n <Label color=\"red\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Red icon removable\n </Label>\n <Label color=\"red\" href=\"#filled\">\n Red link\n </Label>\n <Label color=\"red\" href=\"#filled\" onClose={() => Function.prototype}>\n Red link removable\n </Label>{' '}\n <Label color=\"red\" onClick={() => logColor('red')}>\n Red clickable\n </Label>\n <Label color=\"red\" onClick={() => logColor('red')} onClose={() => Function.prototype}>\n Red clickable removable\n </Label>{' '}\n <Label color=\"red\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Red label with icon that overflows\n </Label>{' '}\n <Label color=\"red\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Red link removable (disabled)\n </Label>{' '}\n <Label\n color=\"red\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('red')}\n onClose={() => Function.prototype}\n >\n Red clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"orangered\">Orange red</Label>\n <Label color=\"orangered\" icon={<CubeIcon />}>\n Orange red icon\n </Label>\n <Label color=\"orangered\" onClose={() => Function.prototype}>\n Orange red removable\n </Label>\n <Label color=\"orangered\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Orange red icon removable\n </Label>\n <Label color=\"orangered\" href=\"#filled\">\n Orange red link\n </Label>\n <Label color=\"orangered\" href=\"#filled\" onClose={() => Function.prototype}>\n Orange red link removable\n </Label>\n <Label color=\"orangered\" onClick={() => logColor('orangered')}>\n Orange red clickable\n </Label>\n <Label color=\"orangered\" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>\n Orange red clickable removable\n </Label>\n <Label color=\"orangered\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Orange red label with icon that overflows\n </Label>\n <br />\n <br />\n <Label color=\"purple\">Purple</Label>\n <Label color=\"purple\" icon={<CubeIcon />}>\n Purple icon\n </Label>\n <Label color=\"purple\" onClose={() => Function.prototype}>\n Purple removable\n </Label>\n <Label color=\"purple\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Purple icon removable\n </Label>\n <Label color=\"purple\" href=\"#filled\">\n Purple link\n </Label>\n <Label color=\"purple\" href=\"#filled\" onClose={() => Function.prototype}>\n Purple link removable\n </Label>{' '}\n <Label color=\"purple\" onClick={() => logColor('purple')}>\n Purple clickable\n </Label>\n <Label color=\"purple\" onClick={() => logColor('purple')} onClose={() => Function.prototype}>\n Purple clickable removable\n </Label>{' '}\n <Label color=\"purple\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Purple label with icon that overflows\n </Label>{' '}\n <Label color=\"purple\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Purple link removable (disabled)\n </Label>{' '}\n <Label\n color=\"purple\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('purple')}\n onClose={() => Function.prototype}\n >\n Purple clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"teal\">Teal</Label>\n <Label color=\"teal\" icon={<CubeIcon />}>\n Teal icon\n </Label>\n <Label color=\"teal\" onClose={() => Function.prototype}>\n Teal removable\n </Label>\n <Label color=\"teal\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Teal icon removable\n </Label>\n <Label color=\"teal\" href=\"#filled\">\n Teal link\n </Label>\n <Label color=\"teal\" href=\"#filled\" onClose={() => Function.prototype}>\n Teal link removable\n </Label>{' '}\n <Label color=\"teal\" onClick={() => logColor('teal')}>\n Teal clickable\n </Label>\n <Label color=\"teal\" onClick={() => logColor('teal')} onClose={() => Function.prototype}>\n Teal clickable removable\n </Label>{' '}\n <Label color=\"teal\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Teal label with icon that overflows\n </Label>{' '}\n <Label color=\"teal\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Teal link removable (disabled)\n </Label>{' '}\n <Label\n color=\"teal\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('teal')}\n onClose={() => Function.prototype}\n >\n Teal clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label color=\"yellow\">Yellow</Label>\n <Label color=\"yellow\" icon={<CubeIcon />}>\n Yellow icon\n </Label>\n <Label color=\"yellow\" onClose={() => Function.prototype}>\n Yellow removable\n </Label>\n <Label color=\"yellow\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Yellow icon removable\n </Label>\n <Label color=\"yellow\" href=\"#filled\">\n Yellow link\n </Label>\n <Label color=\"yellow\" href=\"#filled\" onClose={() => Function.prototype}>\n Yellow link removable\n </Label>{' '}\n <Label color=\"yellow\" onClick={() => logColor('yellow')}>\n Yellow clickable\n </Label>\n <Label color=\"yellow\" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>\n Yellow clickable removable\n </Label>{' '}\n <Label color=\"yellow\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Yellow label with icon that overflows\n </Label>{' '}\n <Label color=\"yellow\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Yellow link removable (disabled)\n </Label>{' '}\n <Label\n color=\"yellow\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('yellow')}\n onClose={() => Function.prototype}\n >\n Yellow clickable removable (disabled)\n </Label>\n <br />\n <br />\n <div style={{ width: '250px' }}>\n <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>\n </div>\n <br />\n <strong>Status:</strong>\n <br />\n <br />\n <Label status=\"success\">Success</Label>\n <Label status=\"success\" onClose={() => Function.prototype}>\n Success removable\n </Label>\n <Label status=\"success\" href=\"#filled\">\n Success link\n </Label>\n <Label status=\"success\" href=\"#filled\" onClose={() => Function.prototype}>\n Success link removable\n </Label>\n <Label status=\"success\" onClick={() => logColor('success')}>\n Success clickable\n </Label>\n <Label status=\"success\" onClick={() => logColor('success')} onClose={() => Function.prototype}>\n Success clickable removable\n </Label>\n <Label status=\"success\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Success label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"warning\">Warning</Label>\n <Label status=\"warning\" onClose={() => Function.prototype}>\n Warning removable\n </Label>\n <Label status=\"warning\" href=\"#filled\">\n Warning link\n </Label>\n <Label status=\"warning\" href=\"#filled\" onClose={() => Function.prototype}>\n Warning link removable\n </Label>\n <Label status=\"warning\" onClick={() => logColor('warning')}>\n Warning clickable\n </Label>\n <Label status=\"warning\" onClick={() => logColor('warning')} onClose={() => Function.prototype}>\n Warning clickable removable\n </Label>\n <Label status=\"warning\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Warning label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"danger\">Danger</Label>\n <Label status=\"danger\" onClose={() => Function.prototype}>\n Danger removable\n </Label>\n <Label status=\"danger\" href=\"#filled\">\n Danger link\n </Label>\n <Label status=\"danger\" href=\"#filled\" onClose={() => Function.prototype}>\n Danger link removable\n </Label>\n <Label status=\"danger\" onClick={() => logColor('danger')}>\n Danger clickable\n </Label>\n <Label status=\"danger\" onClick={() => logColor('danger')} onClose={() => Function.prototype}>\n Danger clickable removable\n </Label>\n <Label status=\"danger\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Danger label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"info\">Info</Label>\n <Label status=\"info\" onClose={() => Function.prototype}>\n Info removable\n </Label>\n <Label status=\"info\" href=\"#filled\">\n Info link\n </Label>\n <Label status=\"info\" href=\"#filled\" onClose={() => Function.prototype}>\n Info link removable\n </Label>\n <Label status=\"info\" onClick={() => logColor('info')}>\n Info clickable\n </Label>\n <Label status=\"info\" onClick={() => logColor('info')} onClose={() => Function.prototype}>\n Info clickable removable\n </Label>\n <Label status=\"info\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Info label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"custom\">Custom</Label>\n <Label status=\"custom\" onClose={() => Function.prototype}>\n Custom removable\n </Label>\n <Label status=\"custom\" href=\"#filled\">\n Custom link\n </Label>\n <Label status=\"custom\" href=\"#filled\" onClose={() => Function.prototype}>\n Custom link removable\n </Label>\n <Label status=\"custom\" onClick={() => logColor('custom')}>\n Custom clickable\n </Label>\n <Label status=\"custom\" onClick={() => logColor('custom')} onClose={() => Function.prototype}>\n Custom clickable removable\n </Label>\n <Label status=\"custom\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Custom label with text that overflows\n </Label>\n </Fragment>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6920" data-pf-content="true" class="pf-v6-c-content--h3">Outlined labels</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="Z24VT6K" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Fragment } from 'react';\nimport { Label } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\n\nexport const LabelOutline: React.FunctionComponent = () => {\n const logColor = (color: string) => {\n // eslint-disable-next-line no-console\n console.log(color, 'label clicked');\n };\n return (\n <Fragment>\n <strong>Non-status:</strong>\n <br />\n <br />\n <Label variant=\"outline\">Grey</Label>\n <Label variant=\"outline\" icon={<CubeIcon />}>\n Grey icon\n </Label>\n <Label variant=\"outline\" onClose={() => Function.prototype}>\n Grey removable\n </Label>\n <Label variant=\"outline\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Grey icon removable\n </Label>\n <Label variant=\"outline\" href=\"#outline\">\n Grey link\n </Label>\n <Label variant=\"outline\" href=\"#outline\" onClose={() => Function.prototype}>\n Grey link removable\n </Label>{' '}\n <Label variant=\"outline\" onClick={() => logColor('grey')}>\n Grey clickable\n </Label>\n <Label variant=\"outline\" onClick={() => logColor('grey')} onClose={() => Function.prototype}>\n Grey clickable removable\n </Label>\n <Label variant=\"outline\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Grey label with icon that overflows\n </Label>{' '}\n <Label variant=\"outline\" isDisabled icon={<CubeIcon />} href=\"#filled\" onClose={() => Function.prototype}>\n Grey link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('grey')}\n onClose={() => Function.prototype}\n >\n Grey clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"blue\">\n Blue\n </Label>\n <Label variant=\"outline\" color=\"blue\" icon={<CubeIcon />}>\n Blue icon\n </Label>\n <Label variant=\"outline\" color=\"blue\" onClose={() => Function.prototype}>\n Blue removable\n </Label>\n <Label variant=\"outline\" color=\"blue\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Blue icon removable\n </Label>\n <Label variant=\"outline\" color=\"blue\" href=\"#outline\">\n Blue link\n </Label>\n <Label variant=\"outline\" color=\"blue\" href=\"#outline\" onClose={() => Function.prototype}>\n Blue link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"blue\" onClick={() => logColor('blue')}>\n Blue clickable\n </Label>\n <Label variant=\"outline\" color=\"blue\" onClick={() => logColor('blue')} onClose={() => Function.prototype}>\n Blue clickable removable\n </Label>\n <Label variant=\"outline\" color=\"blue\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Blue label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"blue\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Blue link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"blue\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('blue')}\n onClose={() => Function.prototype}\n >\n Blue clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"green\">\n Green\n </Label>\n <Label variant=\"outline\" color=\"green\" icon={<CubeIcon />}>\n Green icon\n </Label>\n <Label variant=\"outline\" color=\"green\" onClose={() => Function.prototype}>\n Green removable\n </Label>\n <Label variant=\"outline\" color=\"green\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Green icon removable\n </Label>\n <Label variant=\"outline\" color=\"green\" href=\"#outline\">\n Green link\n </Label>\n <Label variant=\"outline\" color=\"green\" href=\"#outline\" onClose={() => Function.prototype}>\n Green link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"green\" onClick={() => logColor('green')}>\n Green clickable\n </Label>\n <Label variant=\"outline\" color=\"green\" onClick={() => logColor('green')} onClose={() => Function.prototype}>\n Green clickable removable\n </Label>\n <Label variant=\"outline\" color=\"green\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Green label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"green\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Green link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"green\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('green')}\n onClose={() => Function.prototype}\n >\n Green clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"orange\">\n Orange\n </Label>\n <Label variant=\"outline\" color=\"orange\" icon={<CubeIcon />}>\n Orange icon\n </Label>\n <Label variant=\"outline\" color=\"orange\" onClose={() => Function.prototype}>\n Orange removable\n </Label>\n <Label variant=\"outline\" color=\"orange\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Orange icon removable\n </Label>\n <Label variant=\"outline\" color=\"orange\" href=\"#outline\">\n Orange link\n </Label>\n <Label variant=\"outline\" color=\"orange\" href=\"#outline\" onClose={() => Function.prototype}>\n Orange link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"orange\" onClick={() => logColor('orange')}>\n Orange clickable\n </Label>\n <Label variant=\"outline\" color=\"orange\" onClick={() => logColor('orange')} onClose={() => Function.prototype}>\n Orange clickable removable\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"orange\"\n icon={<CubeIcon />}\n onClose={() => Function.prototype}\n textMaxWidth=\"16ch\"\n >\n Orange label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"orange\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Orange link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"orange\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('orange')}\n onClose={() => Function.prototype}\n >\n Orange clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"red\">\n Red\n </Label>\n <Label variant=\"outline\" color=\"red\" icon={<CubeIcon />}>\n Red icon\n </Label>\n <Label variant=\"outline\" color=\"red\" onClose={() => Function.prototype}>\n Red removable\n </Label>\n <Label variant=\"outline\" color=\"red\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Red icon removable\n </Label>\n <Label variant=\"outline\" color=\"red\" href=\"#outline\">\n Red link\n </Label>\n <Label variant=\"outline\" color=\"red\" href=\"#outline\" onClose={() => Function.prototype}>\n Red link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"red\" onClick={() => logColor('red')}>\n Red clickable\n </Label>\n <Label variant=\"outline\" color=\"red\" onClick={() => logColor('red')} onClose={() => Function.prototype}>\n Red clickable removable\n </Label>\n <Label variant=\"outline\" color=\"red\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Red label with icon that overflows\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"orangered\">\n Orange red\n </Label>\n <Label variant=\"outline\" color=\"orangered\" icon={<CubeIcon />}>\n Orange red icon\n </Label>\n <Label variant=\"outline\" color=\"orangered\" onClose={() => Function.prototype}>\n Orange red removable\n </Label>\n <Label variant=\"outline\" color=\"orangered\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Orange red icon removable\n </Label>\n <Label variant=\"outline\" color=\"orangered\" href=\"#outline\">\n Orange red link\n </Label>\n <Label variant=\"outline\" color=\"orangered\" href=\"#outline\" onClose={() => Function.prototype}>\n Orange red link removable\n </Label>\n <Label variant=\"outline\" color=\"orangered\" onClick={() => logColor('orangered')}>\n Orange red clickable\n </Label>\n <Label\n variant=\"outline\"\n color=\"orangered\"\n onClick={() => logColor('orangered')}\n onClose={() => Function.prototype}\n >\n Orange red clickable removable\n </Label>\n <Label\n variant=\"outline\"\n color=\"orangered\"\n icon={<CubeIcon />}\n onClose={() => Function.prototype}\n textMaxWidth=\"16ch\"\n >\n Orange red label with icon that overflows\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"purple\">\n Purple\n </Label>\n <Label variant=\"outline\" color=\"purple\" icon={<CubeIcon />}>\n Purple icon\n </Label>\n <Label variant=\"outline\" color=\"purple\" onClose={() => Function.prototype}>\n Purple removable\n </Label>\n <Label variant=\"outline\" color=\"purple\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Purple icon removable\n </Label>\n <Label variant=\"outline\" color=\"purple\" href=\"#outline\">\n Purple link\n </Label>\n <Label variant=\"outline\" color=\"purple\" href=\"#outline\" onClose={() => Function.prototype}>\n Purple link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"purple\" onClick={() => logColor('purple')}>\n Purple clickable\n </Label>\n <Label variant=\"outline\" color=\"purple\" onClick={() => logColor('purple')} onClose={() => Function.prototype}>\n Purple clickable removable\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"purple\"\n icon={<CubeIcon />}\n onClose={() => Function.prototype}\n textMaxWidth=\"16ch\"\n >\n Purple label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"purple\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Purple link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"purple\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('purple')}\n onClose={() => Function.prototype}\n >\n Purple clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"teal\">\n Teal\n </Label>\n <Label variant=\"outline\" color=\"teal\" icon={<CubeIcon />}>\n Teal icon\n </Label>\n <Label variant=\"outline\" color=\"teal\" onClose={() => Function.prototype}>\n Teal removable\n </Label>\n <Label variant=\"outline\" color=\"teal\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Teal icon removable\n </Label>\n <Label variant=\"outline\" color=\"teal\" href=\"#outline\">\n Teal link\n </Label>\n <Label variant=\"outline\" color=\"teal\" href=\"#outline\" onClose={() => Function.prototype}>\n Teal link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"teal\" onClick={() => logColor('teal')}>\n Teal clickable\n </Label>\n <Label variant=\"outline\" color=\"teal\" onClick={() => logColor('teal')} onClose={() => Function.prototype}>\n Teal clickable removable\n </Label>\n <Label variant=\"outline\" color=\"teal\" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Teal label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"teal\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Teal link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"teal\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('teal')}\n onClose={() => Function.prototype}\n >\n Teal clickable removable (disabled)\n </Label>\n <br />\n <br />\n <Label variant=\"outline\" color=\"yellow\">\n Yellow\n </Label>\n <Label variant=\"outline\" color=\"yellow\" icon={<CubeIcon />}>\n Yellow icon\n </Label>\n <Label variant=\"outline\" color=\"yellow\" onClose={() => Function.prototype}>\n Yellow removable\n </Label>\n <Label variant=\"outline\" color=\"yellow\" icon={<CubeIcon />} onClose={() => Function.prototype}>\n Yellow icon removable\n </Label>\n <Label variant=\"outline\" color=\"yellow\" href=\"#outline\">\n Yellow link\n </Label>\n <Label variant=\"outline\" color=\"yellow\" href=\"#outline\" onClose={() => Function.prototype}>\n Yellow link removable\n </Label>{' '}\n <Label variant=\"outline\" color=\"yellow\" onClick={() => logColor('yellow')}>\n Yellow clickable\n </Label>\n <Label variant=\"outline\" color=\"yellow\" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>\n Yellow clickable removable\n </Label>\n <Label\n variant=\"outline\"\n color=\"yellow\"\n icon={<CubeIcon />}\n onClose={() => Function.prototype}\n textMaxWidth=\"16ch\"\n >\n Yellow label with icon that overflows\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"yellow\"\n isDisabled\n icon={<CubeIcon />}\n href=\"#filled\"\n onClose={() => Function.prototype}\n >\n Yellow link removable (disabled)\n </Label>{' '}\n <Label\n variant=\"outline\"\n color=\"yellow\"\n isDisabled\n icon={<CubeIcon />}\n onClick={() => logColor('yellow')}\n onClose={() => Function.prototype}\n >\n Yellow clickable removable (disabled)\n </Label>\n <br />\n <br />\n <strong>Status:</strong>\n <br />\n <br />\n <Label status=\"success\" variant=\"outline\">\n Success\n </Label>\n <Label status=\"success\" variant=\"outline\" onClose={() => Function.prototype}>\n Success removable\n </Label>\n <Label status=\"success\" variant=\"outline\" href=\"#filled\">\n Success link\n </Label>\n <Label status=\"success\" variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n Success link removable\n </Label>\n <Label status=\"success\" variant=\"outline\" onClick={() => logColor('success')}>\n Success clickable\n </Label>\n <Label status=\"success\" variant=\"outline\" onClick={() => logColor('success')} onClose={() => Function.prototype}>\n Success clickable removable\n </Label>\n <Label status=\"success\" variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Success label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"warning\" variant=\"outline\">\n Warning\n </Label>\n <Label status=\"warning\" variant=\"outline\" onClose={() => Function.prototype}>\n Warning removable\n </Label>\n <Label status=\"warning\" variant=\"outline\" href=\"#filled\">\n Warning link\n </Label>\n <Label status=\"warning\" variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n Warning link removable\n </Label>\n <Label status=\"warning\" variant=\"outline\" onClick={() => logColor('warning')}>\n Warning clickable\n </Label>\n <Label status=\"warning\" variant=\"outline\" onClick={() => logColor('warning')} onClose={() => Function.prototype}>\n Warning clickable removable\n </Label>\n <Label status=\"warning\" variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Warning label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"danger\" variant=\"outline\">\n Danger\n </Label>\n <Label status=\"danger\" variant=\"outline\" onClose={() => Function.prototype}>\n Danger removable\n </Label>\n <Label status=\"danger\" variant=\"outline\" href=\"#filled\">\n Danger link\n </Label>\n <Label status=\"danger\" variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n Danger link removable\n </Label>\n <Label status=\"danger\" variant=\"outline\" onClick={() => logColor('danger')}>\n Danger clickable\n </Label>\n <Label status=\"danger\" variant=\"outline\" onClick={() => logColor('danger')} onClose={() => Function.prototype}>\n Danger clickable removable\n </Label>\n <Label status=\"danger\" variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Danger label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"info\" variant=\"outline\">\n Info\n </Label>\n <Label status=\"info\" variant=\"outline\" onClose={() => Function.prototype}>\n Info removable\n </Label>\n <Label status=\"info\" variant=\"outline\" href=\"#filled\">\n Info link\n </Label>\n <Label status=\"info\" variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n Info link removable\n </Label>\n <Label status=\"info\" variant=\"outline\" onClick={() => logColor('info')}>\n Info clickable\n </Label>\n <Label status=\"info\" variant=\"outline\" onClick={() => logColor('info')} onClose={() => Function.prototype}>\n Info clickable removable\n </Label>\n <Label status=\"info\" variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Info label with text that overflows\n </Label>\n <br />\n <br />\n <Label status=\"custom\" variant=\"outline\">\n Custom\n </Label>\n <Label status=\"custom\" variant=\"outline\" onClose={() => Function.prototype}>\n Custom removable\n </Label>\n <Label status=\"custom\" variant=\"outline\" href=\"#filled\">\n Custom link\n </Label>\n <Label status=\"custom\" variant=\"outline\" href=\"#filled\" onClose={() => Function.prototype}>\n Custom link removable\n </Label>\n <Label status=\"custom\" variant=\"outline\" onClick={() => logColor('custom')}>\n Custom clickable\n </Label>\n <Label status=\"custom\" variant=\"outline\" onClick={() => logColor('custom')} onClose={() => Function.prototype}>\n Custom clickable removable\n </Label>\n <Label status=\"custom\" variant=\"outline\" onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Custom label with text that overflows\n </Label>\n </Fragment>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6921" data-pf-content="true" class="pf-v6-c-content--h3">Compact labels</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="Z13cIsn" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Fragment } from 'react';\nimport { Label } from '@patternfly/react-core';\nimport CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelCompact: React.FunctionComponent = () => (\n <Fragment>\n <Label isCompact>Compact</Label>\n <Label isCompact icon={<CubeIcon />}>\n Compact icon\n </Label>\n <Label isCompact onClose={() => Function.prototype}>\n Compact removable\n </Label>\n <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>\n Compact icon removable\n </Label>\n <Label isCompact href=\"#compact\">\n Compact link\n </Label>\n <Label isCompact href=\"#compact\" onClose={() => Function.prototype}>\n Compact link removable\n </Label>{' '}\n <Label isCompact onClick={() => Function.prototype}>\n Compact clickable\n </Label>{' '}\n <Label isCompact onClick={() => Function.prototype} onClose={() => Function.prototype}>\n Compact clickable removable\n </Label>{' '}\n <Label isCompact icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth=\"16ch\">\n Compact label with icon that overflows\n </Label>{' '}\n <Label isDisabled isCompact href=\"#compact\" onClose={() => Function.prototype} icon={<CubeIcon />}>\n Compact link removable (disabled)\n </Label>{' '}\n <Label\n isDisabled\n isCompact\n onClick={() => Function.prototype}\n onClose={() => Function.prototype}\n icon={<CubeIcon />}\n >\n Compact clickable removable (disabled)\n </Label>\n <Label variant=\"outline\" color=\"blue\" isCompact icon={<CubeIcon />}>\n Compact icon\n </Label>\n <Label variant=\"outline\" color=\"blue\" isCompact onClose={() => Function.prototype}>\n Compact removable\n </Label>\n <Label variant=\"outline\" color=\"blue\" isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>\n Compact icon removable\n </Label>\n <Label variant=\"outline\" color=\"blue\" isCompact href=\"#compact\">\n Compact link\n </Label>\n <Label variant=\"outline\" color=\"blue\" isCompact href=\"#compact\" onClose={() => Function.prototype}>\n Compact link removable\n </Label>\n <Label\n variant=\"outline\"\n color=\"blue\"\n isCompact\n icon={<CubeIcon />}\n onClose={() => Function.prototype}\n textMaxWidth=\"16ch\"\n >\n Compact label with icon that overflows\n </Label>{' '}\n <Label isDisabled isCompact href=\"#compact\" onClose={() => Function.prototype} icon={<InfoCircleIcon />}>\n Compact link removable (disabled)\n </Label>{' '}\n <Label\n isDisabled\n isCompact\n onClick={() => Function.prototype}\n onClose={() => Function.prototype}\n icon={<InfoCircleIcon />}\n >\n Compact clickable removable (disabled)\n </Label>\n </Fragment>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
57
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6922" data-pf-content="true" class="pf-v6-c-content--h3">Label with custom render</h3>
|
|
57
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6938" data-pf-content="true" class="pf-v6-c-content--p">Labels may be passed a custom renderer to display customized content or for use with router components. When using a custom render, <code>isClickable</code> may also be passed to remove the underline text decoration of anchors or router links.</p>
|
|
58
58
|
|
|
59
59
|
<astro-island uid="1aJqER" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Label } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelCustomRender: React.FunctionComponent = () => (\n <Label\n color=\"blue\"\n icon={<InfoCircleIcon />}\n onClose={() => Function.prototype}\n render={({ className, content, componentRef }) => (\n <a className={className} ref={componentRef}>\n {content}\n </a>\n )}\n textMaxWidth=\"16ch\"\n isClickable\n >\n Blue label router link with icon that overflows\n </Label>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
60
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
61
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
62
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
60
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6923" data-pf-content="true" class="pf-v6-c-content--h3">Editable labels</h3>
|
|
61
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6924" data-pf-content="true" class="pf-v6-c-content--p">Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.</p>
|
|
62
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6939" data-pf-content="true" class="pf-v6-c-content--p">You can also customize any Label’s close button aria-label as this example shows with <code>closeBtnAriaLabel</code>.</p>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="Z1IL6P2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Fragment, useState } from 'react';\nimport { Label } from '@patternfly/react-core';\n\nexport const LabelEditable: React.FunctionComponent = () => {\n const [labelText, setLabelText] = useState('Editable label');\n const [compactLabelText, setCompactLabelText] = useState('Compact editable label');\n\n const onEditCancel = (_event: KeyboardEvent, prevText: string) => {\n setLabelText(prevText);\n };\n\n const onEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {\n setLabelText(text);\n };\n\n const onCompactEditCancel = (_event: KeyboardEvent, prevText: string) => {\n setCompactLabelText(prevText);\n };\n\n const onCompactEditComplete = (_event: MouseEvent | KeyboardEvent, text: string) => {\n setCompactLabelText(text);\n };\n\n return (\n <Fragment>\n <Label\n color=\"blue\"\n onClose={() => {}}\n closeBtnAriaLabel=\"Custom close button for editable label\"\n onEditCancel={onEditCancel}\n onEditComplete={onEditComplete}\n isEditable\n editableProps={{\n 'aria-label': `Editable label with text ${labelText}`,\n id: 'editable-label'\n }}\n >\n {labelText}\n </Label>\n <Label\n color=\"grey\"\n isCompact\n onClose={() => {}}\n closeBtnAriaLabel=\"Custom close button for compact editable label\"\n onEditCancel={onCompactEditCancel}\n onEditComplete={onCompactEditComplete}\n isEditable\n editableProps={{\n 'aria-label': `Editable compact label with text ${compactLabelText}`,\n id: 'compact-editable-label'\n }}\n >\n {compactLabelText}\n </Label>\n </Fragment>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
66
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6925" data-pf-content="true" class="pf-v6-c-content--h3">Basic label group</h3>
|
|
66
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6926" data-pf-content="true" class="pf-v6-c-content--p">Use a label group when you have multiple labels to display at once.</p>
|
|
67
67
|
|
|
68
68
|
<astro-island uid="227y26" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Label, LabelGroup } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelGroupBasic: React.FunctionComponent = () => (\n <LabelGroup>\n <Label icon={<InfoCircleIcon />}>Label 1</Label>\n <Label icon={<InfoCircleIcon />} color=\"blue\">\n Label 2\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"green\">\n Label 3\n </Label>\n </LabelGroup>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
69
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
70
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
69
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6927" data-pf-content="true" class="pf-v6-c-content--h3">Label group with overflow</h3>
|
|
70
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6928" data-pf-content="true" class="pf-v6-c-content--p">An overflow label can be added to the end of a group to save space when the number of labels exceeds some threshold. Click the overflow label to expand and collapse the group.</p>
|
|
71
71
|
|
|
72
72
|
<astro-island uid="Z2l3X38" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Label, LabelGroup } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelGroupOverflow: React.FunctionComponent = () => (\n <LabelGroup>\n <Label icon={<InfoCircleIcon />}>Label 1</Label>\n <Label icon={<InfoCircleIcon />} color=\"blue\">\n Label 2\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"green\">\n Label 3\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"orange\">\n Label 4\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"red\">\n Label 5\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"purple\">\n Label 6\n </Label>\n </LabelGroup>\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-
|
|
74
|
-
<p 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-6929" data-pf-content="true" class="pf-v6-c-content--h3">Label group with categories</h3>
|
|
74
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6930" data-pf-content="true" class="pf-v6-c-content--p">Use a category name to organize a set of labels</p>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="Z1NVSiD" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { Label, LabelGroup } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelGroupCategory: React.FunctionComponent = () => (\n <LabelGroup categoryName=\"Group label\">\n <Label icon={<InfoCircleIcon />}>Label 1</Label>\n <Label icon={<InfoCircleIcon />} color=\"blue\">\n Label 2\n </Label>\n <Label icon={<InfoCircleIcon />} color=\"green\">\n Label 3\n </Label>\n </LabelGroup>\n);\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6931" data-pf-content="true" class="pf-v6-c-content--h3">Label group with removable categories</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="Z1130Ym" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Label, LabelGroup, LabelProps } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelGroupCategoryRemovable: React.FunctionComponent = () => {\n const [labels, setLabels] = useState([\n ['Label 1', 'grey'],\n ['Label 2', 'blue'],\n ['Label 3', 'green'],\n ['Label 4', 'orange'],\n ['Label 5', 'red']\n ]);\n const deleteCategory = () => setLabels([]);\n\n return (\n <LabelGroup categoryName=\"Group label\" isClosable onClick={deleteCategory}>\n {labels.map(([labelText, labelColor]) => (\n <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>\n {labelText}\n </Label>\n ))}\n </LabelGroup>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
81
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6932" data-pf-content="true" class="pf-v6-c-content--h3">Vertical label group</h3>
|
|
81
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6933" data-pf-content="true" class="pf-v6-c-content--p">Labels in a group can also be stacked vertically. This example shows a verical label group with a category name and overflow.</p>
|
|
82
82
|
|
|
83
83
|
<astro-island uid="ZEInp5" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { Label, LabelGroup, LabelProps } from '@patternfly/react-core';\nimport InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';\n\nexport const LabelGroupVerticalCategoryOverflowRemovable: React.FunctionComponent = () => {\n const [labels, setLabels] = useState([\n ['Label 1', 'grey'],\n ['Label 2', 'blue'],\n ['Label 3', 'green'],\n ['Label 4', 'orange'],\n ['Label 5', 'red']\n ]);\n const deleteCategory = () => setLabels([]);\n\n return (\n <LabelGroup categoryName=\"Group label with a very long name\" isVertical isClosable onClick={deleteCategory}>\n {labels.map(([labelText, labelColor]) => (\n <Label icon={<InfoCircleIcon />} color={labelColor as LabelProps['color']} key={labelText}>\n {labelText}\n </Label>\n ))}\n </LabelGroup>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
84
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
84
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6934" data-pf-content="true" class="pf-v6-c-content--h3">Editable label group</h3>
|
|
85
85
|
|
|
86
86
|
<astro-island uid="Z11yHK3" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { LabelGroup, Label } from '@patternfly/react-core';\n\nexport const LabelGroupEditableLabels: React.FunctionComponent = () => {\n const [label1, setLabel1] = useState('Editable label');\n const [label2, setLabel2] = useState('Editable label 2');\n const [label3, setLabel3] = useState('Editable label 3');\n\n return (\n <LabelGroup numLabels={5} isEditable>\n <Label\n color=\"blue\"\n onClose={() => Function.prototype}\n onEditCancel={(_event, prevText) => setLabel1(prevText)}\n onEditComplete={(_event, newText) => setLabel1(newText)}\n isEditable\n editableProps={{\n 'aria-label': `Editable label with text ${label1}`,\n id: 'editable-label-1'\n }}\n >\n {label1}\n </Label>\n <Label color=\"green\">Static label</Label>\n <Label\n color=\"blue\"\n onClose={() => Function.prototype}\n onEditCancel={(_event, prevText) => setLabel2(prevText)}\n onEditComplete={(_event, newText) => setLabel2(newText)}\n isEditable\n editableProps={{\n 'aria-label': `Editable label with text ${label2}`,\n id: 'editable-label-2'\n }}\n >\n {label2}\n </Label>\n <Label\n color=\"blue\"\n onClose={() => Function.prototype}\n onEditCancel={(_event, prevText) => setLabel3(prevText)}\n onEditComplete={(_event, newText) => setLabel3(newText)}\n isEditable\n editableProps={{\n 'aria-label': `Editable label with text ${label3}`,\n id: 'editable-label-3'\n }}\n >\n {label3}\n </Label>\n </LabelGroup>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
87
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
88
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
87
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6935" data-pf-content="true" class="pf-v6-c-content--h3">Editable label group with add button</h3>
|
|
88
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6942" data-pf-content="true" class="pf-v6-c-content--p">The contents of a label group can be modified by removing labels or adding new ones using the add button. For additional documentation that showcases adding a new label, see <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6936" data-pf-content="true" class="pf-v6-c-content--a">label demos</a>.</p>
|
|
89
89
|
|
|
90
90
|
<astro-island uid="1jF7GC" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0,"import { useState } from 'react';\nimport { LabelGroup, Label } from '@patternfly/react-core';\n\nexport const LabelGroupEditableAdd: React.FunctionComponent = () => {\n const [idIndex, setIdIndex] = useState<number>(3);\n const [labels, setLabels] = useState<any>([\n { name: 'Label 1', id: 0 },\n { name: 'Label 2', id: 1 },\n {\n name: 'Label 3',\n props: {\n isEditable: true,\n editableProps: {\n 'aria-label': 'Editable label with text Label 3'\n }\n },\n id: 2\n }\n ]);\n\n const onClose = (labelId: string) => {\n setLabels(labels.filter((l: any) => l.id !== labelId));\n };\n\n const onEdit = (nextText: string, index: number) => {\n const copy = [...labels];\n const updatedProps = {\n ...labels[index].props,\n editableProps: { 'aria-label': `Editable label with text ${nextText}` }\n };\n\n copy[index] = { name: nextText, props: updatedProps, id: labels[index].id };\n setLabels(copy);\n };\n\n const onAdd = () => {\n setLabels([\n {\n name: 'New Label',\n props: {\n isEditable: true,\n editableProps: {\n 'aria-label': `Editable label with text New Label`\n }\n },\n id: idIndex\n },\n ...labels\n ]);\n setIdIndex(idIndex + 1);\n };\n\n return (\n <LabelGroup\n categoryName=\"Label group 1\"\n numLabels={5}\n isEditable\n addLabelControl={\n <Label variant=\"add\" onClick={onAdd}>\n Add label\n </Label>\n }\n >\n {labels.map((label, index) => (\n <Label\n key={label.id}\n id={label.id}\n color=\"blue\"\n onClose={() => onClose(label.id)}\n onEditCancel={(_event, prevText) => onEdit(prevText, index)}\n onEditComplete={(_event, newText) => onEdit(newText, index)}\n {...label.props}\n >\n {label.name}\n </Label>\n ))}\n </LabelGroup>\n );\n};\n"],"html":[0]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
91
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
92
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
93
|
-
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
91
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6937" data-pf-content="true" class="pf-v6-c-content--h2">Using router links</h2>
|
|
92
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6940" data-pf-content="true" class="pf-v6-c-content--p">Router links can be used for in-app linking in React environments to prevent page reloading. To use a <code>Link</code> component from a router package, you can use the <code>render</code> property of the <code>Label</code>:</p>
|
|
93
|
+
<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-6941" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span><Label</span></span>
|
|
94
94
|
<span class="line"><span> render={({ className, content, componentRef }) => (</span></span>
|
|
95
95
|
<span class="line"><span> <Link to="/" className={className} innerRef={componentRef}></span></span>
|
|
96
96
|
<span class="line"><span> {content}</span></span>
|
|
@@ -98,6 +98,6 @@
|
|
|
98
98
|
<span class="line"><span> )}</span></span>
|
|
99
99
|
<span class="line"><span>></span></span>
|
|
100
100
|
<span class="line"><span> Label router link</span></span>
|
|
101
|
-
<span class="line"><span></Label></span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="1QWPLs" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Label"],[0,"LabelGroup"]]],"url":[7,"http://localhost:4321/components/label/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-
|
|
101
|
+
<span class="line"><span></Label></span></span></code></pre> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="1QWPLs" component-url="/_astro/PropsTables.DC2ugmn8.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{"propComponents":[1,[[0,"Label"],[0,"LabelGroup"]]],"url":[7,"http://localhost:4321/components/label/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-6917" 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>
|
|
102
102
|
CSS variables
|
|
103
103
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZqP9lz" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,true],"cssPrefix":[0,"pf-v6-c-label"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div><div class="pf-v6-l-stack__item"><astro-island uid="Z5zzBg" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,true],"cssPrefix":[0,"pf-v6-c-label-group"]}" 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>
|