@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
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/base/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -7,87 +7,87 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
7
7
|
### Default
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<div class="pf-
|
|
11
|
-
<ul class="pf-
|
|
10
|
+
<div class="pf-v6-c-tree-view">
|
|
11
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
12
12
|
<li
|
|
13
|
-
class="pf-
|
|
13
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
14
14
|
role="treeitem"
|
|
15
15
|
aria-expanded="true"
|
|
16
16
|
tabindex="0"
|
|
17
17
|
>
|
|
18
|
-
<div class="pf-
|
|
19
|
-
<button class="pf-
|
|
20
|
-
<span class="pf-
|
|
21
|
-
<span class="pf-
|
|
22
|
-
<span class="pf-
|
|
18
|
+
<div class="pf-v6-c-tree-view__content">
|
|
19
|
+
<button class="pf-v6-c-tree-view__node">
|
|
20
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
21
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
22
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
23
23
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
24
24
|
</span>
|
|
25
25
|
</span>
|
|
26
|
-
<span class="pf-
|
|
26
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
27
27
|
</span>
|
|
28
28
|
</button>
|
|
29
29
|
</div>
|
|
30
|
-
<ul class="pf-
|
|
30
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
31
31
|
<li
|
|
32
|
-
class="pf-
|
|
32
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
33
33
|
role="treeitem"
|
|
34
34
|
aria-expanded="true"
|
|
35
35
|
tabindex="0"
|
|
36
36
|
>
|
|
37
|
-
<div class="pf-
|
|
38
|
-
<button class="pf-
|
|
39
|
-
<span class="pf-
|
|
40
|
-
<span class="pf-
|
|
41
|
-
<span class="pf-
|
|
37
|
+
<div class="pf-v6-c-tree-view__content">
|
|
38
|
+
<button class="pf-v6-c-tree-view__node">
|
|
39
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
40
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
41
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
42
42
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
43
43
|
</span>
|
|
44
44
|
</span>
|
|
45
|
-
<span class="pf-
|
|
45
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
46
46
|
</span>
|
|
47
47
|
</button>
|
|
48
48
|
</div>
|
|
49
|
-
<ul class="pf-
|
|
49
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
50
50
|
<li
|
|
51
|
-
class="pf-
|
|
51
|
+
class="pf-v6-c-tree-view__list-item"
|
|
52
52
|
role="treeitem"
|
|
53
53
|
tabindex="-1"
|
|
54
54
|
>
|
|
55
|
-
<div class="pf-
|
|
56
|
-
<button class="pf-
|
|
57
|
-
<span class="pf-
|
|
58
|
-
<span class="pf-
|
|
55
|
+
<div class="pf-v6-c-tree-view__content">
|
|
56
|
+
<button class="pf-v6-c-tree-view__node">
|
|
57
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
58
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
59
59
|
</span>
|
|
60
60
|
</button>
|
|
61
61
|
</div>
|
|
62
62
|
</li>
|
|
63
63
|
<li
|
|
64
|
-
class="pf-
|
|
64
|
+
class="pf-v6-c-tree-view__list-item"
|
|
65
65
|
role="treeitem"
|
|
66
66
|
tabindex="-1"
|
|
67
67
|
>
|
|
68
|
-
<div class="pf-
|
|
69
|
-
<button class="pf-
|
|
70
|
-
<span class="pf-
|
|
71
|
-
<span class="pf-
|
|
68
|
+
<div class="pf-v6-c-tree-view__content">
|
|
69
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
70
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
71
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
72
72
|
</span>
|
|
73
73
|
</button>
|
|
74
74
|
</div>
|
|
75
75
|
</li>
|
|
76
76
|
<li
|
|
77
|
-
class="pf-
|
|
77
|
+
class="pf-v6-c-tree-view__list-item"
|
|
78
78
|
role="treeitem"
|
|
79
79
|
aria-expanded="false"
|
|
80
80
|
tabindex="0"
|
|
81
81
|
>
|
|
82
|
-
<div class="pf-
|
|
83
|
-
<button class="pf-
|
|
84
|
-
<span class="pf-
|
|
85
|
-
<span class="pf-
|
|
86
|
-
<span class="pf-
|
|
82
|
+
<div class="pf-v6-c-tree-view__content">
|
|
83
|
+
<button class="pf-v6-c-tree-view__node">
|
|
84
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
85
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
86
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
87
87
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
88
88
|
</span>
|
|
89
89
|
</span>
|
|
90
|
-
<span class="pf-
|
|
90
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
91
91
|
</span>
|
|
92
92
|
</button>
|
|
93
93
|
</div>
|
|
@@ -95,116 +95,116 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
95
95
|
</ul>
|
|
96
96
|
</li>
|
|
97
97
|
<li
|
|
98
|
-
class="pf-
|
|
98
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
99
99
|
role="treeitem"
|
|
100
100
|
aria-expanded="true"
|
|
101
101
|
tabindex="0"
|
|
102
102
|
>
|
|
103
|
-
<div class="pf-
|
|
104
|
-
<button class="pf-
|
|
105
|
-
<span class="pf-
|
|
106
|
-
<span class="pf-
|
|
107
|
-
<span class="pf-
|
|
103
|
+
<div class="pf-v6-c-tree-view__content">
|
|
104
|
+
<button class="pf-v6-c-tree-view__node">
|
|
105
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
106
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
107
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
108
108
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
109
109
|
</span>
|
|
110
110
|
</span>
|
|
111
|
-
<span class="pf-
|
|
111
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
112
112
|
</span>
|
|
113
113
|
</button>
|
|
114
114
|
</div>
|
|
115
|
-
<ul class="pf-
|
|
115
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
116
116
|
<li
|
|
117
|
-
class="pf-
|
|
117
|
+
class="pf-v6-c-tree-view__list-item"
|
|
118
118
|
role="treeitem"
|
|
119
119
|
tabindex="-1"
|
|
120
120
|
>
|
|
121
|
-
<div class="pf-
|
|
122
|
-
<button class="pf-
|
|
123
|
-
<span class="pf-
|
|
124
|
-
<span class="pf-
|
|
121
|
+
<div class="pf-v6-c-tree-view__content">
|
|
122
|
+
<button class="pf-v6-c-tree-view__node">
|
|
123
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
124
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
125
125
|
</span>
|
|
126
126
|
</button>
|
|
127
127
|
</div>
|
|
128
128
|
</li>
|
|
129
129
|
<li
|
|
130
|
-
class="pf-
|
|
130
|
+
class="pf-v6-c-tree-view__list-item"
|
|
131
131
|
role="treeitem"
|
|
132
132
|
aria-expanded="false"
|
|
133
133
|
tabindex="0"
|
|
134
134
|
>
|
|
135
|
-
<div class="pf-
|
|
136
|
-
<button class="pf-
|
|
137
|
-
<span class="pf-
|
|
138
|
-
<span class="pf-
|
|
139
|
-
<span class="pf-
|
|
135
|
+
<div class="pf-v6-c-tree-view__content">
|
|
136
|
+
<button class="pf-v6-c-tree-view__node">
|
|
137
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
138
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
139
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
140
140
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
141
141
|
</span>
|
|
142
142
|
</span>
|
|
143
|
-
<span class="pf-
|
|
143
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
144
144
|
</span>
|
|
145
145
|
</button>
|
|
146
146
|
</div>
|
|
147
147
|
</li>
|
|
148
148
|
<li
|
|
149
|
-
class="pf-
|
|
149
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
150
150
|
role="treeitem"
|
|
151
151
|
aria-expanded="true"
|
|
152
152
|
tabindex="0"
|
|
153
153
|
>
|
|
154
|
-
<div class="pf-
|
|
155
|
-
<button class="pf-
|
|
156
|
-
<span class="pf-
|
|
157
|
-
<span class="pf-
|
|
158
|
-
<span class="pf-
|
|
154
|
+
<div class="pf-v6-c-tree-view__content">
|
|
155
|
+
<button class="pf-v6-c-tree-view__node">
|
|
156
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
157
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
158
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
159
159
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
160
160
|
</span>
|
|
161
161
|
</span>
|
|
162
|
-
<span class="pf-
|
|
162
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
163
163
|
</span>
|
|
164
164
|
</button>
|
|
165
165
|
</div>
|
|
166
|
-
<ul class="pf-
|
|
166
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
167
167
|
<li
|
|
168
|
-
class="pf-
|
|
168
|
+
class="pf-v6-c-tree-view__list-item"
|
|
169
169
|
role="treeitem"
|
|
170
170
|
aria-expanded="false"
|
|
171
171
|
tabindex="0"
|
|
172
172
|
>
|
|
173
|
-
<div class="pf-
|
|
174
|
-
<button class="pf-
|
|
175
|
-
<span class="pf-
|
|
176
|
-
<span class="pf-
|
|
177
|
-
<span class="pf-
|
|
173
|
+
<div class="pf-v6-c-tree-view__content">
|
|
174
|
+
<button class="pf-v6-c-tree-view__node">
|
|
175
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
176
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
177
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
178
178
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
179
179
|
</span>
|
|
180
180
|
</span>
|
|
181
|
-
<span class="pf-
|
|
181
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
182
182
|
</span>
|
|
183
183
|
</button>
|
|
184
184
|
</div>
|
|
185
185
|
</li>
|
|
186
186
|
<li
|
|
187
|
-
class="pf-
|
|
187
|
+
class="pf-v6-c-tree-view__list-item"
|
|
188
188
|
role="treeitem"
|
|
189
189
|
tabindex="-1"
|
|
190
190
|
>
|
|
191
|
-
<div class="pf-
|
|
192
|
-
<button class="pf-
|
|
193
|
-
<span class="pf-
|
|
194
|
-
<span class="pf-
|
|
191
|
+
<div class="pf-v6-c-tree-view__content">
|
|
192
|
+
<button class="pf-v6-c-tree-view__node">
|
|
193
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
194
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
195
195
|
</span>
|
|
196
196
|
</button>
|
|
197
197
|
</div>
|
|
198
198
|
</li>
|
|
199
199
|
<li
|
|
200
|
-
class="pf-
|
|
200
|
+
class="pf-v6-c-tree-view__list-item"
|
|
201
201
|
role="treeitem"
|
|
202
202
|
tabindex="-1"
|
|
203
203
|
>
|
|
204
|
-
<div class="pf-
|
|
205
|
-
<button class="pf-
|
|
206
|
-
<span class="pf-
|
|
207
|
-
<span class="pf-
|
|
204
|
+
<div class="pf-v6-c-tree-view__content">
|
|
205
|
+
<button class="pf-v6-c-tree-view__node">
|
|
206
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
207
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
208
208
|
</span>
|
|
209
209
|
</button>
|
|
210
210
|
</div>
|
|
@@ -216,59 +216,59 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
216
216
|
</ul>
|
|
217
217
|
</li>
|
|
218
218
|
<li
|
|
219
|
-
class="pf-
|
|
219
|
+
class="pf-v6-c-tree-view__list-item"
|
|
220
220
|
role="treeitem"
|
|
221
221
|
aria-expanded="false"
|
|
222
222
|
tabindex="0"
|
|
223
223
|
>
|
|
224
|
-
<div class="pf-
|
|
225
|
-
<button class="pf-
|
|
226
|
-
<span class="pf-
|
|
227
|
-
<span class="pf-
|
|
228
|
-
<span class="pf-
|
|
224
|
+
<div class="pf-v6-c-tree-view__content">
|
|
225
|
+
<button class="pf-v6-c-tree-view__node">
|
|
226
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
227
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
228
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
229
229
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
230
230
|
</span>
|
|
231
231
|
</span>
|
|
232
|
-
<span class="pf-
|
|
232
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
233
233
|
</span>
|
|
234
234
|
</button>
|
|
235
235
|
</div>
|
|
236
236
|
</li>
|
|
237
237
|
<li
|
|
238
|
-
class="pf-
|
|
238
|
+
class="pf-v6-c-tree-view__list-item"
|
|
239
239
|
role="treeitem"
|
|
240
240
|
aria-expanded="false"
|
|
241
241
|
tabindex="0"
|
|
242
242
|
>
|
|
243
|
-
<div class="pf-
|
|
244
|
-
<button class="pf-
|
|
245
|
-
<span class="pf-
|
|
246
|
-
<span class="pf-
|
|
247
|
-
<span class="pf-
|
|
243
|
+
<div class="pf-v6-c-tree-view__content">
|
|
244
|
+
<button class="pf-v6-c-tree-view__node">
|
|
245
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
246
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
247
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
248
248
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
249
249
|
</span>
|
|
250
250
|
</span>
|
|
251
|
-
<span class="pf-
|
|
251
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
252
252
|
</span>
|
|
253
253
|
</button>
|
|
254
254
|
</div>
|
|
255
255
|
</li>
|
|
256
256
|
<li
|
|
257
|
-
class="pf-
|
|
257
|
+
class="pf-v6-c-tree-view__list-item"
|
|
258
258
|
role="treeitem"
|
|
259
259
|
aria-expanded="false"
|
|
260
260
|
tabindex="0"
|
|
261
261
|
>
|
|
262
|
-
<div class="pf-
|
|
263
|
-
<button class="pf-
|
|
264
|
-
<span class="pf-
|
|
265
|
-
<span class="pf-
|
|
266
|
-
<span class="pf-
|
|
262
|
+
<div class="pf-v6-c-tree-view__content">
|
|
263
|
+
<button class="pf-v6-c-tree-view__node">
|
|
264
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
265
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
266
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
267
267
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
268
268
|
</span>
|
|
269
269
|
</span>
|
|
270
270
|
<span
|
|
271
|
-
class="pf-
|
|
271
|
+
class="pf-v6-c-tree-view__node-text"
|
|
272
272
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
273
273
|
</span>
|
|
274
274
|
</button>
|
|
@@ -282,16 +282,16 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
282
282
|
### With search
|
|
283
283
|
|
|
284
284
|
```html
|
|
285
|
-
<div class="pf-
|
|
286
|
-
<div class="pf-
|
|
287
|
-
<div class="pf-
|
|
288
|
-
<div class="pf-
|
|
289
|
-
<span class="pf-
|
|
290
|
-
<span class="pf-
|
|
285
|
+
<div class="pf-v6-c-tree-view">
|
|
286
|
+
<div class="pf-v6-c-tree-view__search">
|
|
287
|
+
<div class="pf-v6-c-text-input-group">
|
|
288
|
+
<div class="pf-v6-c-text-input-group__main pf-m-icon">
|
|
289
|
+
<span class="pf-v6-c-text-input-group__text">
|
|
290
|
+
<span class="pf-v6-c-text-input-group__icon">
|
|
291
291
|
<i class="fas fa-fw fa-search"></i>
|
|
292
292
|
</span>
|
|
293
293
|
<input
|
|
294
|
-
class="pf-
|
|
294
|
+
class="pf-v6-c-text-input-group__text-input"
|
|
295
295
|
type="text"
|
|
296
296
|
placeholder="Search"
|
|
297
297
|
value
|
|
@@ -301,68 +301,68 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
301
301
|
</div>
|
|
302
302
|
</div>
|
|
303
303
|
</div>
|
|
304
|
-
<hr class="pf-
|
|
305
|
-
<ul class="pf-
|
|
304
|
+
<hr class="pf-v6-c-divider" />
|
|
305
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
306
306
|
<li
|
|
307
|
-
class="pf-
|
|
307
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
308
308
|
role="treeitem"
|
|
309
309
|
aria-expanded="true"
|
|
310
310
|
tabindex="0"
|
|
311
311
|
>
|
|
312
|
-
<div class="pf-
|
|
313
|
-
<button class="pf-
|
|
314
|
-
<span class="pf-
|
|
315
|
-
<span class="pf-
|
|
316
|
-
<span class="pf-
|
|
312
|
+
<div class="pf-v6-c-tree-view__content">
|
|
313
|
+
<button class="pf-v6-c-tree-view__node">
|
|
314
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
315
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
316
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
317
317
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
318
318
|
</span>
|
|
319
319
|
</span>
|
|
320
|
-
<span class="pf-
|
|
320
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
321
321
|
</span>
|
|
322
322
|
</button>
|
|
323
323
|
</div>
|
|
324
|
-
<ul class="pf-
|
|
324
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
325
325
|
<li
|
|
326
|
-
class="pf-
|
|
326
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
327
327
|
role="treeitem"
|
|
328
328
|
aria-expanded="true"
|
|
329
329
|
tabindex="0"
|
|
330
330
|
>
|
|
331
|
-
<div class="pf-
|
|
332
|
-
<button class="pf-
|
|
333
|
-
<span class="pf-
|
|
334
|
-
<span class="pf-
|
|
335
|
-
<span class="pf-
|
|
331
|
+
<div class="pf-v6-c-tree-view__content">
|
|
332
|
+
<button class="pf-v6-c-tree-view__node">
|
|
333
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
334
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
335
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
336
336
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
337
337
|
</span>
|
|
338
338
|
</span>
|
|
339
|
-
<span class="pf-
|
|
339
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
340
340
|
</span>
|
|
341
341
|
</button>
|
|
342
342
|
</div>
|
|
343
|
-
<ul class="pf-
|
|
343
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
344
344
|
<li
|
|
345
|
-
class="pf-
|
|
345
|
+
class="pf-v6-c-tree-view__list-item"
|
|
346
346
|
role="treeitem"
|
|
347
347
|
tabindex="-1"
|
|
348
348
|
>
|
|
349
|
-
<div class="pf-
|
|
350
|
-
<button class="pf-
|
|
351
|
-
<span class="pf-
|
|
352
|
-
<span class="pf-
|
|
349
|
+
<div class="pf-v6-c-tree-view__content">
|
|
350
|
+
<button class="pf-v6-c-tree-view__node">
|
|
351
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
352
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
353
353
|
</span>
|
|
354
354
|
</button>
|
|
355
355
|
</div>
|
|
356
356
|
</li>
|
|
357
357
|
<li
|
|
358
|
-
class="pf-
|
|
358
|
+
class="pf-v6-c-tree-view__list-item"
|
|
359
359
|
role="treeitem"
|
|
360
360
|
tabindex="-1"
|
|
361
361
|
>
|
|
362
|
-
<div class="pf-
|
|
363
|
-
<button class="pf-
|
|
364
|
-
<span class="pf-
|
|
365
|
-
<span class="pf-
|
|
362
|
+
<div class="pf-v6-c-tree-view__content">
|
|
363
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
364
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
365
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
366
366
|
</span>
|
|
367
367
|
</button>
|
|
368
368
|
</div>
|
|
@@ -370,103 +370,103 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
370
370
|
</ul>
|
|
371
371
|
</li>
|
|
372
372
|
<li
|
|
373
|
-
class="pf-
|
|
373
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
374
374
|
role="treeitem"
|
|
375
375
|
aria-expanded="true"
|
|
376
376
|
tabindex="0"
|
|
377
377
|
>
|
|
378
|
-
<div class="pf-
|
|
379
|
-
<button class="pf-
|
|
380
|
-
<span class="pf-
|
|
381
|
-
<span class="pf-
|
|
382
|
-
<span class="pf-
|
|
378
|
+
<div class="pf-v6-c-tree-view__content">
|
|
379
|
+
<button class="pf-v6-c-tree-view__node">
|
|
380
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
381
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
382
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
383
383
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
384
384
|
</span>
|
|
385
385
|
</span>
|
|
386
|
-
<span class="pf-
|
|
386
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
387
387
|
</span>
|
|
388
388
|
</button>
|
|
389
389
|
</div>
|
|
390
|
-
<ul class="pf-
|
|
390
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
391
391
|
<li
|
|
392
|
-
class="pf-
|
|
392
|
+
class="pf-v6-c-tree-view__list-item"
|
|
393
393
|
role="treeitem"
|
|
394
394
|
aria-expanded="false"
|
|
395
395
|
tabindex="0"
|
|
396
396
|
>
|
|
397
|
-
<div class="pf-
|
|
398
|
-
<button class="pf-
|
|
399
|
-
<span class="pf-
|
|
400
|
-
<span class="pf-
|
|
401
|
-
<span class="pf-
|
|
397
|
+
<div class="pf-v6-c-tree-view__content">
|
|
398
|
+
<button class="pf-v6-c-tree-view__node">
|
|
399
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
400
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
401
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
402
402
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
403
403
|
</span>
|
|
404
404
|
</span>
|
|
405
|
-
<span class="pf-
|
|
405
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
406
406
|
</span>
|
|
407
407
|
</button>
|
|
408
408
|
</div>
|
|
409
409
|
</li>
|
|
410
410
|
<li
|
|
411
|
-
class="pf-
|
|
411
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
412
412
|
role="treeitem"
|
|
413
413
|
aria-expanded="true"
|
|
414
414
|
tabindex="0"
|
|
415
415
|
>
|
|
416
|
-
<div class="pf-
|
|
417
|
-
<button class="pf-
|
|
418
|
-
<span class="pf-
|
|
419
|
-
<span class="pf-
|
|
420
|
-
<span class="pf-
|
|
416
|
+
<div class="pf-v6-c-tree-view__content">
|
|
417
|
+
<button class="pf-v6-c-tree-view__node">
|
|
418
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
419
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
420
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
421
421
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
422
422
|
</span>
|
|
423
423
|
</span>
|
|
424
|
-
<span class="pf-
|
|
424
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
425
425
|
</span>
|
|
426
426
|
</button>
|
|
427
427
|
</div>
|
|
428
|
-
<ul class="pf-
|
|
428
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
429
429
|
<li
|
|
430
|
-
class="pf-
|
|
430
|
+
class="pf-v6-c-tree-view__list-item"
|
|
431
431
|
role="treeitem"
|
|
432
432
|
aria-expanded="false"
|
|
433
433
|
tabindex="0"
|
|
434
434
|
>
|
|
435
|
-
<div class="pf-
|
|
436
|
-
<button class="pf-
|
|
437
|
-
<span class="pf-
|
|
438
|
-
<span class="pf-
|
|
439
|
-
<span class="pf-
|
|
435
|
+
<div class="pf-v6-c-tree-view__content">
|
|
436
|
+
<button class="pf-v6-c-tree-view__node">
|
|
437
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
438
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
439
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
440
440
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
441
441
|
</span>
|
|
442
442
|
</span>
|
|
443
|
-
<span class="pf-
|
|
443
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
444
444
|
</span>
|
|
445
445
|
</button>
|
|
446
446
|
</div>
|
|
447
447
|
</li>
|
|
448
448
|
<li
|
|
449
|
-
class="pf-
|
|
449
|
+
class="pf-v6-c-tree-view__list-item"
|
|
450
450
|
role="treeitem"
|
|
451
451
|
tabindex="-1"
|
|
452
452
|
>
|
|
453
|
-
<div class="pf-
|
|
454
|
-
<button class="pf-
|
|
455
|
-
<span class="pf-
|
|
456
|
-
<span class="pf-
|
|
453
|
+
<div class="pf-v6-c-tree-view__content">
|
|
454
|
+
<button class="pf-v6-c-tree-view__node">
|
|
455
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
456
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
457
457
|
</span>
|
|
458
458
|
</button>
|
|
459
459
|
</div>
|
|
460
460
|
</li>
|
|
461
461
|
<li
|
|
462
|
-
class="pf-
|
|
462
|
+
class="pf-v6-c-tree-view__list-item"
|
|
463
463
|
role="treeitem"
|
|
464
464
|
tabindex="-1"
|
|
465
465
|
>
|
|
466
|
-
<div class="pf-
|
|
467
|
-
<button class="pf-
|
|
468
|
-
<span class="pf-
|
|
469
|
-
<span class="pf-
|
|
466
|
+
<div class="pf-v6-c-tree-view__content">
|
|
467
|
+
<button class="pf-v6-c-tree-view__node">
|
|
468
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
469
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
470
470
|
</span>
|
|
471
471
|
</button>
|
|
472
472
|
</div>
|
|
@@ -478,59 +478,59 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
478
478
|
</ul>
|
|
479
479
|
</li>
|
|
480
480
|
<li
|
|
481
|
-
class="pf-
|
|
481
|
+
class="pf-v6-c-tree-view__list-item"
|
|
482
482
|
role="treeitem"
|
|
483
483
|
aria-expanded="false"
|
|
484
484
|
tabindex="0"
|
|
485
485
|
>
|
|
486
|
-
<div class="pf-
|
|
487
|
-
<button class="pf-
|
|
488
|
-
<span class="pf-
|
|
489
|
-
<span class="pf-
|
|
490
|
-
<span class="pf-
|
|
486
|
+
<div class="pf-v6-c-tree-view__content">
|
|
487
|
+
<button class="pf-v6-c-tree-view__node">
|
|
488
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
489
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
490
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
491
491
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
492
492
|
</span>
|
|
493
493
|
</span>
|
|
494
|
-
<span class="pf-
|
|
494
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
495
495
|
</span>
|
|
496
496
|
</button>
|
|
497
497
|
</div>
|
|
498
498
|
</li>
|
|
499
499
|
<li
|
|
500
|
-
class="pf-
|
|
500
|
+
class="pf-v6-c-tree-view__list-item"
|
|
501
501
|
role="treeitem"
|
|
502
502
|
aria-expanded="false"
|
|
503
503
|
tabindex="0"
|
|
504
504
|
>
|
|
505
|
-
<div class="pf-
|
|
506
|
-
<button class="pf-
|
|
507
|
-
<span class="pf-
|
|
508
|
-
<span class="pf-
|
|
509
|
-
<span class="pf-
|
|
505
|
+
<div class="pf-v6-c-tree-view__content">
|
|
506
|
+
<button class="pf-v6-c-tree-view__node">
|
|
507
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
508
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
509
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
510
510
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
511
511
|
</span>
|
|
512
512
|
</span>
|
|
513
|
-
<span class="pf-
|
|
513
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
514
514
|
</span>
|
|
515
515
|
</button>
|
|
516
516
|
</div>
|
|
517
517
|
</li>
|
|
518
518
|
<li
|
|
519
|
-
class="pf-
|
|
519
|
+
class="pf-v6-c-tree-view__list-item"
|
|
520
520
|
role="treeitem"
|
|
521
521
|
aria-expanded="false"
|
|
522
522
|
tabindex="0"
|
|
523
523
|
>
|
|
524
|
-
<div class="pf-
|
|
525
|
-
<button class="pf-
|
|
526
|
-
<span class="pf-
|
|
527
|
-
<span class="pf-
|
|
528
|
-
<span class="pf-
|
|
524
|
+
<div class="pf-v6-c-tree-view__content">
|
|
525
|
+
<button class="pf-v6-c-tree-view__node">
|
|
526
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
527
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
528
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
529
529
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
530
530
|
</span>
|
|
531
531
|
</span>
|
|
532
532
|
<span
|
|
533
|
-
class="pf-
|
|
533
|
+
class="pf-v6-c-tree-view__node-text"
|
|
534
534
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
535
535
|
</span>
|
|
536
536
|
</button>
|
|
@@ -544,35 +544,35 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
544
544
|
### With checkboxes
|
|
545
545
|
|
|
546
546
|
```html
|
|
547
|
-
<div class="pf-
|
|
548
|
-
<ul class="pf-
|
|
547
|
+
<div class="pf-v6-c-tree-view">
|
|
548
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
549
549
|
<li
|
|
550
|
-
class="pf-
|
|
550
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
551
551
|
role="treeitem"
|
|
552
552
|
aria-expanded="true"
|
|
553
553
|
tabindex="0"
|
|
554
554
|
>
|
|
555
|
-
<div class="pf-
|
|
555
|
+
<div class="pf-v6-c-tree-view__content">
|
|
556
556
|
<label
|
|
557
|
-
class="pf-
|
|
557
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
558
558
|
tabindex="0"
|
|
559
559
|
for="check-tree-view-checkboxes-1"
|
|
560
560
|
>
|
|
561
|
-
<span class="pf-
|
|
561
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
562
562
|
<button
|
|
563
|
-
class="pf-
|
|
563
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
564
564
|
id="toggle-tree-view-checkboxes-1"
|
|
565
565
|
aria-label="Toggle"
|
|
566
566
|
aria-labelledby="toggle-tree-view-checkboxes-1 text-tree-view-checkboxes-1"
|
|
567
567
|
>
|
|
568
|
-
<span class="pf-
|
|
568
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
569
569
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
570
570
|
</span>
|
|
571
571
|
</button>
|
|
572
|
-
<span class="pf-
|
|
573
|
-
<div class="pf-
|
|
572
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
573
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
574
574
|
<input
|
|
575
|
-
class="pf-
|
|
575
|
+
class="pf-v6-c-check__input"
|
|
576
576
|
type="checkbox"
|
|
577
577
|
id="check-tree-view-checkboxes-1"
|
|
578
578
|
aria-label="Select"
|
|
@@ -581,40 +581,40 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
581
581
|
</div>
|
|
582
582
|
</span>
|
|
583
583
|
<span
|
|
584
|
-
class="pf-
|
|
584
|
+
class="pf-v6-c-tree-view__node-text"
|
|
585
585
|
id="text-tree-view-checkboxes-1"
|
|
586
586
|
>Application launcher</span>
|
|
587
587
|
</span>
|
|
588
588
|
</label>
|
|
589
589
|
</div>
|
|
590
|
-
<ul class="pf-
|
|
590
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
591
591
|
<li
|
|
592
|
-
class="pf-
|
|
592
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
593
593
|
role="treeitem"
|
|
594
594
|
aria-expanded="true"
|
|
595
595
|
tabindex="0"
|
|
596
596
|
>
|
|
597
|
-
<div class="pf-
|
|
597
|
+
<div class="pf-v6-c-tree-view__content">
|
|
598
598
|
<label
|
|
599
|
-
class="pf-
|
|
599
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
600
600
|
tabindex="0"
|
|
601
601
|
for="check-tree-view-checkboxes-2"
|
|
602
602
|
>
|
|
603
|
-
<span class="pf-
|
|
603
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
604
604
|
<button
|
|
605
|
-
class="pf-
|
|
605
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
606
606
|
id="toggle-tree-view-checkboxes-2"
|
|
607
607
|
aria-label="Toggle"
|
|
608
608
|
aria-labelledby="toggle-tree-view-checkboxes-2 text-tree-view-checkboxes-2"
|
|
609
609
|
>
|
|
610
|
-
<span class="pf-
|
|
610
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
611
611
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
612
612
|
</span>
|
|
613
613
|
</button>
|
|
614
|
-
<span class="pf-
|
|
615
|
-
<div class="pf-
|
|
614
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
615
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
616
616
|
<input
|
|
617
|
-
class="pf-
|
|
617
|
+
class="pf-v6-c-check__input"
|
|
618
618
|
type="checkbox"
|
|
619
619
|
checked
|
|
620
620
|
id="check-tree-view-checkboxes-2"
|
|
@@ -624,29 +624,29 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
624
624
|
</div>
|
|
625
625
|
</span>
|
|
626
626
|
<span
|
|
627
|
-
class="pf-
|
|
627
|
+
class="pf-v6-c-tree-view__node-text"
|
|
628
628
|
id="text-tree-view-checkboxes-2"
|
|
629
629
|
>Application 1</span>
|
|
630
630
|
</span>
|
|
631
631
|
</label>
|
|
632
632
|
</div>
|
|
633
|
-
<ul class="pf-
|
|
633
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
634
634
|
<li
|
|
635
|
-
class="pf-
|
|
635
|
+
class="pf-v6-c-tree-view__list-item"
|
|
636
636
|
role="treeitem"
|
|
637
637
|
tabindex="-1"
|
|
638
638
|
>
|
|
639
|
-
<div class="pf-
|
|
639
|
+
<div class="pf-v6-c-tree-view__content">
|
|
640
640
|
<label
|
|
641
|
-
class="pf-
|
|
641
|
+
class="pf-v6-c-tree-view__node"
|
|
642
642
|
tabindex="0"
|
|
643
643
|
for="check-tree-view-checkboxes-3"
|
|
644
644
|
>
|
|
645
|
-
<span class="pf-
|
|
646
|
-
<span class="pf-
|
|
647
|
-
<div class="pf-
|
|
645
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
646
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
647
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
648
648
|
<input
|
|
649
|
-
class="pf-
|
|
649
|
+
class="pf-v6-c-check__input"
|
|
650
650
|
type="checkbox"
|
|
651
651
|
checked
|
|
652
652
|
id="check-tree-view-checkboxes-3"
|
|
@@ -656,7 +656,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
656
656
|
</div>
|
|
657
657
|
</span>
|
|
658
658
|
<span
|
|
659
|
-
class="pf-
|
|
659
|
+
class="pf-v6-c-tree-view__node-text"
|
|
660
660
|
id="text-tree-view-checkboxes-3"
|
|
661
661
|
>Settings</span>
|
|
662
662
|
</span>
|
|
@@ -664,21 +664,21 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
664
664
|
</div>
|
|
665
665
|
</li>
|
|
666
666
|
<li
|
|
667
|
-
class="pf-
|
|
667
|
+
class="pf-v6-c-tree-view__list-item"
|
|
668
668
|
role="treeitem"
|
|
669
669
|
tabindex="-1"
|
|
670
670
|
>
|
|
671
|
-
<div class="pf-
|
|
671
|
+
<div class="pf-v6-c-tree-view__content">
|
|
672
672
|
<label
|
|
673
|
-
class="pf-
|
|
673
|
+
class="pf-v6-c-tree-view__node"
|
|
674
674
|
tabindex="0"
|
|
675
675
|
for="check-tree-view-checkboxes-4"
|
|
676
676
|
>
|
|
677
|
-
<span class="pf-
|
|
678
|
-
<span class="pf-
|
|
679
|
-
<div class="pf-
|
|
677
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
678
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
679
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
680
680
|
<input
|
|
681
|
-
class="pf-
|
|
681
|
+
class="pf-v6-c-check__input"
|
|
682
682
|
type="checkbox"
|
|
683
683
|
checked
|
|
684
684
|
id="check-tree-view-checkboxes-4"
|
|
@@ -688,7 +688,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
688
688
|
</div>
|
|
689
689
|
</span>
|
|
690
690
|
<span
|
|
691
|
-
class="pf-
|
|
691
|
+
class="pf-v6-c-tree-view__node-text"
|
|
692
692
|
id="text-tree-view-checkboxes-4"
|
|
693
693
|
>Loader</span>
|
|
694
694
|
</span>
|
|
@@ -696,32 +696,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
696
696
|
</div>
|
|
697
697
|
</li>
|
|
698
698
|
<li
|
|
699
|
-
class="pf-
|
|
699
|
+
class="pf-v6-c-tree-view__list-item"
|
|
700
700
|
role="treeitem"
|
|
701
701
|
aria-expanded="false"
|
|
702
702
|
tabindex="0"
|
|
703
703
|
>
|
|
704
|
-
<div class="pf-
|
|
704
|
+
<div class="pf-v6-c-tree-view__content">
|
|
705
705
|
<label
|
|
706
|
-
class="pf-
|
|
706
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
707
707
|
tabindex="0"
|
|
708
708
|
for="check-tree-view-checkboxes-5"
|
|
709
709
|
>
|
|
710
|
-
<span class="pf-
|
|
710
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
711
711
|
<button
|
|
712
|
-
class="pf-
|
|
712
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
713
713
|
id="toggle-tree-view-checkboxes-5"
|
|
714
714
|
aria-label="Toggle"
|
|
715
715
|
aria-labelledby="toggle-tree-view-checkboxes-5 text-tree-view-checkboxes-5"
|
|
716
716
|
>
|
|
717
|
-
<span class="pf-
|
|
717
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
718
718
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
719
719
|
</span>
|
|
720
720
|
</button>
|
|
721
|
-
<span class="pf-
|
|
722
|
-
<div class="pf-
|
|
721
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
722
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
723
723
|
<input
|
|
724
|
-
class="pf-
|
|
724
|
+
class="pf-v6-c-check__input"
|
|
725
725
|
type="checkbox"
|
|
726
726
|
checked
|
|
727
727
|
id="check-tree-view-checkboxes-5"
|
|
@@ -731,7 +731,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
731
731
|
</div>
|
|
732
732
|
</span>
|
|
733
733
|
<span
|
|
734
|
-
class="pf-
|
|
734
|
+
class="pf-v6-c-tree-view__node-text"
|
|
735
735
|
id="text-tree-view-checkboxes-5"
|
|
736
736
|
>Loader</span>
|
|
737
737
|
</span>
|
|
@@ -741,32 +741,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
741
741
|
</ul>
|
|
742
742
|
</li>
|
|
743
743
|
<li
|
|
744
|
-
class="pf-
|
|
744
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
745
745
|
role="treeitem"
|
|
746
746
|
aria-expanded="true"
|
|
747
747
|
tabindex="0"
|
|
748
748
|
>
|
|
749
|
-
<div class="pf-
|
|
749
|
+
<div class="pf-v6-c-tree-view__content">
|
|
750
750
|
<label
|
|
751
|
-
class="pf-
|
|
751
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
752
752
|
tabindex="0"
|
|
753
753
|
for="check-tree-view-checkboxes-6"
|
|
754
754
|
>
|
|
755
|
-
<span class="pf-
|
|
755
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
756
756
|
<button
|
|
757
|
-
class="pf-
|
|
757
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
758
758
|
id="toggle-tree-view-checkboxes-6"
|
|
759
759
|
aria-label="Toggle"
|
|
760
760
|
aria-labelledby="toggle-tree-view-checkboxes-6 text-tree-view-checkboxes-6"
|
|
761
761
|
>
|
|
762
|
-
<span class="pf-
|
|
762
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
763
763
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
764
764
|
</span>
|
|
765
765
|
</button>
|
|
766
|
-
<span class="pf-
|
|
767
|
-
<div class="pf-
|
|
766
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
767
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
768
768
|
<input
|
|
769
|
-
class="pf-
|
|
769
|
+
class="pf-v6-c-check__input"
|
|
770
770
|
type="checkbox"
|
|
771
771
|
id="check-tree-view-checkboxes-6"
|
|
772
772
|
aria-label="Select"
|
|
@@ -775,40 +775,40 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
775
775
|
</div>
|
|
776
776
|
</span>
|
|
777
777
|
<span
|
|
778
|
-
class="pf-
|
|
778
|
+
class="pf-v6-c-tree-view__node-text"
|
|
779
779
|
id="text-tree-view-checkboxes-6"
|
|
780
780
|
>Application 2</span>
|
|
781
781
|
</span>
|
|
782
782
|
</label>
|
|
783
783
|
</div>
|
|
784
|
-
<ul class="pf-
|
|
784
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
785
785
|
<li
|
|
786
|
-
class="pf-
|
|
786
|
+
class="pf-v6-c-tree-view__list-item"
|
|
787
787
|
role="treeitem"
|
|
788
788
|
aria-expanded="false"
|
|
789
789
|
tabindex="0"
|
|
790
790
|
>
|
|
791
|
-
<div class="pf-
|
|
791
|
+
<div class="pf-v6-c-tree-view__content">
|
|
792
792
|
<label
|
|
793
|
-
class="pf-
|
|
793
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
794
794
|
tabindex="0"
|
|
795
795
|
for="check-tree-view-checkboxes-7"
|
|
796
796
|
>
|
|
797
|
-
<span class="pf-
|
|
797
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
798
798
|
<button
|
|
799
|
-
class="pf-
|
|
799
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
800
800
|
id="toggle-tree-view-checkboxes-7"
|
|
801
801
|
aria-label="Toggle"
|
|
802
802
|
aria-labelledby="toggle-tree-view-checkboxes-7 text-tree-view-checkboxes-7"
|
|
803
803
|
>
|
|
804
|
-
<span class="pf-
|
|
804
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
805
805
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
806
806
|
</span>
|
|
807
807
|
</button>
|
|
808
|
-
<span class="pf-
|
|
809
|
-
<div class="pf-
|
|
808
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
809
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
810
810
|
<input
|
|
811
|
-
class="pf-
|
|
811
|
+
class="pf-v6-c-check__input"
|
|
812
812
|
type="checkbox"
|
|
813
813
|
id="check-tree-view-checkboxes-7"
|
|
814
814
|
aria-label="Select"
|
|
@@ -817,7 +817,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
817
817
|
</div>
|
|
818
818
|
</span>
|
|
819
819
|
<span
|
|
820
|
-
class="pf-
|
|
820
|
+
class="pf-v6-c-tree-view__node-text"
|
|
821
821
|
id="text-tree-view-checkboxes-7"
|
|
822
822
|
>Settings</span>
|
|
823
823
|
</span>
|
|
@@ -825,21 +825,21 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
825
825
|
</div>
|
|
826
826
|
</li>
|
|
827
827
|
<li
|
|
828
|
-
class="pf-
|
|
828
|
+
class="pf-v6-c-tree-view__list-item"
|
|
829
829
|
role="treeitem"
|
|
830
830
|
tabindex="-1"
|
|
831
831
|
>
|
|
832
|
-
<div class="pf-
|
|
832
|
+
<div class="pf-v6-c-tree-view__content">
|
|
833
833
|
<label
|
|
834
|
-
class="pf-
|
|
834
|
+
class="pf-v6-c-tree-view__node"
|
|
835
835
|
tabindex="0"
|
|
836
836
|
for="check-tree-view-checkboxes-8"
|
|
837
837
|
>
|
|
838
|
-
<span class="pf-
|
|
839
|
-
<span class="pf-
|
|
840
|
-
<div class="pf-
|
|
838
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
839
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
840
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
841
841
|
<input
|
|
842
|
-
class="pf-
|
|
842
|
+
class="pf-v6-c-check__input"
|
|
843
843
|
type="checkbox"
|
|
844
844
|
id="check-tree-view-checkboxes-8"
|
|
845
845
|
aria-label="Select"
|
|
@@ -848,7 +848,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
848
848
|
</div>
|
|
849
849
|
</span>
|
|
850
850
|
<span
|
|
851
|
-
class="pf-
|
|
851
|
+
class="pf-v6-c-tree-view__node-text"
|
|
852
852
|
id="text-tree-view-checkboxes-8"
|
|
853
853
|
>Settings</span>
|
|
854
854
|
</span>
|
|
@@ -856,32 +856,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
856
856
|
</div>
|
|
857
857
|
</li>
|
|
858
858
|
<li
|
|
859
|
-
class="pf-
|
|
859
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
860
860
|
role="treeitem"
|
|
861
861
|
aria-expanded="true"
|
|
862
862
|
tabindex="0"
|
|
863
863
|
>
|
|
864
|
-
<div class="pf-
|
|
864
|
+
<div class="pf-v6-c-tree-view__content">
|
|
865
865
|
<label
|
|
866
|
-
class="pf-
|
|
866
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
867
867
|
tabindex="0"
|
|
868
868
|
for="check-tree-view-checkboxes-9"
|
|
869
869
|
>
|
|
870
|
-
<span class="pf-
|
|
870
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
871
871
|
<button
|
|
872
|
-
class="pf-
|
|
872
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
873
873
|
id="toggle-tree-view-checkboxes-9"
|
|
874
874
|
aria-label="Toggle"
|
|
875
875
|
aria-labelledby="toggle-tree-view-checkboxes-9 text-tree-view-checkboxes-9"
|
|
876
876
|
>
|
|
877
|
-
<span class="pf-
|
|
877
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
878
878
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
879
879
|
</span>
|
|
880
880
|
</button>
|
|
881
|
-
<span class="pf-
|
|
882
|
-
<div class="pf-
|
|
881
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
882
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
883
883
|
<input
|
|
884
|
-
class="pf-
|
|
884
|
+
class="pf-v6-c-check__input"
|
|
885
885
|
type="checkbox"
|
|
886
886
|
id="check-tree-view-checkboxes-9"
|
|
887
887
|
aria-label="Select"
|
|
@@ -890,40 +890,40 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
890
890
|
</div>
|
|
891
891
|
</span>
|
|
892
892
|
<span
|
|
893
|
-
class="pf-
|
|
893
|
+
class="pf-v6-c-tree-view__node-text"
|
|
894
894
|
id="text-tree-view-checkboxes-9"
|
|
895
895
|
>Current</span>
|
|
896
896
|
</span>
|
|
897
897
|
</label>
|
|
898
898
|
</div>
|
|
899
|
-
<ul class="pf-
|
|
899
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
900
900
|
<li
|
|
901
|
-
class="pf-
|
|
901
|
+
class="pf-v6-c-tree-view__list-item"
|
|
902
902
|
role="treeitem"
|
|
903
903
|
aria-expanded="false"
|
|
904
904
|
tabindex="0"
|
|
905
905
|
>
|
|
906
|
-
<div class="pf-
|
|
906
|
+
<div class="pf-v6-c-tree-view__content">
|
|
907
907
|
<label
|
|
908
|
-
class="pf-
|
|
908
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
909
909
|
tabindex="0"
|
|
910
910
|
for="check-tree-view-checkboxes-10"
|
|
911
911
|
>
|
|
912
|
-
<span class="pf-
|
|
912
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
913
913
|
<button
|
|
914
|
-
class="pf-
|
|
914
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
915
915
|
id="toggle-tree-view-checkboxes-10"
|
|
916
916
|
aria-label="Toggle"
|
|
917
917
|
aria-labelledby="toggle-tree-view-checkboxes-10 text-tree-view-checkboxes-10"
|
|
918
918
|
>
|
|
919
|
-
<span class="pf-
|
|
919
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
920
920
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
921
921
|
</span>
|
|
922
922
|
</button>
|
|
923
|
-
<span class="pf-
|
|
924
|
-
<div class="pf-
|
|
923
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
924
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
925
925
|
<input
|
|
926
|
-
class="pf-
|
|
926
|
+
class="pf-v6-c-check__input"
|
|
927
927
|
type="checkbox"
|
|
928
928
|
id="check-tree-view-checkboxes-10"
|
|
929
929
|
aria-label="Select"
|
|
@@ -932,7 +932,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
932
932
|
</div>
|
|
933
933
|
</span>
|
|
934
934
|
<span
|
|
935
|
-
class="pf-
|
|
935
|
+
class="pf-v6-c-tree-view__node-text"
|
|
936
936
|
id="text-tree-view-checkboxes-10"
|
|
937
937
|
>Loader app 1</span>
|
|
938
938
|
</span>
|
|
@@ -940,21 +940,21 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
940
940
|
</div>
|
|
941
941
|
</li>
|
|
942
942
|
<li
|
|
943
|
-
class="pf-
|
|
943
|
+
class="pf-v6-c-tree-view__list-item"
|
|
944
944
|
role="treeitem"
|
|
945
945
|
tabindex="-1"
|
|
946
946
|
>
|
|
947
|
-
<div class="pf-
|
|
947
|
+
<div class="pf-v6-c-tree-view__content">
|
|
948
948
|
<label
|
|
949
|
-
class="pf-
|
|
949
|
+
class="pf-v6-c-tree-view__node"
|
|
950
950
|
tabindex="0"
|
|
951
951
|
for="check-tree-view-checkboxes-11"
|
|
952
952
|
>
|
|
953
|
-
<span class="pf-
|
|
954
|
-
<span class="pf-
|
|
955
|
-
<div class="pf-
|
|
953
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
954
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
955
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
956
956
|
<input
|
|
957
|
-
class="pf-
|
|
957
|
+
class="pf-v6-c-check__input"
|
|
958
958
|
type="checkbox"
|
|
959
959
|
checked
|
|
960
960
|
id="check-tree-view-checkboxes-11"
|
|
@@ -964,7 +964,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
964
964
|
</div>
|
|
965
965
|
</span>
|
|
966
966
|
<span
|
|
967
|
-
class="pf-
|
|
967
|
+
class="pf-v6-c-tree-view__node-text"
|
|
968
968
|
id="text-tree-view-checkboxes-11"
|
|
969
969
|
>Loader app 2</span>
|
|
970
970
|
</span>
|
|
@@ -972,21 +972,21 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
972
972
|
</div>
|
|
973
973
|
</li>
|
|
974
974
|
<li
|
|
975
|
-
class="pf-
|
|
975
|
+
class="pf-v6-c-tree-view__list-item"
|
|
976
976
|
role="treeitem"
|
|
977
977
|
tabindex="-1"
|
|
978
978
|
>
|
|
979
|
-
<div class="pf-
|
|
979
|
+
<div class="pf-v6-c-tree-view__content">
|
|
980
980
|
<label
|
|
981
|
-
class="pf-
|
|
981
|
+
class="pf-v6-c-tree-view__node"
|
|
982
982
|
tabindex="0"
|
|
983
983
|
for="check-tree-view-checkboxes-12"
|
|
984
984
|
>
|
|
985
|
-
<span class="pf-
|
|
986
|
-
<span class="pf-
|
|
987
|
-
<div class="pf-
|
|
985
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
986
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
987
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
988
988
|
<input
|
|
989
|
-
class="pf-
|
|
989
|
+
class="pf-v6-c-check__input"
|
|
990
990
|
type="checkbox"
|
|
991
991
|
id="check-tree-view-checkboxes-12"
|
|
992
992
|
aria-label="Select"
|
|
@@ -995,7 +995,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
995
995
|
</div>
|
|
996
996
|
</span>
|
|
997
997
|
<span
|
|
998
|
-
class="pf-
|
|
998
|
+
class="pf-v6-c-tree-view__node-text"
|
|
999
999
|
id="text-tree-view-checkboxes-12"
|
|
1000
1000
|
>Loader app 3</span>
|
|
1001
1001
|
</span>
|
|
@@ -1009,32 +1009,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1009
1009
|
</ul>
|
|
1010
1010
|
</li>
|
|
1011
1011
|
<li
|
|
1012
|
-
class="pf-
|
|
1012
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1013
1013
|
role="treeitem"
|
|
1014
1014
|
aria-expanded="false"
|
|
1015
1015
|
tabindex="0"
|
|
1016
1016
|
>
|
|
1017
|
-
<div class="pf-
|
|
1017
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1018
1018
|
<label
|
|
1019
|
-
class="pf-
|
|
1019
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
1020
1020
|
tabindex="0"
|
|
1021
1021
|
for="check-tree-view-checkboxes-13"
|
|
1022
1022
|
>
|
|
1023
|
-
<span class="pf-
|
|
1023
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1024
1024
|
<button
|
|
1025
|
-
class="pf-
|
|
1025
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
1026
1026
|
id="toggle-tree-view-checkboxes-13"
|
|
1027
1027
|
aria-label="Toggle"
|
|
1028
1028
|
aria-labelledby="toggle-tree-view-checkboxes-13 text-tree-view-checkboxes-13"
|
|
1029
1029
|
>
|
|
1030
|
-
<span class="pf-
|
|
1030
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1031
1031
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1032
1032
|
</span>
|
|
1033
1033
|
</button>
|
|
1034
|
-
<span class="pf-
|
|
1035
|
-
<div class="pf-
|
|
1034
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
1035
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
1036
1036
|
<input
|
|
1037
|
-
class="pf-
|
|
1037
|
+
class="pf-v6-c-check__input"
|
|
1038
1038
|
type="checkbox"
|
|
1039
1039
|
id="check-tree-view-checkboxes-13"
|
|
1040
1040
|
aria-label="Select"
|
|
@@ -1043,7 +1043,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1043
1043
|
</div>
|
|
1044
1044
|
</span>
|
|
1045
1045
|
<span
|
|
1046
|
-
class="pf-
|
|
1046
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1047
1047
|
id="text-tree-view-checkboxes-13"
|
|
1048
1048
|
>Cost management</span>
|
|
1049
1049
|
</span>
|
|
@@ -1051,32 +1051,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1051
1051
|
</div>
|
|
1052
1052
|
</li>
|
|
1053
1053
|
<li
|
|
1054
|
-
class="pf-
|
|
1054
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1055
1055
|
role="treeitem"
|
|
1056
1056
|
aria-expanded="false"
|
|
1057
1057
|
tabindex="0"
|
|
1058
1058
|
>
|
|
1059
|
-
<div class="pf-
|
|
1059
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1060
1060
|
<label
|
|
1061
|
-
class="pf-
|
|
1061
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
1062
1062
|
tabindex="0"
|
|
1063
1063
|
for="check-tree-view-checkboxes-14"
|
|
1064
1064
|
>
|
|
1065
|
-
<span class="pf-
|
|
1065
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1066
1066
|
<button
|
|
1067
|
-
class="pf-
|
|
1067
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
1068
1068
|
id="toggle-tree-view-checkboxes-14"
|
|
1069
1069
|
aria-label="Toggle"
|
|
1070
1070
|
aria-labelledby="toggle-tree-view-checkboxes-14 text-tree-view-checkboxes-14"
|
|
1071
1071
|
>
|
|
1072
|
-
<span class="pf-
|
|
1072
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1073
1073
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1074
1074
|
</span>
|
|
1075
1075
|
</button>
|
|
1076
|
-
<span class="pf-
|
|
1077
|
-
<div class="pf-
|
|
1076
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
1077
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
1078
1078
|
<input
|
|
1079
|
-
class="pf-
|
|
1079
|
+
class="pf-v6-c-check__input"
|
|
1080
1080
|
type="checkbox"
|
|
1081
1081
|
id="check-tree-view-checkboxes-14"
|
|
1082
1082
|
aria-label="Select"
|
|
@@ -1085,7 +1085,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1085
1085
|
</div>
|
|
1086
1086
|
</span>
|
|
1087
1087
|
<span
|
|
1088
|
-
class="pf-
|
|
1088
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1089
1089
|
id="text-tree-view-checkboxes-14"
|
|
1090
1090
|
>Sources</span>
|
|
1091
1091
|
</span>
|
|
@@ -1093,32 +1093,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1093
1093
|
</div>
|
|
1094
1094
|
</li>
|
|
1095
1095
|
<li
|
|
1096
|
-
class="pf-
|
|
1096
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1097
1097
|
role="treeitem"
|
|
1098
1098
|
aria-expanded="false"
|
|
1099
1099
|
tabindex="0"
|
|
1100
1100
|
>
|
|
1101
|
-
<div class="pf-
|
|
1101
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1102
1102
|
<label
|
|
1103
|
-
class="pf-
|
|
1103
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
1104
1104
|
tabindex="0"
|
|
1105
1105
|
for="check-tree-view-checkboxes-15"
|
|
1106
1106
|
>
|
|
1107
|
-
<span class="pf-
|
|
1107
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1108
1108
|
<button
|
|
1109
|
-
class="pf-
|
|
1109
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
1110
1110
|
id="toggle-tree-view-checkboxes-15"
|
|
1111
1111
|
aria-label="Toggle"
|
|
1112
1112
|
aria-labelledby="toggle-tree-view-checkboxes-15 text-tree-view-checkboxes-15"
|
|
1113
1113
|
>
|
|
1114
|
-
<span class="pf-
|
|
1114
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1115
1115
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1116
1116
|
</span>
|
|
1117
1117
|
</button>
|
|
1118
|
-
<span class="pf-
|
|
1119
|
-
<div class="pf-
|
|
1118
|
+
<span class="pf-v6-c-tree-view__node-check">
|
|
1119
|
+
<div class="pf-v6-c-check pf-m-standalone">
|
|
1120
1120
|
<input
|
|
1121
|
-
class="pf-
|
|
1121
|
+
class="pf-v6-c-check__input"
|
|
1122
1122
|
type="checkbox"
|
|
1123
1123
|
checked
|
|
1124
1124
|
id="check-tree-view-checkboxes-15"
|
|
@@ -1128,7 +1128,7 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1128
1128
|
</div>
|
|
1129
1129
|
</span>
|
|
1130
1130
|
<span
|
|
1131
|
-
class="pf-
|
|
1131
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1132
1132
|
id="text-tree-view-checkboxes-15"
|
|
1133
1133
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
1134
1134
|
</span>
|
|
@@ -1143,80 +1143,80 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1143
1143
|
### With icons
|
|
1144
1144
|
|
|
1145
1145
|
```html
|
|
1146
|
-
<div class="pf-
|
|
1147
|
-
<ul class="pf-
|
|
1146
|
+
<div class="pf-v6-c-tree-view">
|
|
1147
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
1148
1148
|
<li
|
|
1149
|
-
class="pf-
|
|
1149
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1150
1150
|
role="treeitem"
|
|
1151
1151
|
aria-expanded="true"
|
|
1152
1152
|
tabindex="0"
|
|
1153
1153
|
>
|
|
1154
|
-
<div class="pf-
|
|
1155
|
-
<button class="pf-
|
|
1156
|
-
<span class="pf-
|
|
1157
|
-
<span class="pf-
|
|
1158
|
-
<span class="pf-
|
|
1154
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1155
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1156
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1157
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1158
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1159
1159
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1160
1160
|
</span>
|
|
1161
1161
|
</span>
|
|
1162
|
-
<span class="pf-
|
|
1162
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1163
1163
|
<i class="fas fa-folder-open" aria-hidden="true"></i>
|
|
1164
1164
|
</span>
|
|
1165
|
-
<span class="pf-
|
|
1165
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
1166
1166
|
</span>
|
|
1167
1167
|
</button>
|
|
1168
1168
|
</div>
|
|
1169
|
-
<ul class="pf-
|
|
1169
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1170
1170
|
<li
|
|
1171
|
-
class="pf-
|
|
1171
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1172
1172
|
role="treeitem"
|
|
1173
1173
|
aria-expanded="true"
|
|
1174
1174
|
tabindex="0"
|
|
1175
1175
|
>
|
|
1176
|
-
<div class="pf-
|
|
1177
|
-
<button class="pf-
|
|
1178
|
-
<span class="pf-
|
|
1179
|
-
<span class="pf-
|
|
1180
|
-
<span class="pf-
|
|
1176
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1177
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1178
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1179
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1180
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1181
1181
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1182
1182
|
</span>
|
|
1183
1183
|
</span>
|
|
1184
|
-
<span class="pf-
|
|
1184
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1185
1185
|
<i class="fas fa-folder-open" aria-hidden="true"></i>
|
|
1186
1186
|
</span>
|
|
1187
|
-
<span class="pf-
|
|
1187
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
1188
1188
|
</span>
|
|
1189
1189
|
</button>
|
|
1190
1190
|
</div>
|
|
1191
|
-
<ul class="pf-
|
|
1191
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1192
1192
|
<li
|
|
1193
|
-
class="pf-
|
|
1193
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1194
1194
|
role="treeitem"
|
|
1195
1195
|
tabindex="-1"
|
|
1196
1196
|
>
|
|
1197
|
-
<div class="pf-
|
|
1198
|
-
<button class="pf-
|
|
1199
|
-
<span class="pf-
|
|
1200
|
-
<span class="pf-
|
|
1197
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1198
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1199
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1200
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1201
1201
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1202
1202
|
</span>
|
|
1203
|
-
<span class="pf-
|
|
1203
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1204
1204
|
</span>
|
|
1205
1205
|
</button>
|
|
1206
1206
|
</div>
|
|
1207
1207
|
</li>
|
|
1208
1208
|
<li
|
|
1209
|
-
class="pf-
|
|
1209
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1210
1210
|
role="treeitem"
|
|
1211
1211
|
tabindex="-1"
|
|
1212
1212
|
>
|
|
1213
|
-
<div class="pf-
|
|
1214
|
-
<button class="pf-
|
|
1215
|
-
<span class="pf-
|
|
1216
|
-
<span class="pf-
|
|
1213
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1214
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
1215
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1216
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1217
1217
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1218
1218
|
</span>
|
|
1219
|
-
<span class="pf-
|
|
1219
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
1220
1220
|
</span>
|
|
1221
1221
|
</button>
|
|
1222
1222
|
</div>
|
|
@@ -1224,121 +1224,121 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1224
1224
|
</ul>
|
|
1225
1225
|
</li>
|
|
1226
1226
|
<li
|
|
1227
|
-
class="pf-
|
|
1227
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1228
1228
|
role="treeitem"
|
|
1229
1229
|
aria-expanded="true"
|
|
1230
1230
|
tabindex="0"
|
|
1231
1231
|
>
|
|
1232
|
-
<div class="pf-
|
|
1233
|
-
<button class="pf-
|
|
1234
|
-
<span class="pf-
|
|
1235
|
-
<span class="pf-
|
|
1236
|
-
<span class="pf-
|
|
1232
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1233
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1234
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1235
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1236
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1237
1237
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1238
1238
|
</span>
|
|
1239
1239
|
</span>
|
|
1240
|
-
<span class="pf-
|
|
1240
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1241
1241
|
<i class="fas fa-folder-open" aria-hidden="true"></i>
|
|
1242
1242
|
</span>
|
|
1243
|
-
<span class="pf-
|
|
1243
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
1244
1244
|
</span>
|
|
1245
1245
|
</button>
|
|
1246
1246
|
</div>
|
|
1247
|
-
<ul class="pf-
|
|
1247
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1248
1248
|
<li
|
|
1249
|
-
class="pf-
|
|
1249
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1250
1250
|
role="treeitem"
|
|
1251
1251
|
aria-expanded="false"
|
|
1252
1252
|
tabindex="0"
|
|
1253
1253
|
>
|
|
1254
|
-
<div class="pf-
|
|
1255
|
-
<button class="pf-
|
|
1256
|
-
<span class="pf-
|
|
1257
|
-
<span class="pf-
|
|
1258
|
-
<span class="pf-
|
|
1254
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1255
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1256
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1257
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1258
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1259
1259
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1260
1260
|
</span>
|
|
1261
1261
|
</span>
|
|
1262
|
-
<span class="pf-
|
|
1262
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1263
1263
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1264
1264
|
</span>
|
|
1265
|
-
<span class="pf-
|
|
1265
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1266
1266
|
</span>
|
|
1267
1267
|
</button>
|
|
1268
1268
|
</div>
|
|
1269
1269
|
</li>
|
|
1270
1270
|
<li
|
|
1271
|
-
class="pf-
|
|
1271
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1272
1272
|
role="treeitem"
|
|
1273
1273
|
aria-expanded="true"
|
|
1274
1274
|
tabindex="0"
|
|
1275
1275
|
>
|
|
1276
|
-
<div class="pf-
|
|
1277
|
-
<button class="pf-
|
|
1278
|
-
<span class="pf-
|
|
1279
|
-
<span class="pf-
|
|
1280
|
-
<span class="pf-
|
|
1276
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1277
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1278
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1279
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1280
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1281
1281
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1282
1282
|
</span>
|
|
1283
1283
|
</span>
|
|
1284
|
-
<span class="pf-
|
|
1284
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1285
1285
|
<i class="fas fa-folder-open" aria-hidden="true"></i>
|
|
1286
1286
|
</span>
|
|
1287
|
-
<span class="pf-
|
|
1287
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
1288
1288
|
</span>
|
|
1289
1289
|
</button>
|
|
1290
1290
|
</div>
|
|
1291
|
-
<ul class="pf-
|
|
1291
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1292
1292
|
<li
|
|
1293
|
-
class="pf-
|
|
1293
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1294
1294
|
role="treeitem"
|
|
1295
1295
|
aria-expanded="false"
|
|
1296
1296
|
tabindex="0"
|
|
1297
1297
|
>
|
|
1298
|
-
<div class="pf-
|
|
1299
|
-
<button class="pf-
|
|
1300
|
-
<span class="pf-
|
|
1301
|
-
<span class="pf-
|
|
1302
|
-
<span class="pf-
|
|
1298
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1299
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1300
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1301
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1302
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1303
1303
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1304
1304
|
</span>
|
|
1305
1305
|
</span>
|
|
1306
|
-
<span class="pf-
|
|
1306
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1307
1307
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1308
1308
|
</span>
|
|
1309
|
-
<span class="pf-
|
|
1309
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
1310
1310
|
</span>
|
|
1311
1311
|
</button>
|
|
1312
1312
|
</div>
|
|
1313
1313
|
</li>
|
|
1314
1314
|
<li
|
|
1315
|
-
class="pf-
|
|
1315
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1316
1316
|
role="treeitem"
|
|
1317
1317
|
tabindex="-1"
|
|
1318
1318
|
>
|
|
1319
|
-
<div class="pf-
|
|
1320
|
-
<button class="pf-
|
|
1321
|
-
<span class="pf-
|
|
1322
|
-
<span class="pf-
|
|
1319
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1320
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1321
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1322
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1323
1323
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1324
1324
|
</span>
|
|
1325
|
-
<span class="pf-
|
|
1325
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
1326
1326
|
</span>
|
|
1327
1327
|
</button>
|
|
1328
1328
|
</div>
|
|
1329
1329
|
</li>
|
|
1330
1330
|
<li
|
|
1331
|
-
class="pf-
|
|
1331
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1332
1332
|
role="treeitem"
|
|
1333
1333
|
tabindex="-1"
|
|
1334
1334
|
>
|
|
1335
|
-
<div class="pf-
|
|
1336
|
-
<button class="pf-
|
|
1337
|
-
<span class="pf-
|
|
1338
|
-
<span class="pf-
|
|
1335
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1336
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1337
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1338
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1339
1339
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1340
1340
|
</span>
|
|
1341
|
-
<span class="pf-
|
|
1341
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
1342
1342
|
</span>
|
|
1343
1343
|
</button>
|
|
1344
1344
|
</div>
|
|
@@ -1350,68 +1350,68 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1350
1350
|
</ul>
|
|
1351
1351
|
</li>
|
|
1352
1352
|
<li
|
|
1353
|
-
class="pf-
|
|
1353
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1354
1354
|
role="treeitem"
|
|
1355
1355
|
aria-expanded="false"
|
|
1356
1356
|
tabindex="0"
|
|
1357
1357
|
>
|
|
1358
|
-
<div class="pf-
|
|
1359
|
-
<button class="pf-
|
|
1360
|
-
<span class="pf-
|
|
1361
|
-
<span class="pf-
|
|
1362
|
-
<span class="pf-
|
|
1358
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1359
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1360
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1361
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1362
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1363
1363
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1364
1364
|
</span>
|
|
1365
1365
|
</span>
|
|
1366
|
-
<span class="pf-
|
|
1366
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1367
1367
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1368
1368
|
</span>
|
|
1369
|
-
<span class="pf-
|
|
1369
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
1370
1370
|
</span>
|
|
1371
1371
|
</button>
|
|
1372
1372
|
</div>
|
|
1373
1373
|
</li>
|
|
1374
1374
|
<li
|
|
1375
|
-
class="pf-
|
|
1375
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1376
1376
|
role="treeitem"
|
|
1377
1377
|
aria-expanded="false"
|
|
1378
1378
|
tabindex="0"
|
|
1379
1379
|
>
|
|
1380
|
-
<div class="pf-
|
|
1381
|
-
<button class="pf-
|
|
1382
|
-
<span class="pf-
|
|
1383
|
-
<span class="pf-
|
|
1384
|
-
<span class="pf-
|
|
1380
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1381
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1382
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1383
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1384
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1385
1385
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1386
1386
|
</span>
|
|
1387
1387
|
</span>
|
|
1388
|
-
<span class="pf-
|
|
1388
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1389
1389
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1390
1390
|
</span>
|
|
1391
|
-
<span class="pf-
|
|
1391
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
1392
1392
|
</span>
|
|
1393
1393
|
</button>
|
|
1394
1394
|
</div>
|
|
1395
1395
|
</li>
|
|
1396
1396
|
<li
|
|
1397
|
-
class="pf-
|
|
1397
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1398
1398
|
role="treeitem"
|
|
1399
1399
|
aria-expanded="false"
|
|
1400
1400
|
tabindex="0"
|
|
1401
1401
|
>
|
|
1402
|
-
<div class="pf-
|
|
1403
|
-
<button class="pf-
|
|
1404
|
-
<span class="pf-
|
|
1405
|
-
<span class="pf-
|
|
1406
|
-
<span class="pf-
|
|
1402
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1403
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1404
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1405
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1406
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1407
1407
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1408
1408
|
</span>
|
|
1409
1409
|
</span>
|
|
1410
|
-
<span class="pf-
|
|
1410
|
+
<span class="pf-v6-c-tree-view__node-icon">
|
|
1411
1411
|
<i class="fas fa-folder" aria-hidden="true"></i>
|
|
1412
1412
|
</span>
|
|
1413
1413
|
<span
|
|
1414
|
-
class="pf-
|
|
1414
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1415
1415
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
1416
1416
|
</span>
|
|
1417
1417
|
</button>
|
|
@@ -1425,74 +1425,74 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1425
1425
|
### With badges
|
|
1426
1426
|
|
|
1427
1427
|
```html
|
|
1428
|
-
<div class="pf-
|
|
1429
|
-
<ul class="pf-
|
|
1428
|
+
<div class="pf-v6-c-tree-view">
|
|
1429
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
1430
1430
|
<li
|
|
1431
|
-
class="pf-
|
|
1431
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1432
1432
|
role="treeitem"
|
|
1433
1433
|
aria-expanded="true"
|
|
1434
1434
|
tabindex="0"
|
|
1435
1435
|
>
|
|
1436
|
-
<div class="pf-
|
|
1437
|
-
<button class="pf-
|
|
1438
|
-
<span class="pf-
|
|
1439
|
-
<span class="pf-
|
|
1440
|
-
<span class="pf-
|
|
1436
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1437
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1438
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1439
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1440
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1441
1441
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1442
1442
|
</span>
|
|
1443
1443
|
</span>
|
|
1444
|
-
<span class="pf-
|
|
1445
|
-
<span class="pf-
|
|
1446
|
-
<span class="pf-
|
|
1444
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
1445
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1446
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1447
1447
|
</span>
|
|
1448
1448
|
</span>
|
|
1449
1449
|
</button>
|
|
1450
1450
|
</div>
|
|
1451
|
-
<ul class="pf-
|
|
1451
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1452
1452
|
<li
|
|
1453
|
-
class="pf-
|
|
1453
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1454
1454
|
role="treeitem"
|
|
1455
1455
|
aria-expanded="true"
|
|
1456
1456
|
tabindex="0"
|
|
1457
1457
|
>
|
|
1458
|
-
<div class="pf-
|
|
1459
|
-
<button class="pf-
|
|
1460
|
-
<span class="pf-
|
|
1461
|
-
<span class="pf-
|
|
1462
|
-
<span class="pf-
|
|
1458
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1459
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1460
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1461
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1462
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1463
1463
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1464
1464
|
</span>
|
|
1465
1465
|
</span>
|
|
1466
|
-
<span class="pf-
|
|
1467
|
-
<span class="pf-
|
|
1468
|
-
<span class="pf-
|
|
1466
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
1467
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1468
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1469
1469
|
</span>
|
|
1470
1470
|
</span>
|
|
1471
1471
|
</button>
|
|
1472
1472
|
</div>
|
|
1473
|
-
<ul class="pf-
|
|
1473
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1474
1474
|
<li
|
|
1475
|
-
class="pf-
|
|
1475
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1476
1476
|
role="treeitem"
|
|
1477
1477
|
tabindex="-1"
|
|
1478
1478
|
>
|
|
1479
|
-
<div class="pf-
|
|
1480
|
-
<button class="pf-
|
|
1481
|
-
<span class="pf-
|
|
1482
|
-
<span class="pf-
|
|
1479
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1480
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1481
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1482
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1483
1483
|
</span>
|
|
1484
1484
|
</button>
|
|
1485
1485
|
</div>
|
|
1486
1486
|
</li>
|
|
1487
1487
|
<li
|
|
1488
|
-
class="pf-
|
|
1488
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1489
1489
|
role="treeitem"
|
|
1490
1490
|
tabindex="-1"
|
|
1491
1491
|
>
|
|
1492
|
-
<div class="pf-
|
|
1493
|
-
<button class="pf-
|
|
1494
|
-
<span class="pf-
|
|
1495
|
-
<span class="pf-
|
|
1492
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1493
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
1494
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1495
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
1496
1496
|
</span>
|
|
1497
1497
|
</button>
|
|
1498
1498
|
</div>
|
|
@@ -1500,115 +1500,115 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1500
1500
|
</ul>
|
|
1501
1501
|
</li>
|
|
1502
1502
|
<li
|
|
1503
|
-
class="pf-
|
|
1503
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1504
1504
|
role="treeitem"
|
|
1505
1505
|
aria-expanded="true"
|
|
1506
1506
|
tabindex="0"
|
|
1507
1507
|
>
|
|
1508
|
-
<div class="pf-
|
|
1509
|
-
<button class="pf-
|
|
1510
|
-
<span class="pf-
|
|
1511
|
-
<span class="pf-
|
|
1512
|
-
<span class="pf-
|
|
1508
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1509
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1510
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1511
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1512
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1513
1513
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1514
1514
|
</span>
|
|
1515
1515
|
</span>
|
|
1516
|
-
<span class="pf-
|
|
1517
|
-
<span class="pf-
|
|
1518
|
-
<span class="pf-
|
|
1516
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
1517
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1518
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1519
1519
|
</span>
|
|
1520
1520
|
</span>
|
|
1521
1521
|
</button>
|
|
1522
1522
|
</div>
|
|
1523
|
-
<ul class="pf-
|
|
1523
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1524
1524
|
<li
|
|
1525
|
-
class="pf-
|
|
1525
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1526
1526
|
role="treeitem"
|
|
1527
1527
|
aria-expanded="false"
|
|
1528
1528
|
tabindex="0"
|
|
1529
1529
|
>
|
|
1530
|
-
<div class="pf-
|
|
1531
|
-
<button class="pf-
|
|
1532
|
-
<span class="pf-
|
|
1533
|
-
<span class="pf-
|
|
1534
|
-
<span class="pf-
|
|
1530
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1531
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1532
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1533
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1534
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1535
1535
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1536
1536
|
</span>
|
|
1537
1537
|
</span>
|
|
1538
|
-
<span class="pf-
|
|
1539
|
-
<span class="pf-
|
|
1540
|
-
<span class="pf-
|
|
1538
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1539
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1540
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1541
1541
|
</span>
|
|
1542
1542
|
</span>
|
|
1543
1543
|
</button>
|
|
1544
1544
|
</div>
|
|
1545
1545
|
</li>
|
|
1546
1546
|
<li
|
|
1547
|
-
class="pf-
|
|
1547
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1548
1548
|
role="treeitem"
|
|
1549
1549
|
aria-expanded="true"
|
|
1550
1550
|
tabindex="0"
|
|
1551
1551
|
>
|
|
1552
|
-
<div class="pf-
|
|
1553
|
-
<button class="pf-
|
|
1554
|
-
<span class="pf-
|
|
1555
|
-
<span class="pf-
|
|
1556
|
-
<span class="pf-
|
|
1552
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1553
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1554
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1555
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1556
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1557
1557
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1558
1558
|
</span>
|
|
1559
1559
|
</span>
|
|
1560
|
-
<span class="pf-
|
|
1561
|
-
<span class="pf-
|
|
1562
|
-
<span class="pf-
|
|
1560
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
1561
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1562
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1563
1563
|
</span>
|
|
1564
1564
|
</span>
|
|
1565
1565
|
</button>
|
|
1566
1566
|
</div>
|
|
1567
|
-
<ul class="pf-
|
|
1567
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1568
1568
|
<li
|
|
1569
|
-
class="pf-
|
|
1569
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1570
1570
|
role="treeitem"
|
|
1571
1571
|
aria-expanded="false"
|
|
1572
1572
|
tabindex="0"
|
|
1573
1573
|
>
|
|
1574
|
-
<div class="pf-
|
|
1575
|
-
<button class="pf-
|
|
1576
|
-
<span class="pf-
|
|
1577
|
-
<span class="pf-
|
|
1578
|
-
<span class="pf-
|
|
1574
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1575
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1576
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1577
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1578
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1579
1579
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1580
1580
|
</span>
|
|
1581
1581
|
</span>
|
|
1582
|
-
<span class="pf-
|
|
1583
|
-
<span class="pf-
|
|
1584
|
-
<span class="pf-
|
|
1582
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
1583
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1584
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1585
1585
|
</span>
|
|
1586
1586
|
</span>
|
|
1587
1587
|
</button>
|
|
1588
1588
|
</div>
|
|
1589
1589
|
</li>
|
|
1590
1590
|
<li
|
|
1591
|
-
class="pf-
|
|
1591
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1592
1592
|
role="treeitem"
|
|
1593
1593
|
tabindex="-1"
|
|
1594
1594
|
>
|
|
1595
|
-
<div class="pf-
|
|
1596
|
-
<button class="pf-
|
|
1597
|
-
<span class="pf-
|
|
1598
|
-
<span class="pf-
|
|
1595
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1596
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1597
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1598
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
1599
1599
|
</span>
|
|
1600
1600
|
</button>
|
|
1601
1601
|
</div>
|
|
1602
1602
|
</li>
|
|
1603
1603
|
<li
|
|
1604
|
-
class="pf-
|
|
1604
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1605
1605
|
role="treeitem"
|
|
1606
1606
|
tabindex="-1"
|
|
1607
1607
|
>
|
|
1608
|
-
<div class="pf-
|
|
1609
|
-
<button class="pf-
|
|
1610
|
-
<span class="pf-
|
|
1611
|
-
<span class="pf-
|
|
1608
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1609
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1610
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1611
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
1612
1612
|
</span>
|
|
1613
1613
|
</button>
|
|
1614
1614
|
</div>
|
|
@@ -1620,68 +1620,68 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1620
1620
|
</ul>
|
|
1621
1621
|
</li>
|
|
1622
1622
|
<li
|
|
1623
|
-
class="pf-
|
|
1623
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1624
1624
|
role="treeitem"
|
|
1625
1625
|
aria-expanded="false"
|
|
1626
1626
|
tabindex="0"
|
|
1627
1627
|
>
|
|
1628
|
-
<div class="pf-
|
|
1629
|
-
<button class="pf-
|
|
1630
|
-
<span class="pf-
|
|
1631
|
-
<span class="pf-
|
|
1632
|
-
<span class="pf-
|
|
1628
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1629
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1630
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1631
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1632
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1633
1633
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1634
1634
|
</span>
|
|
1635
1635
|
</span>
|
|
1636
|
-
<span class="pf-
|
|
1637
|
-
<span class="pf-
|
|
1638
|
-
<span class="pf-
|
|
1636
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
1637
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1638
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1639
1639
|
</span>
|
|
1640
1640
|
</span>
|
|
1641
1641
|
</button>
|
|
1642
1642
|
</div>
|
|
1643
1643
|
</li>
|
|
1644
1644
|
<li
|
|
1645
|
-
class="pf-
|
|
1645
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1646
1646
|
role="treeitem"
|
|
1647
1647
|
aria-expanded="false"
|
|
1648
1648
|
tabindex="0"
|
|
1649
1649
|
>
|
|
1650
|
-
<div class="pf-
|
|
1651
|
-
<button class="pf-
|
|
1652
|
-
<span class="pf-
|
|
1653
|
-
<span class="pf-
|
|
1654
|
-
<span class="pf-
|
|
1650
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1651
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1652
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1653
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1654
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1655
1655
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1656
1656
|
</span>
|
|
1657
1657
|
</span>
|
|
1658
|
-
<span class="pf-
|
|
1659
|
-
<span class="pf-
|
|
1660
|
-
<span class="pf-
|
|
1658
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
1659
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1660
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1661
1661
|
</span>
|
|
1662
1662
|
</span>
|
|
1663
1663
|
</button>
|
|
1664
1664
|
</div>
|
|
1665
1665
|
</li>
|
|
1666
1666
|
<li
|
|
1667
|
-
class="pf-
|
|
1667
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1668
1668
|
role="treeitem"
|
|
1669
1669
|
aria-expanded="false"
|
|
1670
1670
|
tabindex="0"
|
|
1671
1671
|
>
|
|
1672
|
-
<div class="pf-
|
|
1673
|
-
<button class="pf-
|
|
1674
|
-
<span class="pf-
|
|
1675
|
-
<span class="pf-
|
|
1676
|
-
<span class="pf-
|
|
1672
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1673
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1674
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1675
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1676
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1677
1677
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1678
1678
|
</span>
|
|
1679
1679
|
</span>
|
|
1680
1680
|
<span
|
|
1681
|
-
class="pf-
|
|
1681
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1682
1682
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
1683
|
-
<span class="pf-
|
|
1684
|
-
<span class="pf-
|
|
1683
|
+
<span class="pf-v6-c-tree-view__node-count">
|
|
1684
|
+
<span class="pf-v6-c-badge pf-m-read">2</span>
|
|
1685
1685
|
</span>
|
|
1686
1686
|
</span>
|
|
1687
1687
|
</button>
|
|
@@ -1695,29 +1695,29 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1695
1695
|
### With action item
|
|
1696
1696
|
|
|
1697
1697
|
```html
|
|
1698
|
-
<div class="pf-
|
|
1699
|
-
<ul class="pf-
|
|
1698
|
+
<div class="pf-v6-c-tree-view">
|
|
1699
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
1700
1700
|
<li
|
|
1701
|
-
class="pf-
|
|
1701
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1702
1702
|
role="treeitem"
|
|
1703
1703
|
aria-expanded="true"
|
|
1704
1704
|
tabindex="0"
|
|
1705
1705
|
>
|
|
1706
|
-
<div class="pf-
|
|
1707
|
-
<button class="pf-
|
|
1708
|
-
<span class="pf-
|
|
1709
|
-
<span class="pf-
|
|
1710
|
-
<span class="pf-
|
|
1706
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1707
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1708
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1709
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1710
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1711
1711
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1712
1712
|
</span>
|
|
1713
1713
|
</span>
|
|
1714
|
-
<span class="pf-
|
|
1714
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
1715
1715
|
</span>
|
|
1716
1716
|
</button>
|
|
1717
1717
|
|
|
1718
|
-
<div class="pf-
|
|
1718
|
+
<div class="pf-v6-c-tree-view__action">
|
|
1719
1719
|
<button
|
|
1720
|
-
class="pf-
|
|
1720
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1721
1721
|
type="button"
|
|
1722
1722
|
aria-label="Actions"
|
|
1723
1723
|
>
|
|
@@ -1725,28 +1725,28 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1725
1725
|
</button>
|
|
1726
1726
|
</div>
|
|
1727
1727
|
</div>
|
|
1728
|
-
<ul class="pf-
|
|
1728
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1729
1729
|
<li
|
|
1730
|
-
class="pf-
|
|
1730
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1731
1731
|
role="treeitem"
|
|
1732
1732
|
aria-expanded="true"
|
|
1733
1733
|
tabindex="0"
|
|
1734
1734
|
>
|
|
1735
|
-
<div class="pf-
|
|
1736
|
-
<button class="pf-
|
|
1737
|
-
<span class="pf-
|
|
1738
|
-
<span class="pf-
|
|
1739
|
-
<span class="pf-
|
|
1735
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1736
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1737
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1738
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1739
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1740
1740
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1741
1741
|
</span>
|
|
1742
1742
|
</span>
|
|
1743
|
-
<span class="pf-
|
|
1743
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
1744
1744
|
</span>
|
|
1745
1745
|
</button>
|
|
1746
1746
|
|
|
1747
|
-
<div class="pf-
|
|
1747
|
+
<div class="pf-v6-c-tree-view__action">
|
|
1748
1748
|
<button
|
|
1749
|
-
class="pf-
|
|
1749
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1750
1750
|
type="button"
|
|
1751
1751
|
aria-label="Copy"
|
|
1752
1752
|
>
|
|
@@ -1754,29 +1754,29 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1754
1754
|
</button>
|
|
1755
1755
|
</div>
|
|
1756
1756
|
</div>
|
|
1757
|
-
<ul class="pf-
|
|
1757
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1758
1758
|
<li
|
|
1759
|
-
class="pf-
|
|
1759
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1760
1760
|
role="treeitem"
|
|
1761
1761
|
tabindex="-1"
|
|
1762
1762
|
>
|
|
1763
|
-
<div class="pf-
|
|
1764
|
-
<button class="pf-
|
|
1765
|
-
<span class="pf-
|
|
1766
|
-
<span class="pf-
|
|
1763
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1764
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1765
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1766
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1767
1767
|
</span>
|
|
1768
1768
|
</button>
|
|
1769
1769
|
</div>
|
|
1770
1770
|
</li>
|
|
1771
1771
|
<li
|
|
1772
|
-
class="pf-
|
|
1772
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1773
1773
|
role="treeitem"
|
|
1774
1774
|
tabindex="-1"
|
|
1775
1775
|
>
|
|
1776
|
-
<div class="pf-
|
|
1777
|
-
<button class="pf-
|
|
1778
|
-
<span class="pf-
|
|
1779
|
-
<span class="pf-
|
|
1776
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1777
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
1778
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1779
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
1780
1780
|
</span>
|
|
1781
1781
|
</button>
|
|
1782
1782
|
</div>
|
|
@@ -1784,26 +1784,26 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1784
1784
|
</ul>
|
|
1785
1785
|
</li>
|
|
1786
1786
|
<li
|
|
1787
|
-
class="pf-
|
|
1787
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1788
1788
|
role="treeitem"
|
|
1789
1789
|
aria-expanded="true"
|
|
1790
1790
|
tabindex="0"
|
|
1791
1791
|
>
|
|
1792
|
-
<div class="pf-
|
|
1793
|
-
<button class="pf-
|
|
1794
|
-
<span class="pf-
|
|
1795
|
-
<span class="pf-
|
|
1796
|
-
<span class="pf-
|
|
1792
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1793
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1794
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1795
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1796
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1797
1797
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1798
1798
|
</span>
|
|
1799
1799
|
</span>
|
|
1800
|
-
<span class="pf-
|
|
1800
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
1801
1801
|
</span>
|
|
1802
1802
|
</button>
|
|
1803
1803
|
|
|
1804
|
-
<div class="pf-
|
|
1804
|
+
<div class="pf-v6-c-tree-view__action">
|
|
1805
1805
|
<button
|
|
1806
|
-
class="pf-
|
|
1806
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1807
1807
|
type="button"
|
|
1808
1808
|
aria-label="Action"
|
|
1809
1809
|
>
|
|
@@ -1811,86 +1811,86 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1811
1811
|
</button>
|
|
1812
1812
|
</div>
|
|
1813
1813
|
</div>
|
|
1814
|
-
<ul class="pf-
|
|
1814
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1815
1815
|
<li
|
|
1816
|
-
class="pf-
|
|
1816
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1817
1817
|
role="treeitem"
|
|
1818
1818
|
aria-expanded="false"
|
|
1819
1819
|
tabindex="0"
|
|
1820
1820
|
>
|
|
1821
|
-
<div class="pf-
|
|
1822
|
-
<button class="pf-
|
|
1823
|
-
<span class="pf-
|
|
1824
|
-
<span class="pf-
|
|
1825
|
-
<span class="pf-
|
|
1821
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1822
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1823
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1824
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1825
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1826
1826
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1827
1827
|
</span>
|
|
1828
1828
|
</span>
|
|
1829
|
-
<span class="pf-
|
|
1829
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
1830
1830
|
</span>
|
|
1831
1831
|
</button>
|
|
1832
1832
|
</div>
|
|
1833
1833
|
</li>
|
|
1834
1834
|
<li
|
|
1835
|
-
class="pf-
|
|
1835
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1836
1836
|
role="treeitem"
|
|
1837
1837
|
aria-expanded="true"
|
|
1838
1838
|
tabindex="0"
|
|
1839
1839
|
>
|
|
1840
|
-
<div class="pf-
|
|
1841
|
-
<button class="pf-
|
|
1842
|
-
<span class="pf-
|
|
1843
|
-
<span class="pf-
|
|
1844
|
-
<span class="pf-
|
|
1840
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1841
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1842
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1843
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1844
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1845
1845
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1846
1846
|
</span>
|
|
1847
1847
|
</span>
|
|
1848
|
-
<span class="pf-
|
|
1848
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
1849
1849
|
</span>
|
|
1850
1850
|
</button>
|
|
1851
1851
|
</div>
|
|
1852
|
-
<ul class="pf-
|
|
1852
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
1853
1853
|
<li
|
|
1854
|
-
class="pf-
|
|
1854
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1855
1855
|
role="treeitem"
|
|
1856
1856
|
aria-expanded="false"
|
|
1857
1857
|
tabindex="0"
|
|
1858
1858
|
>
|
|
1859
|
-
<div class="pf-
|
|
1860
|
-
<button class="pf-
|
|
1861
|
-
<span class="pf-
|
|
1862
|
-
<span class="pf-
|
|
1863
|
-
<span class="pf-
|
|
1859
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1860
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1861
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1862
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1863
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1864
1864
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1865
1865
|
</span>
|
|
1866
1866
|
</span>
|
|
1867
|
-
<span class="pf-
|
|
1867
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
1868
1868
|
</span>
|
|
1869
1869
|
</button>
|
|
1870
1870
|
</div>
|
|
1871
1871
|
</li>
|
|
1872
1872
|
<li
|
|
1873
|
-
class="pf-
|
|
1873
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1874
1874
|
role="treeitem"
|
|
1875
1875
|
tabindex="-1"
|
|
1876
1876
|
>
|
|
1877
|
-
<div class="pf-
|
|
1878
|
-
<button class="pf-
|
|
1879
|
-
<span class="pf-
|
|
1880
|
-
<span class="pf-
|
|
1877
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1878
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1879
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1880
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
1881
1881
|
</span>
|
|
1882
1882
|
</button>
|
|
1883
1883
|
</div>
|
|
1884
1884
|
</li>
|
|
1885
1885
|
<li
|
|
1886
|
-
class="pf-
|
|
1886
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1887
1887
|
role="treeitem"
|
|
1888
1888
|
tabindex="-1"
|
|
1889
1889
|
>
|
|
1890
|
-
<div class="pf-
|
|
1891
|
-
<button class="pf-
|
|
1892
|
-
<span class="pf-
|
|
1893
|
-
<span class="pf-
|
|
1890
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1891
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1892
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1893
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
1894
1894
|
</span>
|
|
1895
1895
|
</button>
|
|
1896
1896
|
</div>
|
|
@@ -1902,66 +1902,66 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1902
1902
|
</ul>
|
|
1903
1903
|
</li>
|
|
1904
1904
|
<li
|
|
1905
|
-
class="pf-
|
|
1905
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1906
1906
|
role="treeitem"
|
|
1907
1907
|
aria-expanded="false"
|
|
1908
1908
|
tabindex="0"
|
|
1909
1909
|
>
|
|
1910
|
-
<div class="pf-
|
|
1911
|
-
<button class="pf-
|
|
1912
|
-
<span class="pf-
|
|
1913
|
-
<span class="pf-
|
|
1914
|
-
<span class="pf-
|
|
1910
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1911
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1912
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1913
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1914
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1915
1915
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1916
1916
|
</span>
|
|
1917
1917
|
</span>
|
|
1918
|
-
<span class="pf-
|
|
1918
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
1919
1919
|
</span>
|
|
1920
1920
|
</button>
|
|
1921
1921
|
</div>
|
|
1922
1922
|
</li>
|
|
1923
1923
|
<li
|
|
1924
|
-
class="pf-
|
|
1924
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1925
1925
|
role="treeitem"
|
|
1926
1926
|
aria-expanded="false"
|
|
1927
1927
|
tabindex="0"
|
|
1928
1928
|
>
|
|
1929
|
-
<div class="pf-
|
|
1930
|
-
<button class="pf-
|
|
1931
|
-
<span class="pf-
|
|
1932
|
-
<span class="pf-
|
|
1933
|
-
<span class="pf-
|
|
1929
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1930
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1931
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1932
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1933
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1934
1934
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1935
1935
|
</span>
|
|
1936
1936
|
</span>
|
|
1937
|
-
<span class="pf-
|
|
1937
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
1938
1938
|
</span>
|
|
1939
1939
|
</button>
|
|
1940
1940
|
</div>
|
|
1941
1941
|
</li>
|
|
1942
1942
|
<li
|
|
1943
|
-
class="pf-
|
|
1943
|
+
class="pf-v6-c-tree-view__list-item"
|
|
1944
1944
|
role="treeitem"
|
|
1945
1945
|
aria-expanded="false"
|
|
1946
1946
|
tabindex="0"
|
|
1947
1947
|
>
|
|
1948
|
-
<div class="pf-
|
|
1949
|
-
<button class="pf-
|
|
1950
|
-
<span class="pf-
|
|
1951
|
-
<span class="pf-
|
|
1952
|
-
<span class="pf-
|
|
1948
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1949
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1950
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1951
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1952
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1953
1953
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1954
1954
|
</span>
|
|
1955
1955
|
</span>
|
|
1956
1956
|
<span
|
|
1957
|
-
class="pf-
|
|
1957
|
+
class="pf-v6-c-tree-view__node-text"
|
|
1958
1958
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
1959
1959
|
</span>
|
|
1960
1960
|
</button>
|
|
1961
1961
|
|
|
1962
|
-
<div class="pf-
|
|
1962
|
+
<div class="pf-v6-c-tree-view__action">
|
|
1963
1963
|
<button
|
|
1964
|
-
class="pf-
|
|
1964
|
+
class="pf-v6-c-button pf-m-plain"
|
|
1965
1965
|
type="button"
|
|
1966
1966
|
aria-label="Actions"
|
|
1967
1967
|
>
|
|
@@ -1978,87 +1978,87 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
1978
1978
|
### With non-expandable top level nodes
|
|
1979
1979
|
|
|
1980
1980
|
```html
|
|
1981
|
-
<div class="pf-
|
|
1982
|
-
<ul class="pf-
|
|
1981
|
+
<div class="pf-v6-c-tree-view">
|
|
1982
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
1983
1983
|
<li
|
|
1984
|
-
class="pf-
|
|
1984
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
1985
1985
|
role="treeitem"
|
|
1986
1986
|
aria-expanded="true"
|
|
1987
1987
|
tabindex="0"
|
|
1988
1988
|
>
|
|
1989
|
-
<div class="pf-
|
|
1990
|
-
<button class="pf-
|
|
1991
|
-
<span class="pf-
|
|
1992
|
-
<span class="pf-
|
|
1993
|
-
<span class="pf-
|
|
1989
|
+
<div class="pf-v6-c-tree-view__content">
|
|
1990
|
+
<button class="pf-v6-c-tree-view__node">
|
|
1991
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
1992
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
1993
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
1994
1994
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1995
1995
|
</span>
|
|
1996
1996
|
</span>
|
|
1997
|
-
<span class="pf-
|
|
1997
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
1998
1998
|
</span>
|
|
1999
1999
|
</button>
|
|
2000
2000
|
</div>
|
|
2001
|
-
<ul class="pf-
|
|
2001
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2002
2002
|
<li
|
|
2003
|
-
class="pf-
|
|
2003
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2004
2004
|
role="treeitem"
|
|
2005
2005
|
aria-expanded="true"
|
|
2006
2006
|
tabindex="0"
|
|
2007
2007
|
>
|
|
2008
|
-
<div class="pf-
|
|
2009
|
-
<button class="pf-
|
|
2010
|
-
<span class="pf-
|
|
2011
|
-
<span class="pf-
|
|
2012
|
-
<span class="pf-
|
|
2008
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2009
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2010
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2011
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2012
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2013
2013
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2014
2014
|
</span>
|
|
2015
2015
|
</span>
|
|
2016
|
-
<span class="pf-
|
|
2016
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
2017
2017
|
</span>
|
|
2018
2018
|
</button>
|
|
2019
2019
|
</div>
|
|
2020
|
-
<ul class="pf-
|
|
2020
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2021
2021
|
<li
|
|
2022
|
-
class="pf-
|
|
2022
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2023
2023
|
role="treeitem"
|
|
2024
2024
|
tabindex="-1"
|
|
2025
2025
|
>
|
|
2026
|
-
<div class="pf-
|
|
2027
|
-
<button class="pf-
|
|
2028
|
-
<span class="pf-
|
|
2029
|
-
<span class="pf-
|
|
2026
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2027
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2028
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2029
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2030
2030
|
</span>
|
|
2031
2031
|
</button>
|
|
2032
2032
|
</div>
|
|
2033
2033
|
</li>
|
|
2034
2034
|
<li
|
|
2035
|
-
class="pf-
|
|
2035
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2036
2036
|
role="treeitem"
|
|
2037
2037
|
tabindex="-1"
|
|
2038
2038
|
>
|
|
2039
|
-
<div class="pf-
|
|
2040
|
-
<button class="pf-
|
|
2041
|
-
<span class="pf-
|
|
2042
|
-
<span class="pf-
|
|
2039
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2040
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
2041
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2042
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
2043
2043
|
</span>
|
|
2044
2044
|
</button>
|
|
2045
2045
|
</div>
|
|
2046
2046
|
</li>
|
|
2047
2047
|
<li
|
|
2048
|
-
class="pf-
|
|
2048
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2049
2049
|
role="treeitem"
|
|
2050
2050
|
aria-expanded="false"
|
|
2051
2051
|
tabindex="0"
|
|
2052
2052
|
>
|
|
2053
|
-
<div class="pf-
|
|
2054
|
-
<button class="pf-
|
|
2055
|
-
<span class="pf-
|
|
2056
|
-
<span class="pf-
|
|
2057
|
-
<span class="pf-
|
|
2053
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2054
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2055
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2056
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2057
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2058
2058
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2059
2059
|
</span>
|
|
2060
2060
|
</span>
|
|
2061
|
-
<span class="pf-
|
|
2061
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
2062
2062
|
</span>
|
|
2063
2063
|
</button>
|
|
2064
2064
|
</div>
|
|
@@ -2066,116 +2066,116 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2066
2066
|
</ul>
|
|
2067
2067
|
</li>
|
|
2068
2068
|
<li
|
|
2069
|
-
class="pf-
|
|
2069
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2070
2070
|
role="treeitem"
|
|
2071
2071
|
aria-expanded="true"
|
|
2072
2072
|
tabindex="0"
|
|
2073
2073
|
>
|
|
2074
|
-
<div class="pf-
|
|
2075
|
-
<button class="pf-
|
|
2076
|
-
<span class="pf-
|
|
2077
|
-
<span class="pf-
|
|
2078
|
-
<span class="pf-
|
|
2074
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2075
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2076
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2077
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2078
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2079
2079
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2080
2080
|
</span>
|
|
2081
2081
|
</span>
|
|
2082
|
-
<span class="pf-
|
|
2082
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
2083
2083
|
</span>
|
|
2084
2084
|
</button>
|
|
2085
2085
|
</div>
|
|
2086
|
-
<ul class="pf-
|
|
2086
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2087
2087
|
<li
|
|
2088
|
-
class="pf-
|
|
2088
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2089
2089
|
role="treeitem"
|
|
2090
2090
|
tabindex="-1"
|
|
2091
2091
|
>
|
|
2092
|
-
<div class="pf-
|
|
2093
|
-
<button class="pf-
|
|
2094
|
-
<span class="pf-
|
|
2095
|
-
<span class="pf-
|
|
2092
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2093
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2094
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2095
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2096
2096
|
</span>
|
|
2097
2097
|
</button>
|
|
2098
2098
|
</div>
|
|
2099
2099
|
</li>
|
|
2100
2100
|
<li
|
|
2101
|
-
class="pf-
|
|
2101
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2102
2102
|
role="treeitem"
|
|
2103
2103
|
aria-expanded="false"
|
|
2104
2104
|
tabindex="0"
|
|
2105
2105
|
>
|
|
2106
|
-
<div class="pf-
|
|
2107
|
-
<button class="pf-
|
|
2108
|
-
<span class="pf-
|
|
2109
|
-
<span class="pf-
|
|
2110
|
-
<span class="pf-
|
|
2106
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2107
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2108
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2109
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2110
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2111
2111
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2112
2112
|
</span>
|
|
2113
2113
|
</span>
|
|
2114
|
-
<span class="pf-
|
|
2114
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2115
2115
|
</span>
|
|
2116
2116
|
</button>
|
|
2117
2117
|
</div>
|
|
2118
2118
|
</li>
|
|
2119
2119
|
<li
|
|
2120
|
-
class="pf-
|
|
2120
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2121
2121
|
role="treeitem"
|
|
2122
2122
|
aria-expanded="true"
|
|
2123
2123
|
tabindex="0"
|
|
2124
2124
|
>
|
|
2125
|
-
<div class="pf-
|
|
2126
|
-
<button class="pf-
|
|
2127
|
-
<span class="pf-
|
|
2128
|
-
<span class="pf-
|
|
2129
|
-
<span class="pf-
|
|
2125
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2126
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2127
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2128
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2129
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2130
2130
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2131
2131
|
</span>
|
|
2132
2132
|
</span>
|
|
2133
|
-
<span class="pf-
|
|
2133
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
2134
2134
|
</span>
|
|
2135
2135
|
</button>
|
|
2136
2136
|
</div>
|
|
2137
|
-
<ul class="pf-
|
|
2137
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2138
2138
|
<li
|
|
2139
|
-
class="pf-
|
|
2139
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2140
2140
|
role="treeitem"
|
|
2141
2141
|
aria-expanded="false"
|
|
2142
2142
|
tabindex="0"
|
|
2143
2143
|
>
|
|
2144
|
-
<div class="pf-
|
|
2145
|
-
<button class="pf-
|
|
2146
|
-
<span class="pf-
|
|
2147
|
-
<span class="pf-
|
|
2148
|
-
<span class="pf-
|
|
2144
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2145
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2146
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2147
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2148
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2149
2149
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2150
2150
|
</span>
|
|
2151
2151
|
</span>
|
|
2152
|
-
<span class="pf-
|
|
2152
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
2153
2153
|
</span>
|
|
2154
2154
|
</button>
|
|
2155
2155
|
</div>
|
|
2156
2156
|
</li>
|
|
2157
2157
|
<li
|
|
2158
|
-
class="pf-
|
|
2158
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2159
2159
|
role="treeitem"
|
|
2160
2160
|
tabindex="-1"
|
|
2161
2161
|
>
|
|
2162
|
-
<div class="pf-
|
|
2163
|
-
<button class="pf-
|
|
2164
|
-
<span class="pf-
|
|
2165
|
-
<span class="pf-
|
|
2162
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2163
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2164
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2165
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
2166
2166
|
</span>
|
|
2167
2167
|
</button>
|
|
2168
2168
|
</div>
|
|
2169
2169
|
</li>
|
|
2170
2170
|
<li
|
|
2171
|
-
class="pf-
|
|
2171
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2172
2172
|
role="treeitem"
|
|
2173
2173
|
tabindex="-1"
|
|
2174
2174
|
>
|
|
2175
|
-
<div class="pf-
|
|
2176
|
-
<button class="pf-
|
|
2177
|
-
<span class="pf-
|
|
2178
|
-
<span class="pf-
|
|
2175
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2176
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2177
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2178
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
2179
2179
|
</span>
|
|
2180
2180
|
</button>
|
|
2181
2181
|
</div>
|
|
@@ -2186,40 +2186,40 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2186
2186
|
</li>
|
|
2187
2187
|
</ul>
|
|
2188
2188
|
</li>
|
|
2189
|
-
<li class="pf-
|
|
2190
|
-
<div class="pf-
|
|
2191
|
-
<button class="pf-
|
|
2192
|
-
<span class="pf-
|
|
2193
|
-
<span class="pf-
|
|
2189
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2190
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2191
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2192
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2193
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
2194
2194
|
</span>
|
|
2195
2195
|
</button>
|
|
2196
2196
|
</div>
|
|
2197
2197
|
</li>
|
|
2198
2198
|
<li
|
|
2199
|
-
class="pf-
|
|
2199
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2200
2200
|
role="treeitem"
|
|
2201
2201
|
aria-expanded="false"
|
|
2202
2202
|
tabindex="0"
|
|
2203
2203
|
>
|
|
2204
|
-
<div class="pf-
|
|
2205
|
-
<button class="pf-
|
|
2206
|
-
<span class="pf-
|
|
2207
|
-
<span class="pf-
|
|
2208
|
-
<span class="pf-
|
|
2204
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2205
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2206
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2207
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2208
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2209
2209
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2210
2210
|
</span>
|
|
2211
2211
|
</span>
|
|
2212
|
-
<span class="pf-
|
|
2212
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
2213
2213
|
</span>
|
|
2214
2214
|
</button>
|
|
2215
2215
|
</div>
|
|
2216
2216
|
</li>
|
|
2217
|
-
<li class="pf-
|
|
2218
|
-
<div class="pf-
|
|
2219
|
-
<button class="pf-
|
|
2220
|
-
<span class="pf-
|
|
2217
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2218
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2219
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2220
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2221
2221
|
<span
|
|
2222
|
-
class="pf-
|
|
2222
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2223
2223
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
2224
2224
|
</span>
|
|
2225
2225
|
</button>
|
|
@@ -2233,127 +2233,127 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2233
2233
|
### With selectable, expandable nodes
|
|
2234
2234
|
|
|
2235
2235
|
```html
|
|
2236
|
-
<div class="pf-
|
|
2237
|
-
<ul class="pf-
|
|
2236
|
+
<div class="pf-v6-c-tree-view">
|
|
2237
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
2238
2238
|
<li
|
|
2239
|
-
class="pf-
|
|
2239
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2240
2240
|
role="treeitem"
|
|
2241
2241
|
aria-expanded="true"
|
|
2242
2242
|
tabindex="0"
|
|
2243
2243
|
>
|
|
2244
|
-
<div class="pf-
|
|
2244
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2245
2245
|
<div
|
|
2246
|
-
class="pf-
|
|
2246
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2247
2247
|
tabindex="0"
|
|
2248
2248
|
id="node-tree-view-selectable-expandable-1"
|
|
2249
2249
|
aria-label="Select"
|
|
2250
2250
|
aria-labelledby="node-tree-view-selectable-expandable-1 text-tree-view-selectable-expandable-1"
|
|
2251
2251
|
>
|
|
2252
|
-
<span class="pf-
|
|
2252
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2253
2253
|
<button
|
|
2254
|
-
class="pf-
|
|
2254
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2255
2255
|
id="toggle-tree-view-selectable-expandable-1"
|
|
2256
2256
|
aria-label="Toggle"
|
|
2257
2257
|
aria-labelledby="toggle-tree-view-selectable-expandable-1 text-tree-view-selectable-expandable-1"
|
|
2258
2258
|
>
|
|
2259
|
-
<span class="pf-
|
|
2259
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2260
2260
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2261
2261
|
</span>
|
|
2262
2262
|
</button>
|
|
2263
2263
|
<button
|
|
2264
|
-
class="pf-
|
|
2264
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2265
2265
|
id="text-tree-view-selectable-expandable-1"
|
|
2266
2266
|
>Application launcher</button>
|
|
2267
2267
|
</span>
|
|
2268
2268
|
</div>
|
|
2269
2269
|
</div>
|
|
2270
|
-
<ul class="pf-
|
|
2270
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2271
2271
|
<li
|
|
2272
|
-
class="pf-
|
|
2272
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2273
2273
|
role="treeitem"
|
|
2274
2274
|
aria-expanded="true"
|
|
2275
2275
|
tabindex="0"
|
|
2276
2276
|
>
|
|
2277
|
-
<div class="pf-
|
|
2277
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2278
2278
|
<div
|
|
2279
|
-
class="pf-
|
|
2279
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2280
2280
|
tabindex="0"
|
|
2281
2281
|
id="node-tree-view-selectable-expandable-2"
|
|
2282
2282
|
aria-label="Select"
|
|
2283
2283
|
aria-labelledby="node-tree-view-selectable-expandable-2 text-tree-view-selectable-expandable-2"
|
|
2284
2284
|
>
|
|
2285
|
-
<span class="pf-
|
|
2285
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2286
2286
|
<button
|
|
2287
|
-
class="pf-
|
|
2287
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2288
2288
|
id="toggle-tree-view-selectable-expandable-2"
|
|
2289
2289
|
aria-label="Toggle"
|
|
2290
2290
|
aria-labelledby="toggle-tree-view-selectable-expandable-2 text-tree-view-selectable-expandable-2"
|
|
2291
2291
|
>
|
|
2292
|
-
<span class="pf-
|
|
2292
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2293
2293
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2294
2294
|
</span>
|
|
2295
2295
|
</button>
|
|
2296
2296
|
<button
|
|
2297
|
-
class="pf-
|
|
2297
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2298
2298
|
id="text-tree-view-selectable-expandable-2"
|
|
2299
2299
|
>Application 1</button>
|
|
2300
2300
|
</span>
|
|
2301
2301
|
</div>
|
|
2302
2302
|
</div>
|
|
2303
|
-
<ul class="pf-
|
|
2303
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2304
2304
|
<li
|
|
2305
|
-
class="pf-
|
|
2305
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2306
2306
|
role="treeitem"
|
|
2307
2307
|
tabindex="-1"
|
|
2308
2308
|
>
|
|
2309
|
-
<div class="pf-
|
|
2310
|
-
<button class="pf-
|
|
2311
|
-
<span class="pf-
|
|
2312
|
-
<span class="pf-
|
|
2309
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2310
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2311
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2312
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2313
2313
|
</span>
|
|
2314
2314
|
</button>
|
|
2315
2315
|
</div>
|
|
2316
2316
|
</li>
|
|
2317
2317
|
<li
|
|
2318
|
-
class="pf-
|
|
2318
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2319
2319
|
role="treeitem"
|
|
2320
2320
|
tabindex="-1"
|
|
2321
2321
|
>
|
|
2322
|
-
<div class="pf-
|
|
2323
|
-
<button class="pf-
|
|
2324
|
-
<span class="pf-
|
|
2325
|
-
<span class="pf-
|
|
2322
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2323
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2324
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2325
|
+
<span class="pf-v6-c-tree-view__node-text">Options</span>
|
|
2326
2326
|
</span>
|
|
2327
2327
|
</button>
|
|
2328
2328
|
</div>
|
|
2329
2329
|
</li>
|
|
2330
2330
|
<li
|
|
2331
|
-
class="pf-
|
|
2331
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2332
2332
|
role="treeitem"
|
|
2333
2333
|
aria-expanded="false"
|
|
2334
2334
|
tabindex="0"
|
|
2335
2335
|
>
|
|
2336
|
-
<div class="pf-
|
|
2336
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2337
2337
|
<div
|
|
2338
|
-
class="pf-
|
|
2338
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2339
2339
|
tabindex="0"
|
|
2340
2340
|
id="node-tree-view-selectable-expandable-3"
|
|
2341
2341
|
aria-label="Select"
|
|
2342
2342
|
aria-labelledby="node-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
|
|
2343
2343
|
>
|
|
2344
|
-
<span class="pf-
|
|
2344
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2345
2345
|
<button
|
|
2346
|
-
class="pf-
|
|
2346
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2347
2347
|
id="toggle-tree-view-selectable-expandable-3"
|
|
2348
2348
|
aria-label="Toggle"
|
|
2349
2349
|
aria-labelledby="toggle-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
|
|
2350
2350
|
>
|
|
2351
|
-
<span class="pf-
|
|
2351
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2352
2352
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2353
2353
|
</span>
|
|
2354
2354
|
</button>
|
|
2355
2355
|
<button
|
|
2356
|
-
class="pf-
|
|
2356
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2357
2357
|
id="text-tree-view-selectable-expandable-3"
|
|
2358
2358
|
>Loader</button>
|
|
2359
2359
|
</span>
|
|
@@ -2363,78 +2363,78 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2363
2363
|
</ul>
|
|
2364
2364
|
</li>
|
|
2365
2365
|
<li
|
|
2366
|
-
class="pf-
|
|
2366
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2367
2367
|
role="treeitem"
|
|
2368
2368
|
aria-expanded="true"
|
|
2369
2369
|
tabindex="0"
|
|
2370
2370
|
>
|
|
2371
|
-
<div class="pf-
|
|
2371
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2372
2372
|
<div
|
|
2373
|
-
class="pf-
|
|
2373
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2374
2374
|
tabindex="0"
|
|
2375
2375
|
id="node-tree-view-selectable-expandable-4"
|
|
2376
2376
|
aria-label="Select"
|
|
2377
2377
|
aria-labelledby="node-tree-view-selectable-expandable-4 text-tree-view-selectable-expandable-4"
|
|
2378
2378
|
>
|
|
2379
|
-
<span class="pf-
|
|
2379
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2380
2380
|
<button
|
|
2381
|
-
class="pf-
|
|
2381
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2382
2382
|
id="toggle-tree-view-selectable-expandable-4"
|
|
2383
2383
|
aria-label="Toggle"
|
|
2384
2384
|
aria-labelledby="toggle-tree-view-selectable-expandable-4 text-tree-view-selectable-expandable-4"
|
|
2385
2385
|
>
|
|
2386
|
-
<span class="pf-
|
|
2386
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2387
2387
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2388
2388
|
</span>
|
|
2389
2389
|
</button>
|
|
2390
2390
|
<button
|
|
2391
|
-
class="pf-
|
|
2391
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2392
2392
|
id="text-tree-view-selectable-expandable-4"
|
|
2393
2393
|
>Application 2</button>
|
|
2394
2394
|
</span>
|
|
2395
2395
|
</div>
|
|
2396
2396
|
</div>
|
|
2397
|
-
<ul class="pf-
|
|
2397
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2398
2398
|
<li
|
|
2399
|
-
class="pf-
|
|
2399
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2400
2400
|
role="treeitem"
|
|
2401
2401
|
tabindex="-1"
|
|
2402
2402
|
>
|
|
2403
|
-
<div class="pf-
|
|
2404
|
-
<button class="pf-
|
|
2405
|
-
<span class="pf-
|
|
2406
|
-
<span class="pf-
|
|
2403
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2404
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2405
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2406
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2407
2407
|
</span>
|
|
2408
2408
|
</button>
|
|
2409
2409
|
</div>
|
|
2410
2410
|
</li>
|
|
2411
2411
|
<li
|
|
2412
|
-
class="pf-
|
|
2412
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2413
2413
|
role="treeitem"
|
|
2414
2414
|
aria-expanded="false"
|
|
2415
2415
|
tabindex="0"
|
|
2416
2416
|
>
|
|
2417
|
-
<div class="pf-
|
|
2417
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2418
2418
|
<div
|
|
2419
|
-
class="pf-
|
|
2419
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2420
2420
|
tabindex="0"
|
|
2421
2421
|
id="node-tree-view-selectable-expandable-5"
|
|
2422
2422
|
aria-label="Select"
|
|
2423
2423
|
aria-labelledby="node-tree-view-selectable-expandable-5 text-tree-view-selectable-expandable-5"
|
|
2424
2424
|
>
|
|
2425
|
-
<span class="pf-
|
|
2425
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2426
2426
|
<button
|
|
2427
|
-
class="pf-
|
|
2427
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2428
2428
|
id="toggle-tree-view-selectable-expandable-5"
|
|
2429
2429
|
aria-label="Toggle"
|
|
2430
2430
|
aria-labelledby="toggle-tree-view-selectable-expandable-5 text-tree-view-selectable-expandable-5"
|
|
2431
2431
|
>
|
|
2432
|
-
<span class="pf-
|
|
2432
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2433
2433
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2434
2434
|
</span>
|
|
2435
2435
|
</button>
|
|
2436
2436
|
<button
|
|
2437
|
-
class="pf-
|
|
2437
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2438
2438
|
id="text-tree-view-selectable-expandable-5"
|
|
2439
2439
|
>Settings</button>
|
|
2440
2440
|
</span>
|
|
@@ -2442,65 +2442,65 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2442
2442
|
</div>
|
|
2443
2443
|
</li>
|
|
2444
2444
|
<li
|
|
2445
|
-
class="pf-
|
|
2445
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2446
2446
|
role="treeitem"
|
|
2447
2447
|
aria-expanded="true"
|
|
2448
2448
|
tabindex="0"
|
|
2449
2449
|
>
|
|
2450
|
-
<div class="pf-
|
|
2450
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2451
2451
|
<div
|
|
2452
|
-
class="pf-
|
|
2452
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2453
2453
|
tabindex="0"
|
|
2454
2454
|
id="node-tree-view-selectable-expandable-6"
|
|
2455
2455
|
aria-label="Select"
|
|
2456
2456
|
aria-labelledby="node-tree-view-selectable-expandable-6 text-tree-view-selectable-expandable-6"
|
|
2457
2457
|
>
|
|
2458
|
-
<span class="pf-
|
|
2458
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2459
2459
|
<button
|
|
2460
|
-
class="pf-
|
|
2460
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2461
2461
|
id="toggle-tree-view-selectable-expandable-6"
|
|
2462
2462
|
aria-label="Toggle"
|
|
2463
2463
|
aria-labelledby="toggle-tree-view-selectable-expandable-6 text-tree-view-selectable-expandable-6"
|
|
2464
2464
|
>
|
|
2465
|
-
<span class="pf-
|
|
2465
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2466
2466
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2467
2467
|
</span>
|
|
2468
2468
|
</button>
|
|
2469
2469
|
<button
|
|
2470
|
-
class="pf-
|
|
2470
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2471
2471
|
id="text-tree-view-selectable-expandable-6"
|
|
2472
2472
|
>Loader</button>
|
|
2473
2473
|
</span>
|
|
2474
2474
|
</div>
|
|
2475
2475
|
</div>
|
|
2476
|
-
<ul class="pf-
|
|
2476
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2477
2477
|
<li
|
|
2478
|
-
class="pf-
|
|
2478
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2479
2479
|
role="treeitem"
|
|
2480
2480
|
aria-expanded="false"
|
|
2481
2481
|
tabindex="0"
|
|
2482
2482
|
>
|
|
2483
|
-
<div class="pf-
|
|
2483
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2484
2484
|
<div
|
|
2485
|
-
class="pf-
|
|
2485
|
+
class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current"
|
|
2486
2486
|
tabindex="0"
|
|
2487
2487
|
id="node-tree-view-selectable-expandable-7"
|
|
2488
2488
|
aria-label="Select"
|
|
2489
2489
|
aria-labelledby="node-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
|
|
2490
2490
|
>
|
|
2491
|
-
<span class="pf-
|
|
2491
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2492
2492
|
<button
|
|
2493
|
-
class="pf-
|
|
2493
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2494
2494
|
id="toggle-tree-view-selectable-expandable-7"
|
|
2495
2495
|
aria-label="Toggle"
|
|
2496
2496
|
aria-labelledby="toggle-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
|
|
2497
2497
|
>
|
|
2498
|
-
<span class="pf-
|
|
2498
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2499
2499
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2500
2500
|
</span>
|
|
2501
2501
|
</button>
|
|
2502
2502
|
<button
|
|
2503
|
-
class="pf-
|
|
2503
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2504
2504
|
id="text-tree-view-selectable-expandable-7"
|
|
2505
2505
|
>Loader app 1</button>
|
|
2506
2506
|
</span>
|
|
@@ -2508,27 +2508,27 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2508
2508
|
</div>
|
|
2509
2509
|
</li>
|
|
2510
2510
|
<li
|
|
2511
|
-
class="pf-
|
|
2511
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2512
2512
|
role="treeitem"
|
|
2513
2513
|
tabindex="-1"
|
|
2514
2514
|
>
|
|
2515
|
-
<div class="pf-
|
|
2516
|
-
<button class="pf-
|
|
2517
|
-
<span class="pf-
|
|
2518
|
-
<span class="pf-
|
|
2515
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2516
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2517
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2518
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
2519
2519
|
</span>
|
|
2520
2520
|
</button>
|
|
2521
2521
|
</div>
|
|
2522
2522
|
</li>
|
|
2523
2523
|
<li
|
|
2524
|
-
class="pf-
|
|
2524
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2525
2525
|
role="treeitem"
|
|
2526
2526
|
tabindex="-1"
|
|
2527
2527
|
>
|
|
2528
|
-
<div class="pf-
|
|
2529
|
-
<button class="pf-
|
|
2530
|
-
<span class="pf-
|
|
2531
|
-
<span class="pf-
|
|
2528
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2529
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2530
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2531
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
2532
2532
|
</span>
|
|
2533
2533
|
</button>
|
|
2534
2534
|
</div>
|
|
@@ -2540,32 +2540,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2540
2540
|
</ul>
|
|
2541
2541
|
</li>
|
|
2542
2542
|
<li
|
|
2543
|
-
class="pf-
|
|
2543
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2544
2544
|
role="treeitem"
|
|
2545
2545
|
aria-expanded="false"
|
|
2546
2546
|
tabindex="0"
|
|
2547
2547
|
>
|
|
2548
|
-
<div class="pf-
|
|
2548
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2549
2549
|
<div
|
|
2550
|
-
class="pf-
|
|
2550
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2551
2551
|
tabindex="0"
|
|
2552
2552
|
id="node-tree-view-selectable-expandable-8"
|
|
2553
2553
|
aria-label="Select"
|
|
2554
2554
|
aria-labelledby="node-tree-view-selectable-expandable-8 text-tree-view-selectable-expandable-8"
|
|
2555
2555
|
>
|
|
2556
|
-
<span class="pf-
|
|
2556
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2557
2557
|
<button
|
|
2558
|
-
class="pf-
|
|
2558
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2559
2559
|
id="toggle-tree-view-selectable-expandable-8"
|
|
2560
2560
|
aria-label="Toggle"
|
|
2561
2561
|
aria-labelledby="toggle-tree-view-selectable-expandable-8 text-tree-view-selectable-expandable-8"
|
|
2562
2562
|
>
|
|
2563
|
-
<span class="pf-
|
|
2563
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2564
2564
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2565
2565
|
</span>
|
|
2566
2566
|
</button>
|
|
2567
2567
|
<button
|
|
2568
|
-
class="pf-
|
|
2568
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2569
2569
|
id="text-tree-view-selectable-expandable-8"
|
|
2570
2570
|
>Cost management</button>
|
|
2571
2571
|
</span>
|
|
@@ -2573,32 +2573,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2573
2573
|
</div>
|
|
2574
2574
|
</li>
|
|
2575
2575
|
<li
|
|
2576
|
-
class="pf-
|
|
2576
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2577
2577
|
role="treeitem"
|
|
2578
2578
|
aria-expanded="false"
|
|
2579
2579
|
tabindex="0"
|
|
2580
2580
|
>
|
|
2581
|
-
<div class="pf-
|
|
2581
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2582
2582
|
<div
|
|
2583
|
-
class="pf-
|
|
2583
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2584
2584
|
tabindex="0"
|
|
2585
2585
|
id="node-tree-view-selectable-expandable-9"
|
|
2586
2586
|
aria-label="Select"
|
|
2587
2587
|
aria-labelledby="node-tree-view-selectable-expandable-9 text-tree-view-selectable-expandable-9"
|
|
2588
2588
|
>
|
|
2589
|
-
<span class="pf-
|
|
2589
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2590
2590
|
<button
|
|
2591
|
-
class="pf-
|
|
2591
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2592
2592
|
id="toggle-tree-view-selectable-expandable-9"
|
|
2593
2593
|
aria-label="Toggle"
|
|
2594
2594
|
aria-labelledby="toggle-tree-view-selectable-expandable-9 text-tree-view-selectable-expandable-9"
|
|
2595
2595
|
>
|
|
2596
|
-
<span class="pf-
|
|
2596
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2597
2597
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2598
2598
|
</span>
|
|
2599
2599
|
</button>
|
|
2600
2600
|
<button
|
|
2601
|
-
class="pf-
|
|
2601
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2602
2602
|
id="text-tree-view-selectable-expandable-9"
|
|
2603
2603
|
>Sources</button>
|
|
2604
2604
|
</span>
|
|
@@ -2606,32 +2606,32 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2606
2606
|
</div>
|
|
2607
2607
|
</li>
|
|
2608
2608
|
<li
|
|
2609
|
-
class="pf-
|
|
2609
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2610
2610
|
role="treeitem"
|
|
2611
2611
|
aria-expanded="false"
|
|
2612
2612
|
tabindex="0"
|
|
2613
2613
|
>
|
|
2614
|
-
<div class="pf-
|
|
2614
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2615
2615
|
<div
|
|
2616
|
-
class="pf-
|
|
2616
|
+
class="pf-v6-c-tree-view__node pf-m-selectable"
|
|
2617
2617
|
tabindex="0"
|
|
2618
2618
|
id="node-tree-view-selectable-expandable-10"
|
|
2619
2619
|
aria-label="Select"
|
|
2620
2620
|
aria-labelledby="node-tree-view-selectable-expandable-10 text-tree-view-selectable-expandable-10"
|
|
2621
2621
|
>
|
|
2622
|
-
<span class="pf-
|
|
2622
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2623
2623
|
<button
|
|
2624
|
-
class="pf-
|
|
2624
|
+
class="pf-v6-c-tree-view__node-toggle"
|
|
2625
2625
|
id="toggle-tree-view-selectable-expandable-10"
|
|
2626
2626
|
aria-label="Toggle"
|
|
2627
2627
|
aria-labelledby="toggle-tree-view-selectable-expandable-10 text-tree-view-selectable-expandable-10"
|
|
2628
2628
|
>
|
|
2629
|
-
<span class="pf-
|
|
2629
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2630
2630
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2631
2631
|
</span>
|
|
2632
2632
|
</button>
|
|
2633
2633
|
<button
|
|
2634
|
-
class="pf-
|
|
2634
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2635
2635
|
id="text-tree-view-selectable-expandable-10"
|
|
2636
2636
|
>This is a really really really long folder name that overflows from the width of the container.</button>
|
|
2637
2637
|
</span>
|
|
@@ -2646,87 +2646,87 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2646
2646
|
### Guides
|
|
2647
2647
|
|
|
2648
2648
|
```html
|
|
2649
|
-
<div class="pf-
|
|
2650
|
-
<ul class="pf-
|
|
2649
|
+
<div class="pf-v6-c-tree-view pf-m-guides">
|
|
2650
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
2651
2651
|
<li
|
|
2652
|
-
class="pf-
|
|
2652
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2653
2653
|
role="treeitem"
|
|
2654
2654
|
aria-expanded="true"
|
|
2655
2655
|
tabindex="0"
|
|
2656
2656
|
>
|
|
2657
|
-
<div class="pf-
|
|
2658
|
-
<button class="pf-
|
|
2659
|
-
<span class="pf-
|
|
2660
|
-
<span class="pf-
|
|
2661
|
-
<span class="pf-
|
|
2657
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2658
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2659
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2660
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2661
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2662
2662
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2663
2663
|
</span>
|
|
2664
2664
|
</span>
|
|
2665
|
-
<span class="pf-
|
|
2665
|
+
<span class="pf-v6-c-tree-view__node-text">Application launcher</span>
|
|
2666
2666
|
</span>
|
|
2667
2667
|
</button>
|
|
2668
2668
|
</div>
|
|
2669
|
-
<ul class="pf-
|
|
2669
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2670
2670
|
<li
|
|
2671
|
-
class="pf-
|
|
2671
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2672
2672
|
role="treeitem"
|
|
2673
2673
|
aria-expanded="true"
|
|
2674
2674
|
tabindex="0"
|
|
2675
2675
|
>
|
|
2676
|
-
<div class="pf-
|
|
2677
|
-
<button class="pf-
|
|
2678
|
-
<span class="pf-
|
|
2679
|
-
<span class="pf-
|
|
2680
|
-
<span class="pf-
|
|
2676
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2677
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2678
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2679
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2680
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2681
2681
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2682
2682
|
</span>
|
|
2683
2683
|
</span>
|
|
2684
|
-
<span class="pf-
|
|
2684
|
+
<span class="pf-v6-c-tree-view__node-text">Application 1</span>
|
|
2685
2685
|
</span>
|
|
2686
2686
|
</button>
|
|
2687
2687
|
</div>
|
|
2688
|
-
<ul class="pf-
|
|
2688
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2689
2689
|
<li
|
|
2690
|
-
class="pf-
|
|
2690
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2691
2691
|
role="treeitem"
|
|
2692
2692
|
tabindex="-1"
|
|
2693
2693
|
>
|
|
2694
|
-
<div class="pf-
|
|
2695
|
-
<button class="pf-
|
|
2696
|
-
<span class="pf-
|
|
2697
|
-
<span class="pf-
|
|
2694
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2695
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2696
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2697
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2698
2698
|
</span>
|
|
2699
2699
|
</button>
|
|
2700
2700
|
</div>
|
|
2701
2701
|
</li>
|
|
2702
2702
|
<li
|
|
2703
|
-
class="pf-
|
|
2703
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2704
2704
|
role="treeitem"
|
|
2705
2705
|
tabindex="-1"
|
|
2706
2706
|
>
|
|
2707
|
-
<div class="pf-
|
|
2708
|
-
<button class="pf-
|
|
2709
|
-
<span class="pf-
|
|
2710
|
-
<span class="pf-
|
|
2707
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2708
|
+
<button class="pf-v6-c-tree-view__node pf-m-current">
|
|
2709
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2710
|
+
<span class="pf-v6-c-tree-view__node-text">Current</span>
|
|
2711
2711
|
</span>
|
|
2712
2712
|
</button>
|
|
2713
2713
|
</div>
|
|
2714
2714
|
</li>
|
|
2715
2715
|
<li
|
|
2716
|
-
class="pf-
|
|
2716
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2717
2717
|
role="treeitem"
|
|
2718
2718
|
aria-expanded="false"
|
|
2719
2719
|
tabindex="0"
|
|
2720
2720
|
>
|
|
2721
|
-
<div class="pf-
|
|
2722
|
-
<button class="pf-
|
|
2723
|
-
<span class="pf-
|
|
2724
|
-
<span class="pf-
|
|
2725
|
-
<span class="pf-
|
|
2721
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2722
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2723
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2724
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2725
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2726
2726
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2727
2727
|
</span>
|
|
2728
2728
|
</span>
|
|
2729
|
-
<span class="pf-
|
|
2729
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
2730
2730
|
</span>
|
|
2731
2731
|
</button>
|
|
2732
2732
|
</div>
|
|
@@ -2734,116 +2734,116 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2734
2734
|
</ul>
|
|
2735
2735
|
</li>
|
|
2736
2736
|
<li
|
|
2737
|
-
class="pf-
|
|
2737
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2738
2738
|
role="treeitem"
|
|
2739
2739
|
aria-expanded="true"
|
|
2740
2740
|
tabindex="0"
|
|
2741
2741
|
>
|
|
2742
|
-
<div class="pf-
|
|
2743
|
-
<button class="pf-
|
|
2744
|
-
<span class="pf-
|
|
2745
|
-
<span class="pf-
|
|
2746
|
-
<span class="pf-
|
|
2742
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2743
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2744
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2745
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2746
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2747
2747
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2748
2748
|
</span>
|
|
2749
2749
|
</span>
|
|
2750
|
-
<span class="pf-
|
|
2750
|
+
<span class="pf-v6-c-tree-view__node-text">Application 2</span>
|
|
2751
2751
|
</span>
|
|
2752
2752
|
</button>
|
|
2753
2753
|
</div>
|
|
2754
|
-
<ul class="pf-
|
|
2754
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2755
2755
|
<li
|
|
2756
|
-
class="pf-
|
|
2756
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2757
2757
|
role="treeitem"
|
|
2758
2758
|
tabindex="-1"
|
|
2759
2759
|
>
|
|
2760
|
-
<div class="pf-
|
|
2761
|
-
<button class="pf-
|
|
2762
|
-
<span class="pf-
|
|
2763
|
-
<span class="pf-
|
|
2760
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2761
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2762
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2763
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2764
2764
|
</span>
|
|
2765
2765
|
</button>
|
|
2766
2766
|
</div>
|
|
2767
2767
|
</li>
|
|
2768
2768
|
<li
|
|
2769
|
-
class="pf-
|
|
2769
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2770
2770
|
role="treeitem"
|
|
2771
2771
|
aria-expanded="false"
|
|
2772
2772
|
tabindex="0"
|
|
2773
2773
|
>
|
|
2774
|
-
<div class="pf-
|
|
2775
|
-
<button class="pf-
|
|
2776
|
-
<span class="pf-
|
|
2777
|
-
<span class="pf-
|
|
2778
|
-
<span class="pf-
|
|
2774
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2775
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2776
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2777
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2778
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2779
2779
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2780
2780
|
</span>
|
|
2781
2781
|
</span>
|
|
2782
|
-
<span class="pf-
|
|
2782
|
+
<span class="pf-v6-c-tree-view__node-text">Settings</span>
|
|
2783
2783
|
</span>
|
|
2784
2784
|
</button>
|
|
2785
2785
|
</div>
|
|
2786
2786
|
</li>
|
|
2787
2787
|
<li
|
|
2788
|
-
class="pf-
|
|
2788
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2789
2789
|
role="treeitem"
|
|
2790
2790
|
aria-expanded="true"
|
|
2791
2791
|
tabindex="0"
|
|
2792
2792
|
>
|
|
2793
|
-
<div class="pf-
|
|
2794
|
-
<button class="pf-
|
|
2795
|
-
<span class="pf-
|
|
2796
|
-
<span class="pf-
|
|
2797
|
-
<span class="pf-
|
|
2793
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2794
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2795
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2796
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2797
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2798
2798
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2799
2799
|
</span>
|
|
2800
2800
|
</span>
|
|
2801
|
-
<span class="pf-
|
|
2801
|
+
<span class="pf-v6-c-tree-view__node-text">Loader</span>
|
|
2802
2802
|
</span>
|
|
2803
2803
|
</button>
|
|
2804
2804
|
</div>
|
|
2805
|
-
<ul class="pf-
|
|
2805
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2806
2806
|
<li
|
|
2807
|
-
class="pf-
|
|
2807
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2808
2808
|
role="treeitem"
|
|
2809
2809
|
aria-expanded="false"
|
|
2810
2810
|
tabindex="0"
|
|
2811
2811
|
>
|
|
2812
|
-
<div class="pf-
|
|
2813
|
-
<button class="pf-
|
|
2814
|
-
<span class="pf-
|
|
2815
|
-
<span class="pf-
|
|
2816
|
-
<span class="pf-
|
|
2812
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2813
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2814
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2815
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2816
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2817
2817
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2818
2818
|
</span>
|
|
2819
2819
|
</span>
|
|
2820
|
-
<span class="pf-
|
|
2820
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 1</span>
|
|
2821
2821
|
</span>
|
|
2822
2822
|
</button>
|
|
2823
2823
|
</div>
|
|
2824
2824
|
</li>
|
|
2825
2825
|
<li
|
|
2826
|
-
class="pf-
|
|
2826
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2827
2827
|
role="treeitem"
|
|
2828
2828
|
tabindex="-1"
|
|
2829
2829
|
>
|
|
2830
|
-
<div class="pf-
|
|
2831
|
-
<button class="pf-
|
|
2832
|
-
<span class="pf-
|
|
2833
|
-
<span class="pf-
|
|
2830
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2831
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2832
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2833
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 2</span>
|
|
2834
2834
|
</span>
|
|
2835
2835
|
</button>
|
|
2836
2836
|
</div>
|
|
2837
2837
|
</li>
|
|
2838
2838
|
<li
|
|
2839
|
-
class="pf-
|
|
2839
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2840
2840
|
role="treeitem"
|
|
2841
2841
|
tabindex="-1"
|
|
2842
2842
|
>
|
|
2843
|
-
<div class="pf-
|
|
2844
|
-
<button class="pf-
|
|
2845
|
-
<span class="pf-
|
|
2846
|
-
<span class="pf-
|
|
2843
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2844
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2845
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2846
|
+
<span class="pf-v6-c-tree-view__node-text">Loader app 3</span>
|
|
2847
2847
|
</span>
|
|
2848
2848
|
</button>
|
|
2849
2849
|
</div>
|
|
@@ -2855,59 +2855,59 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2855
2855
|
</ul>
|
|
2856
2856
|
</li>
|
|
2857
2857
|
<li
|
|
2858
|
-
class="pf-
|
|
2858
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2859
2859
|
role="treeitem"
|
|
2860
2860
|
aria-expanded="false"
|
|
2861
2861
|
tabindex="0"
|
|
2862
2862
|
>
|
|
2863
|
-
<div class="pf-
|
|
2864
|
-
<button class="pf-
|
|
2865
|
-
<span class="pf-
|
|
2866
|
-
<span class="pf-
|
|
2867
|
-
<span class="pf-
|
|
2863
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2864
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2865
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2866
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2867
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2868
2868
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2869
2869
|
</span>
|
|
2870
2870
|
</span>
|
|
2871
|
-
<span class="pf-
|
|
2871
|
+
<span class="pf-v6-c-tree-view__node-text">Cost management</span>
|
|
2872
2872
|
</span>
|
|
2873
2873
|
</button>
|
|
2874
2874
|
</div>
|
|
2875
2875
|
</li>
|
|
2876
2876
|
<li
|
|
2877
|
-
class="pf-
|
|
2877
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2878
2878
|
role="treeitem"
|
|
2879
2879
|
aria-expanded="false"
|
|
2880
2880
|
tabindex="0"
|
|
2881
2881
|
>
|
|
2882
|
-
<div class="pf-
|
|
2883
|
-
<button class="pf-
|
|
2884
|
-
<span class="pf-
|
|
2885
|
-
<span class="pf-
|
|
2886
|
-
<span class="pf-
|
|
2882
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2883
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2884
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2885
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2886
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2887
2887
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2888
2888
|
</span>
|
|
2889
2889
|
</span>
|
|
2890
|
-
<span class="pf-
|
|
2890
|
+
<span class="pf-v6-c-tree-view__node-text">Sources</span>
|
|
2891
2891
|
</span>
|
|
2892
2892
|
</button>
|
|
2893
2893
|
</div>
|
|
2894
2894
|
</li>
|
|
2895
2895
|
<li
|
|
2896
|
-
class="pf-
|
|
2896
|
+
class="pf-v6-c-tree-view__list-item"
|
|
2897
2897
|
role="treeitem"
|
|
2898
2898
|
aria-expanded="false"
|
|
2899
2899
|
tabindex="0"
|
|
2900
2900
|
>
|
|
2901
|
-
<div class="pf-
|
|
2902
|
-
<button class="pf-
|
|
2903
|
-
<span class="pf-
|
|
2904
|
-
<span class="pf-
|
|
2905
|
-
<span class="pf-
|
|
2901
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2902
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2903
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2904
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2905
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2906
2906
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2907
2907
|
</span>
|
|
2908
2908
|
</span>
|
|
2909
2909
|
<span
|
|
2910
|
-
class="pf-
|
|
2910
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2911
2911
|
>This is a really really really long folder name that overflows from the width of the container.</span>
|
|
2912
2912
|
</span>
|
|
2913
2913
|
</button>
|
|
@@ -2921,44 +2921,44 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2921
2921
|
### Compact
|
|
2922
2922
|
|
|
2923
2923
|
```html
|
|
2924
|
-
<div class="pf-
|
|
2925
|
-
<ul class="pf-
|
|
2926
|
-
<li class="pf-
|
|
2927
|
-
<div class="pf-
|
|
2928
|
-
<button class="pf-
|
|
2929
|
-
<span class="pf-
|
|
2930
|
-
<span class="pf-
|
|
2931
|
-
<span class="pf-
|
|
2924
|
+
<div class="pf-v6-c-tree-view pf-m-compact">
|
|
2925
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
2926
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2927
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2928
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2929
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2930
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
2931
|
+
<span class="pf-v6-c-tree-view__node-title">apiVersion</span>
|
|
2932
2932
|
<span
|
|
2933
|
-
class="pf-
|
|
2933
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2934
2934
|
>APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span>
|
|
2935
2935
|
</span>
|
|
2936
2936
|
</span>
|
|
2937
2937
|
</button>
|
|
2938
2938
|
</div>
|
|
2939
2939
|
</li>
|
|
2940
|
-
<li class="pf-
|
|
2941
|
-
<div class="pf-
|
|
2942
|
-
<button class="pf-
|
|
2943
|
-
<span class="pf-
|
|
2944
|
-
<span class="pf-
|
|
2945
|
-
<span class="pf-
|
|
2940
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2941
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2942
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2943
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2944
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
2945
|
+
<span class="pf-v6-c-tree-view__node-title">kind</span>
|
|
2946
2946
|
<span
|
|
2947
|
-
class="pf-
|
|
2947
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2948
2948
|
>Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span>
|
|
2949
2949
|
</span>
|
|
2950
2950
|
</span>
|
|
2951
2951
|
</button>
|
|
2952
2952
|
</div>
|
|
2953
2953
|
</li>
|
|
2954
|
-
<li class="pf-
|
|
2955
|
-
<div class="pf-
|
|
2956
|
-
<button class="pf-
|
|
2957
|
-
<span class="pf-
|
|
2958
|
-
<span class="pf-
|
|
2959
|
-
<span class="pf-
|
|
2954
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2955
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2956
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2957
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2958
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
2959
|
+
<span class="pf-v6-c-tree-view__node-title">metadata</span>
|
|
2960
2960
|
<span
|
|
2961
|
-
class="pf-
|
|
2961
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2962
2962
|
>Standard object metadata</span>
|
|
2963
2963
|
</span>
|
|
2964
2964
|
</span>
|
|
@@ -2966,97 +2966,97 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
2966
2966
|
</div>
|
|
2967
2967
|
</li>
|
|
2968
2968
|
<li
|
|
2969
|
-
class="pf-
|
|
2969
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
2970
2970
|
role="treeitem"
|
|
2971
2971
|
aria-expanded="true"
|
|
2972
2972
|
tabindex="0"
|
|
2973
2973
|
>
|
|
2974
|
-
<div class="pf-
|
|
2975
|
-
<button class="pf-
|
|
2976
|
-
<span class="pf-
|
|
2977
|
-
<span class="pf-
|
|
2978
|
-
<span class="pf-
|
|
2974
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2975
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2976
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2977
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
2978
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
2979
2979
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2980
2980
|
</span>
|
|
2981
2981
|
</span>
|
|
2982
|
-
<span class="pf-
|
|
2983
|
-
<span class="pf-
|
|
2982
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
2983
|
+
<span class="pf-v6-c-tree-view__node-title">spec</span>
|
|
2984
2984
|
<span
|
|
2985
|
-
class="pf-
|
|
2985
|
+
class="pf-v6-c-tree-view__node-text"
|
|
2986
2986
|
>Specification of the desired behavior of deployment.</span>
|
|
2987
2987
|
</span>
|
|
2988
2988
|
</span>
|
|
2989
2989
|
</button>
|
|
2990
2990
|
</div>
|
|
2991
|
-
<ul class="pf-
|
|
2992
|
-
<li class="pf-
|
|
2993
|
-
<div class="pf-
|
|
2994
|
-
<button class="pf-
|
|
2995
|
-
<span class="pf-
|
|
2996
|
-
<span class="pf-
|
|
2997
|
-
<span class="pf-
|
|
2991
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
2992
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
2993
|
+
<div class="pf-v6-c-tree-view__content">
|
|
2994
|
+
<button class="pf-v6-c-tree-view__node">
|
|
2995
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
2996
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
2997
|
+
<span class="pf-v6-c-tree-view__node-title">minReadySeconds</span>
|
|
2998
2998
|
<span
|
|
2999
|
-
class="pf-
|
|
2999
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3000
3000
|
>Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span>
|
|
3001
3001
|
</span>
|
|
3002
3002
|
</span>
|
|
3003
3003
|
</button>
|
|
3004
3004
|
</div>
|
|
3005
3005
|
</li>
|
|
3006
|
-
<li class="pf-
|
|
3007
|
-
<div class="pf-
|
|
3008
|
-
<button class="pf-
|
|
3009
|
-
<span class="pf-
|
|
3010
|
-
<span class="pf-
|
|
3011
|
-
<span class="pf-
|
|
3006
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3007
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3008
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3009
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3010
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3011
|
+
<span class="pf-v6-c-tree-view__node-title">paused</span>
|
|
3012
3012
|
<span
|
|
3013
|
-
class="pf-
|
|
3013
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3014
3014
|
>Indicates that the deployment is paused</span>
|
|
3015
3015
|
</span>
|
|
3016
3016
|
</span>
|
|
3017
3017
|
</button>
|
|
3018
3018
|
</div>
|
|
3019
3019
|
</li>
|
|
3020
|
-
<li class="pf-
|
|
3021
|
-
<div class="pf-
|
|
3022
|
-
<button class="pf-
|
|
3023
|
-
<span class="pf-
|
|
3024
|
-
<span class="pf-
|
|
3020
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3021
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3022
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3023
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3024
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3025
3025
|
<span
|
|
3026
|
-
class="pf-
|
|
3026
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3027
3027
|
>progressDeadlineSeconds</span>
|
|
3028
3028
|
<span
|
|
3029
|
-
class="pf-
|
|
3029
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3030
3030
|
>The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span>
|
|
3031
3031
|
</span>
|
|
3032
3032
|
</span>
|
|
3033
3033
|
</button>
|
|
3034
3034
|
</div>
|
|
3035
3035
|
</li>
|
|
3036
|
-
<li class="pf-
|
|
3037
|
-
<div class="pf-
|
|
3038
|
-
<button class="pf-
|
|
3039
|
-
<span class="pf-
|
|
3040
|
-
<span class="pf-
|
|
3041
|
-
<span class="pf-
|
|
3036
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3037
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3038
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3039
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3040
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3041
|
+
<span class="pf-v6-c-tree-view__node-title">replicas</span>
|
|
3042
3042
|
<span
|
|
3043
|
-
class="pf-
|
|
3043
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3044
3044
|
>Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.</span>
|
|
3045
3045
|
</span>
|
|
3046
3046
|
</span>
|
|
3047
3047
|
</button>
|
|
3048
3048
|
</div>
|
|
3049
3049
|
</li>
|
|
3050
|
-
<li class="pf-
|
|
3051
|
-
<div class="pf-
|
|
3052
|
-
<button class="pf-
|
|
3053
|
-
<span class="pf-
|
|
3054
|
-
<span class="pf-
|
|
3050
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3051
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3052
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3053
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3054
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3055
3055
|
<span
|
|
3056
|
-
class="pf-
|
|
3056
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3057
3057
|
>revisionHistoryLimit</span>
|
|
3058
3058
|
<span
|
|
3059
|
-
class="pf-
|
|
3059
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3060
3060
|
>The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span>
|
|
3061
3061
|
</span>
|
|
3062
3062
|
</span>
|
|
@@ -3064,69 +3064,69 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3064
3064
|
</div>
|
|
3065
3065
|
</li>
|
|
3066
3066
|
<li
|
|
3067
|
-
class="pf-
|
|
3067
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3068
3068
|
role="treeitem"
|
|
3069
3069
|
aria-expanded="true"
|
|
3070
3070
|
tabindex="0"
|
|
3071
3071
|
>
|
|
3072
|
-
<div class="pf-
|
|
3073
|
-
<button class="pf-
|
|
3074
|
-
<span class="pf-
|
|
3075
|
-
<span class="pf-
|
|
3076
|
-
<span class="pf-
|
|
3072
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3073
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3074
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3075
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
3076
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
3077
3077
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3078
3078
|
</span>
|
|
3079
3079
|
</span>
|
|
3080
|
-
<span class="pf-
|
|
3081
|
-
<span class="pf-
|
|
3080
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3081
|
+
<span class="pf-v6-c-tree-view__node-title">Selector</span>
|
|
3082
3082
|
<span
|
|
3083
|
-
class="pf-
|
|
3083
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3084
3084
|
>Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment</span>
|
|
3085
3085
|
</span>
|
|
3086
3086
|
</span>
|
|
3087
3087
|
</button>
|
|
3088
3088
|
</div>
|
|
3089
|
-
<ul class="pf-
|
|
3089
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3090
3090
|
<li
|
|
3091
|
-
class="pf-
|
|
3091
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3092
3092
|
role="treeitem"
|
|
3093
3093
|
aria-expanded="true"
|
|
3094
3094
|
tabindex="0"
|
|
3095
3095
|
>
|
|
3096
|
-
<div class="pf-
|
|
3097
|
-
<button class="pf-
|
|
3098
|
-
<span class="pf-
|
|
3099
|
-
<span class="pf-
|
|
3100
|
-
<span class="pf-
|
|
3096
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3097
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3098
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3099
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
3100
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
3101
3101
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3102
3102
|
</span>
|
|
3103
3103
|
</span>
|
|
3104
|
-
<span class="pf-
|
|
3104
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3105
3105
|
<span
|
|
3106
|
-
class="pf-
|
|
3106
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3107
3107
|
>matchExpressions</span>
|
|
3108
3108
|
<span
|
|
3109
|
-
class="pf-
|
|
3109
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3110
3110
|
>matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
|
|
3111
3111
|
</span>
|
|
3112
3112
|
</span>
|
|
3113
3113
|
</button>
|
|
3114
3114
|
</div>
|
|
3115
|
-
<ul class="pf-
|
|
3115
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3116
3116
|
<li
|
|
3117
|
-
class="pf-
|
|
3117
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3118
3118
|
role="treeitem"
|
|
3119
3119
|
tabindex="-1"
|
|
3120
3120
|
>
|
|
3121
|
-
<div class="pf-
|
|
3122
|
-
<button class="pf-
|
|
3123
|
-
<span class="pf-
|
|
3124
|
-
<span class="pf-
|
|
3121
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3122
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3123
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3124
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3125
3125
|
<span
|
|
3126
|
-
class="pf-
|
|
3126
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3127
3127
|
>matchLabels</span>
|
|
3128
3128
|
<span
|
|
3129
|
-
class="pf-
|
|
3129
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3130
3130
|
>matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
|
|
3131
3131
|
</span>
|
|
3132
3132
|
</span>
|
|
@@ -3136,17 +3136,17 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3136
3136
|
</ul>
|
|
3137
3137
|
</li>
|
|
3138
3138
|
<li
|
|
3139
|
-
class="pf-
|
|
3139
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3140
3140
|
role="treeitem"
|
|
3141
3141
|
tabindex="-1"
|
|
3142
3142
|
>
|
|
3143
|
-
<div class="pf-
|
|
3144
|
-
<button class="pf-
|
|
3145
|
-
<span class="pf-
|
|
3146
|
-
<span class="pf-
|
|
3147
|
-
<span class="pf-
|
|
3143
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3144
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3145
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3146
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3147
|
+
<span class="pf-v6-c-tree-view__node-title">matchLabels</span>
|
|
3148
3148
|
<span
|
|
3149
|
-
class="pf-
|
|
3149
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3150
3150
|
>Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
|
|
3151
3151
|
</span>
|
|
3152
3152
|
</span>
|
|
@@ -3155,14 +3155,14 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3155
3155
|
</li>
|
|
3156
3156
|
</ul>
|
|
3157
3157
|
</li>
|
|
3158
|
-
<li class="pf-
|
|
3159
|
-
<div class="pf-
|
|
3160
|
-
<button class="pf-
|
|
3161
|
-
<span class="pf-
|
|
3162
|
-
<span class="pf-
|
|
3163
|
-
<span class="pf-
|
|
3158
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3159
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3160
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3161
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3162
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3163
|
+
<span class="pf-v6-c-tree-view__node-title">matchLabels</span>
|
|
3164
3164
|
<span
|
|
3165
|
-
class="pf-
|
|
3165
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3166
3166
|
>Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
|
|
3167
3167
|
</span>
|
|
3168
3168
|
</span>
|
|
@@ -3179,44 +3179,44 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3179
3179
|
### Compact, no background
|
|
3180
3180
|
|
|
3181
3181
|
```html
|
|
3182
|
-
<div class="pf-
|
|
3183
|
-
<ul class="pf-
|
|
3184
|
-
<li class="pf-
|
|
3185
|
-
<div class="pf-
|
|
3186
|
-
<button class="pf-
|
|
3187
|
-
<span class="pf-
|
|
3188
|
-
<span class="pf-
|
|
3189
|
-
<span class="pf-
|
|
3182
|
+
<div class="pf-v6-c-tree-view pf-m-compact pf-m-no-background">
|
|
3183
|
+
<ul class="pf-v6-c-tree-view__list" role="tree">
|
|
3184
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3185
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3186
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3187
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3188
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3189
|
+
<span class="pf-v6-c-tree-view__node-title">apiVersion</span>
|
|
3190
3190
|
<span
|
|
3191
|
-
class="pf-
|
|
3191
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3192
3192
|
>APIVersion defines the versioned schema of this representation of an object. Servers should convert recognized schemas to the latest internal value and may reject unrecognized values.</span>
|
|
3193
3193
|
</span>
|
|
3194
3194
|
</span>
|
|
3195
3195
|
</button>
|
|
3196
3196
|
</div>
|
|
3197
3197
|
</li>
|
|
3198
|
-
<li class="pf-
|
|
3199
|
-
<div class="pf-
|
|
3200
|
-
<button class="pf-
|
|
3201
|
-
<span class="pf-
|
|
3202
|
-
<span class="pf-
|
|
3203
|
-
<span class="pf-
|
|
3198
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3199
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3200
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3201
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3202
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3203
|
+
<span class="pf-v6-c-tree-view__node-title">kind</span>
|
|
3204
3204
|
<span
|
|
3205
|
-
class="pf-
|
|
3205
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3206
3206
|
>Kind is a string value representing the REST resource this object represents. Servers may infer this from the endpoint the client submits requests to. Cannot be updated is CamelCase. More info:</span>
|
|
3207
3207
|
</span>
|
|
3208
3208
|
</span>
|
|
3209
3209
|
</button>
|
|
3210
3210
|
</div>
|
|
3211
3211
|
</li>
|
|
3212
|
-
<li class="pf-
|
|
3213
|
-
<div class="pf-
|
|
3214
|
-
<button class="pf-
|
|
3215
|
-
<span class="pf-
|
|
3216
|
-
<span class="pf-
|
|
3217
|
-
<span class="pf-
|
|
3212
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3213
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3214
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3215
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3216
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3217
|
+
<span class="pf-v6-c-tree-view__node-title">metadata</span>
|
|
3218
3218
|
<span
|
|
3219
|
-
class="pf-
|
|
3219
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3220
3220
|
>Standard object metadata</span>
|
|
3221
3221
|
</span>
|
|
3222
3222
|
</span>
|
|
@@ -3224,97 +3224,97 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3224
3224
|
</div>
|
|
3225
3225
|
</li>
|
|
3226
3226
|
<li
|
|
3227
|
-
class="pf-
|
|
3227
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3228
3228
|
role="treeitem"
|
|
3229
3229
|
aria-expanded="true"
|
|
3230
3230
|
tabindex="0"
|
|
3231
3231
|
>
|
|
3232
|
-
<div class="pf-
|
|
3233
|
-
<button class="pf-
|
|
3234
|
-
<span class="pf-
|
|
3235
|
-
<span class="pf-
|
|
3236
|
-
<span class="pf-
|
|
3232
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3233
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3234
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3235
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
3236
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
3237
3237
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3238
3238
|
</span>
|
|
3239
3239
|
</span>
|
|
3240
|
-
<span class="pf-
|
|
3241
|
-
<span class="pf-
|
|
3240
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3241
|
+
<span class="pf-v6-c-tree-view__node-title">spec</span>
|
|
3242
3242
|
<span
|
|
3243
|
-
class="pf-
|
|
3243
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3244
3244
|
>Specification of the desired behavior of deployment.</span>
|
|
3245
3245
|
</span>
|
|
3246
3246
|
</span>
|
|
3247
3247
|
</button>
|
|
3248
3248
|
</div>
|
|
3249
|
-
<ul class="pf-
|
|
3250
|
-
<li class="pf-
|
|
3251
|
-
<div class="pf-
|
|
3252
|
-
<button class="pf-
|
|
3253
|
-
<span class="pf-
|
|
3254
|
-
<span class="pf-
|
|
3255
|
-
<span class="pf-
|
|
3249
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3250
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3251
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3252
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3253
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3254
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3255
|
+
<span class="pf-v6-c-tree-view__node-title">minReadySeconds</span>
|
|
3256
3256
|
<span
|
|
3257
|
-
class="pf-
|
|
3257
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3258
3258
|
>Minimum number of seconds for which a newly created pod should be ready without any of its container crashing, for it to be considered available. Default to 0 (pod will be considered available as soon as it is ready).</span>
|
|
3259
3259
|
</span>
|
|
3260
3260
|
</span>
|
|
3261
3261
|
</button>
|
|
3262
3262
|
</div>
|
|
3263
3263
|
</li>
|
|
3264
|
-
<li class="pf-
|
|
3265
|
-
<div class="pf-
|
|
3266
|
-
<button class="pf-
|
|
3267
|
-
<span class="pf-
|
|
3268
|
-
<span class="pf-
|
|
3269
|
-
<span class="pf-
|
|
3264
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3265
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3266
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3267
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3268
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3269
|
+
<span class="pf-v6-c-tree-view__node-title">paused</span>
|
|
3270
3270
|
<span
|
|
3271
|
-
class="pf-
|
|
3271
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3272
3272
|
>Indicates that the deployment is paused</span>
|
|
3273
3273
|
</span>
|
|
3274
3274
|
</span>
|
|
3275
3275
|
</button>
|
|
3276
3276
|
</div>
|
|
3277
3277
|
</li>
|
|
3278
|
-
<li class="pf-
|
|
3279
|
-
<div class="pf-
|
|
3280
|
-
<button class="pf-
|
|
3281
|
-
<span class="pf-
|
|
3282
|
-
<span class="pf-
|
|
3278
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3279
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3280
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3281
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3282
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3283
3283
|
<span
|
|
3284
|
-
class="pf-
|
|
3284
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3285
3285
|
>progressDeadlineSeconds</span>
|
|
3286
3286
|
<span
|
|
3287
|
-
class="pf-
|
|
3287
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3288
3288
|
>The maximum time in seconds for a deployment to make progress before it is considered to be failed. The deployment controller will continue to process failed deployments and a condition with a ProgressDeadlineExceeded reason will be surfaced in the deployment status. Note that the progress will not de estimated during the time a deployment is paused. Defaults to 600s.</span>
|
|
3289
3289
|
</span>
|
|
3290
3290
|
</span>
|
|
3291
3291
|
</button>
|
|
3292
3292
|
</div>
|
|
3293
3293
|
</li>
|
|
3294
|
-
<li class="pf-
|
|
3295
|
-
<div class="pf-
|
|
3296
|
-
<button class="pf-
|
|
3297
|
-
<span class="pf-
|
|
3298
|
-
<span class="pf-
|
|
3299
|
-
<span class="pf-
|
|
3294
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3295
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3296
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3297
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3298
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3299
|
+
<span class="pf-v6-c-tree-view__node-title">replicas</span>
|
|
3300
3300
|
<span
|
|
3301
|
-
class="pf-
|
|
3301
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3302
3302
|
>Number of desired pods. This is a pointer to distinguish between explicit zero and not specified. Defaults to 1.</span>
|
|
3303
3303
|
</span>
|
|
3304
3304
|
</span>
|
|
3305
3305
|
</button>
|
|
3306
3306
|
</div>
|
|
3307
3307
|
</li>
|
|
3308
|
-
<li class="pf-
|
|
3309
|
-
<div class="pf-
|
|
3310
|
-
<button class="pf-
|
|
3311
|
-
<span class="pf-
|
|
3312
|
-
<span class="pf-
|
|
3308
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3309
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3310
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3311
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3312
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3313
3313
|
<span
|
|
3314
|
-
class="pf-
|
|
3314
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3315
3315
|
>revisionHistoryLimit</span>
|
|
3316
3316
|
<span
|
|
3317
|
-
class="pf-
|
|
3317
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3318
3318
|
>The number of old ReplicaSets to retain to allow rollback. This is a pointer to distinguish between explicit zero and not specified. Defaults to 10.</span>
|
|
3319
3319
|
</span>
|
|
3320
3320
|
</span>
|
|
@@ -3322,69 +3322,69 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3322
3322
|
</div>
|
|
3323
3323
|
</li>
|
|
3324
3324
|
<li
|
|
3325
|
-
class="pf-
|
|
3325
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3326
3326
|
role="treeitem"
|
|
3327
3327
|
aria-expanded="true"
|
|
3328
3328
|
tabindex="0"
|
|
3329
3329
|
>
|
|
3330
|
-
<div class="pf-
|
|
3331
|
-
<button class="pf-
|
|
3332
|
-
<span class="pf-
|
|
3333
|
-
<span class="pf-
|
|
3334
|
-
<span class="pf-
|
|
3330
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3331
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3332
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3333
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
3334
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
3335
3335
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3336
3336
|
</span>
|
|
3337
3337
|
</span>
|
|
3338
|
-
<span class="pf-
|
|
3339
|
-
<span class="pf-
|
|
3338
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3339
|
+
<span class="pf-v6-c-tree-view__node-title">Selector</span>
|
|
3340
3340
|
<span
|
|
3341
|
-
class="pf-
|
|
3341
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3342
3342
|
>Label selector for pods. Existing ReplicaSets whose pods are selected by this will be the ones affected by this deployment</span>
|
|
3343
3343
|
</span>
|
|
3344
3344
|
</span>
|
|
3345
3345
|
</button>
|
|
3346
3346
|
</div>
|
|
3347
|
-
<ul class="pf-
|
|
3347
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3348
3348
|
<li
|
|
3349
|
-
class="pf-
|
|
3349
|
+
class="pf-v6-c-tree-view__list-item pf-m-expanded"
|
|
3350
3350
|
role="treeitem"
|
|
3351
3351
|
aria-expanded="true"
|
|
3352
3352
|
tabindex="0"
|
|
3353
3353
|
>
|
|
3354
|
-
<div class="pf-
|
|
3355
|
-
<button class="pf-
|
|
3356
|
-
<span class="pf-
|
|
3357
|
-
<span class="pf-
|
|
3358
|
-
<span class="pf-
|
|
3354
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3355
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3356
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3357
|
+
<span class="pf-v6-c-tree-view__node-toggle">
|
|
3358
|
+
<span class="pf-v6-c-tree-view__node-toggle-icon">
|
|
3359
3359
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
3360
3360
|
</span>
|
|
3361
3361
|
</span>
|
|
3362
|
-
<span class="pf-
|
|
3362
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3363
3363
|
<span
|
|
3364
|
-
class="pf-
|
|
3364
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3365
3365
|
>matchExpressions</span>
|
|
3366
3366
|
<span
|
|
3367
|
-
class="pf-
|
|
3367
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3368
3368
|
>matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
|
|
3369
3369
|
</span>
|
|
3370
3370
|
</span>
|
|
3371
3371
|
</button>
|
|
3372
3372
|
</div>
|
|
3373
|
-
<ul class="pf-
|
|
3373
|
+
<ul class="pf-v6-c-tree-view__list" role="group">
|
|
3374
3374
|
<li
|
|
3375
|
-
class="pf-
|
|
3375
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3376
3376
|
role="treeitem"
|
|
3377
3377
|
tabindex="-1"
|
|
3378
3378
|
>
|
|
3379
|
-
<div class="pf-
|
|
3380
|
-
<button class="pf-
|
|
3381
|
-
<span class="pf-
|
|
3382
|
-
<span class="pf-
|
|
3379
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3380
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3381
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3382
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3383
3383
|
<span
|
|
3384
|
-
class="pf-
|
|
3384
|
+
class="pf-v6-c-tree-view__node-title"
|
|
3385
3385
|
>matchLabels</span>
|
|
3386
3386
|
<span
|
|
3387
|
-
class="pf-
|
|
3387
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3388
3388
|
>matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
|
|
3389
3389
|
</span>
|
|
3390
3390
|
</span>
|
|
@@ -3394,17 +3394,17 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3394
3394
|
</ul>
|
|
3395
3395
|
</li>
|
|
3396
3396
|
<li
|
|
3397
|
-
class="pf-
|
|
3397
|
+
class="pf-v6-c-tree-view__list-item"
|
|
3398
3398
|
role="treeitem"
|
|
3399
3399
|
tabindex="-1"
|
|
3400
3400
|
>
|
|
3401
|
-
<div class="pf-
|
|
3402
|
-
<button class="pf-
|
|
3403
|
-
<span class="pf-
|
|
3404
|
-
<span class="pf-
|
|
3405
|
-
<span class="pf-
|
|
3401
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3402
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3403
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3404
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3405
|
+
<span class="pf-v6-c-tree-view__node-title">matchLabels</span>
|
|
3406
3406
|
<span
|
|
3407
|
-
class="pf-
|
|
3407
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3408
3408
|
>Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
|
|
3409
3409
|
</span>
|
|
3410
3410
|
</span>
|
|
@@ -3413,14 +3413,14 @@ cssPrefix: pf-v5-c-tree-view
|
|
|
3413
3413
|
</li>
|
|
3414
3414
|
</ul>
|
|
3415
3415
|
</li>
|
|
3416
|
-
<li class="pf-
|
|
3417
|
-
<div class="pf-
|
|
3418
|
-
<button class="pf-
|
|
3419
|
-
<span class="pf-
|
|
3420
|
-
<span class="pf-
|
|
3421
|
-
<span class="pf-
|
|
3416
|
+
<li class="pf-v6-c-tree-view__list-item" role="treeitem" tabindex="-1">
|
|
3417
|
+
<div class="pf-v6-c-tree-view__content">
|
|
3418
|
+
<button class="pf-v6-c-tree-view__node">
|
|
3419
|
+
<span class="pf-v6-c-tree-view__node-container">
|
|
3420
|
+
<span class="pf-v6-c-tree-view__node-content">
|
|
3421
|
+
<span class="pf-v6-c-tree-view__node-title">matchLabels</span>
|
|
3422
3422
|
<span
|
|
3423
|
-
class="pf-
|
|
3423
|
+
class="pf-v6-c-tree-view__node-text"
|
|
3424
3424
|
>Map of {key.value} pairs. A single {key.value} in the matchLabels map is equivalent to an element of matchExpressions, whose key field is "key", the operator is "In" and the values array contains only "value". The requirements are ANDed.</span>
|
|
3425
3425
|
</span>
|
|
3426
3426
|
</span>
|