Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Tree
Is a Navigable representation of a Tree data Structure
Use Cases:
- Visualize navigation of a Data Tree
- Better suited for navigating through deep hierarchical levels
Tree Props
| Name | Use | Type | Definition |
| title | required | string | Title text for the component. |
TreeViewElement
Used to show items of the Tree.
TreeViewElement Props
| Name | Use | Type | Definition |
| name | required | string | Name of the Tree Element component. |
| arrow | optional | 'left' | 'right' | 'none' | By default, displays a left-sided arrow; can be set to 'right' or 'none'. |
| className | optional | string | Alternative class name for the Tree Element component. |
| disabled | optional | boolean | Disables the Tree Element component. |
| icon | optional | string | Displays an icon for the Tree Element component if needed. |
| onClick | optional | (e?: React.MouseEvent) => void | Click event handler function for the Tree Element component. |
Examples
Default Tree View
The drop-down icon appears if it contains children.
Variants
Tree Max Deep
The max level of deepness for the Tree view is 4 levels.
States
Disabled Nested Tree view
Disabled Tree view