createTree(
props?):TreeWidget
Create a Tree with given config props
a TreeWidget
DefaultTreeSlotItem(
slotContext):Element
A functional component that renders a tree item element with a directive applied to it.
The directive is provided through the slotContext parameter.
The context object containing the directives and item for the tree item element.
Element
A tree root element with the applied directive.
DefaultTreeSlotItemContent(
slotContext):Element
A functional component that renders a tree item content element.
The context object containing the item content for display.
Element
A tree item element.
DefaultTreeSlotItemToggle(
slotContext):Element
A functional component that renders a toggle element with a directive applied to it.
The directive is provided through the slotContext parameter.
The context object containing the directives and item the toggle.
Element
A toggle element with the applied directive.
DefaultTreeSlotStructure(
slotContext):Element
A functional component that renders a tree structure with a directive applied to it.
The directive is provided through the slotContext parameter.
The context object containing the directives and items for the tree display.
Element
A tree structure with the applied directive.
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
Tree(
props):Element
Tree component that integrates with a widget context and renders a slot structure.
The properties for the Tree component.
Element
The rendered Tree component.
The Tree component uses the useWidgetWithConfig hook to create a widget context with the provided
configuration. It renders the slot content using the Slot component.
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.