This component has all the basic functionalities implemented. More polishing features might be added in the near future.
If you want to contribute, please visit the issues on GitHub.
createTree(
config?):TreeWidget
Create a tree widget with given config props
an optional tree config
a TreeWidget
getTreeDefaultConfig():
TreeProps
Retrieve a shallow copy of the default Tree config
the default Tree config
Normalized TreeItem object
ariaLabel:
string
Accessibility label for the node
children:
NormalizedTreeItem[]
An array of children nodes
optionalisExpanded:boolean
If true the node is expanded
label:
string
String title of the node
level:
number
Level in the hierarchy, starts with 0 for a root node
Interface representing the API for a Tree component.
Interface representing various directives used in the Tree component.
itemAttributesDirective:
Directive<{item:NormalizedTreeItem; }>
Directive to handle attributes for the tree item
itemToggleDirective:
Directive<{item:NormalizedTreeItem; }>
Directive to handle toggle for the tree item
navigationDirective:
Directive
Directive to attach navManager for the tree
Represents a tree item component.
optionalariaLabel:string
Optional accessibility label for the node
optionalchildren:TreeItem[]
Optional array of children nodes
optionalisExpanded:boolean
If true the node is expanded
label:
string
String title of the node
Interface representing the properties for the Tree component.
optionalariaLabel:string
Optional accessibility label for the tree if there is no explicit label
''
ariaLabelToggleFn: (
label) =>string
Return the value for the 'aria-label' attribute of the toggle
string
tree item label
string
(label: string) => `Toggle ${label}`className:
string
CSS classes to be applied on the widget main container
''
nodes:
TreeItem[]
Array of the tree nodes to display
[]
onExpandToggle: (
node) =>void
An event emitted when the user toggles the expand of the TreeItem.
Event payload is equal to the TreeItem clicked.
void
() => {}navSelector(
node):NodeListOf<HTMLElement>
Retrieves expand items of the TreeItem
HTML element that is representing the expand item
NodeListOf<HTMLElement>
(node: HTMLElement) => node.querySelectorAll('button')Represents the state of a Tree component.
optionalariaLabel:string
Optional accessibility label for the tree if there is no explicit label
''
className:
string
CSS classes to be applied on the widget main container
''
expandedMap:
object
Getter of expanded state for each tree node
####### item
undefined | boolean
normalizedNodes:
NormalizedTreeItem[]
Array of normalized tree nodes
TreeWidget:
Widget<TreeProps,TreeState,TreeApi,TreeDirectives>
Represents a Tree widget component.