Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Documentation
Overview
Accessibility
| Attribute | Applied to | Outcome |
|---|---|---|
role="tree" | .pf-c-tree-view__list | Identifies the ul as a tree widget. Place on the outermost ul only |
role="group" | .pf-c-tree-view__list | Identifies the ul element as a container of treeitem elements that form a branch of the tree. Place on all uls except the first ul |
role="treeitem" | .pf-c-tree-view__list-item | Hides the implicit listitem role of the li element from assistive technologies. |
aria-expanded="false" | .pf-c-tree-view__list-item.pf-m-expandable | Indicates the parent node is closed, i.e., the descendant elements are not visible. |
aria-expanded="true" | .pf-c-tree-view__list-item.pf-m-expandable.pf-m-expanded | Indicates the parent node is open, i.e., the descendant elements are visible. |
tabindex="-1" | .pf-c-tree-view__list-item | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
tabindex="0" | .pf-c-tree-view__list-item | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
aria-label="[button label text]" | .pf-c-tree-view__action | Provides an accessible name for the button when an icon is used instead of text. Required when icon is used with no supporting text |
Usage
| Class | Applied | Outcome |
|---|---|---|
.pf-c-tree-view | <div> | Initiates the tree view container. Required |
.pf-c-tree-view__list | <ul> | Initiates a tree view list. Required |
.pf-c-tree-view__list-item | <li> | Initiates a tree view list item. Required |
.pf-c-tree-view__content | <div> | Initiates a tree view node. Required |
.pf-c-tree-view__node | <button>, <a> | Initiates a tree view node. Required |
.pf-c-tree-view__node-count | <span> | Initiates a tree view node count. |
.pf-c-tree-view__node-toggle-icon | <span> | Initiates a tree view toggle icon. |
.pf-c-tree-view__node-text | <span> | Initiates tree view text. |
.pf-c-tree-view__node-icon | <span> | Initiates a tree view icon. |
.pf-c-tree-view__node-check | <span> | Initiates a tree view check. |
.pf-c-tree-view__action | <div> | Initiates a tree view action wrapper. |
.pf-c-tree-view__search | <div> | Initiates a tree view search wrapper. |
.pf-m-current | .pf-c-tree-view__node | Modifies the tree view node to be current. |
CSS variables
| .pf-c-tree-view | --pf-c-tree-view--PaddingTop | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view--PaddingBottom | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--indent--base | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--nested-indent--base | 1.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__item--m-expandable__node--nested-indent--base | 1.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingTop | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingRight | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingBottom | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--PaddingLeft | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node--Color | #151515 | |
| .pf-c-tree-view | --pf-c-tree-view__node--m-current--Color | #06c | |
| .pf-c-tree-view | --pf-c-tree-view__node--m-current--FontWeight | 700 | |
| .pf-c-tree-view | --pf-c-tree-view__node--hover--BackgroundColor | #f0f0f0 | |
| .pf-c-tree-view | --pf-c-tree-view__node--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--PaddingRight | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--MinWidth | 1.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--MinHeight | undefined | |
| .pf-c-tree-view | --pf-c-tree-view__node-toggle--Transition | all 250ms cubic-bezier(.42, 0, .58, 1) | |
| .pf-c-tree-view | --pf-c-tree-view__node-check--MarginRight | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-count--MarginLeft | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-count--c-badge--m-read--BackgroundColor | #d2d2d2 | |
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingTop | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingRight | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingBottom | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__search--PaddingLeft | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-icon--PaddingRight | 0.5rem | |
| .pf-c-tree-view | --pf-c-tree-view__node-icon--Color | #6a6e73 | |
| .pf-c-tree-view | --pf-c-tree-view__node-text--max-lines | 1 | |
| .pf-c-tree-view | --pf-c-tree-view__action--PaddingLeft | 1rem | |
| .pf-c-tree-view | --pf-c-tree-view__action--focus--BackgroundColor | #f0f0f0 | |
| .pf-c-tree-view | --pf-c-tree-view__action--Color | #6a6e73 | |
| .pf-c-tree-view | --pf-c-tree-view__action--hover--Color | #151515 | |
| .pf-c-tree-view | --pf-c-tree-view__action--focus--Color | #151515 | |
| .pf-c-tree-view | --pf-c-tree-view__action--MarginTop | calc(-1 * 0.375rem) | |
| .pf-c-tree-view | --pf-c-tree-view__action--MarginBottom | calc(-1 * 0.375rem) | |
| .pf-c-tree-view | --pf-c-tree-view__action--MarginRight | calc(-1 * 0.375rem) | |
| .pf-c-tree-view__node.pf-m-current | --pf-c-tree-view__node--Color | #06c | |
| .pf-c-tree-view__node .pf-c-tree-view__node-count .pf-c-badge.pf-m-read | --pf-c-badge--m-read--BackgroundColor | #d2d2d2 | |
| .pf-c-tree-view__action:hover | --pf-c-tree-view__action--Color | #151515 | |
| .pf-c-tree-view__action:focus | --pf-c-tree-view__action--Color | #151515 | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 1)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 1)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 2)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 2)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 3)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 3)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 4)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 4)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 5)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 5)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 6)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 6)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 7)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 7)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 8)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 8)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 9)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 9)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 10)) | |
| .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item .pf-c-tree-view__list-item.pf-m-expandable | --pf-c-tree-view__node--PaddingLeft | calc(0.5rem + (1.5rem * 10)) | |
View source on GitHub
