A good use case for this component is a folder structure. For navigation and
other menus, a regular nested list should be preferred.
Maturity: Developing
Missing features
- Selecting a node. The component renders
aria-selected from the
selected attribute and never changes it, so the caller has to.
Usage
<.tree id="dog-tree" label="Dogs">
<.tree_item>
Breeds
<:items>
<.tree_item>Golden Retriever</.tree_item>
<.tree_item>Labrador Retriever</.tree_item>
</:items>
</.tree_item>
<.tree_item>
Characteristics
<:items>
<.tree_item>Playful</.tree_item>
<.tree_item>Loyal</.tree_item>
</:items>
</.tree_item>
</.tree>
From data
A tree_item with an :items slot is a branch, even if the slot is empty.
If you render the tree from data, conditionally hide the slot with an :if
attribute.
<.tree id="breed-tree" label="Breeds">
<.breed_node :for={node <- @nodes} node={node} />
</.tree>
defp breed_node(assigns) do
~H"""
<.tree_item>
{@node.name}
<:items :if={@node.children != []}>
<.breed_node :for={child <- @node.children} node={child} />
</:items>
</.tree_item>
"""
end
CSS
You can target the wrapper with an attribute selector for the role:
[role="tree"] {}
This component needs the Doggo.Tree JavaScript hook. See
Phoenix LiveView Hooks for
registering it.
Keyboard
Down and Up - move between the visible items. A collapsed branch takes
its children out of the sequence.Right - expand the focused branch, or move to its first child if it is
already expanded.Left - collapse the focused branch, or move to its parent if it is
already collapsed or is a leaf.Home and End - first and last visible item.- Printable characters - move to the next visible item whose label starts
with what you type.
The tree is a single tab stop. Expanding and collapsing is the hook's own
state, and it survives a LiveView patch. Selecting an item is not: the
component renders aria-selected from the selected attribute of
tree_item, so wire your own click or key handler and re-render.