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.
Colors of the component are using the Bootstrap CSS vars (along with a default color) so that if you are using bootstrap the component will take your color palette.
createTree(
props?):TreeWidget
Create a Tree with given config props
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.
TreeContext:
WidgetSlotContext<TreeWidget>
Represents the context for a Tree widget.
This interface is an alias for WidgetSlotContext<TreeWidget>.
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
Represents 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
''
item:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item
itemContent:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item content
itemToggle:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item toggle
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
() => {}structure:
SlotContent<TreeContext>
Slot to change the default display of the tree
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')TreeSlotItemContext:
TreeContext&object
Represents the context for a tree item, extending the base TreeContext
with an additional item property.
item:
NormalizedTreeItem
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
item:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item
itemContent:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item content
itemToggle:
SlotContent<TreeSlotItemContext>
Slot to change the default tree item toggle
normalizedNodes:
NormalizedTreeItem[]
Array of normalized tree nodes
structure:
SlotContent<TreeContext>
Slot to change the default display of the tree
TreeWidget:
Widget<TreeProps,TreeState,TreeApi,TreeDirectives>
Represents a Tree widget component.