<anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite"></anura-tree>
Basic navigation tree, featuring automatic (based on selection) and manual folding of sub-trees.
required: yes, live: yes, default: -
The root node of your navigation (ID or String).
required: no, live: write-only, default: -
Which node in the tree should be selected initially. Subsequent selections by the user are reflected in this attribute, but are write-only after the initial load. Note that the state parameter node
will override the initial selection.
required: no, live: yes, default: folder
The icon that each node in the tree should display (see anura-icon)
required: no, live: no, default: -
To what depth the tree should load subnodes.
required: no, live: no, default: -
Whether to allow a user to deselect a previously selected node. Otherwise the user can only change the selection.
required: no, live: no, default: -
Whether to show a count of how many items are in this node (provided your adapter supports this)
required: no, live: no, default: true
Whether to update the URL to persist the currently selected node (for sharing the link)
required: no, live: no, default: []
Comma-separated list of node IDs that you wish to hide (does not render them at all)
regular change event
{detail: {id: node.id, name: node.name}}
Fired whenever the user has clicked on a node, regardless whether a selection or a deselection has occurred.
{detail: {id: node.id, name: node.name}}
Fired whenever the user has selected a node. This will also update the selected attribute of the component.
{detail: {id: node.id, name: node.name}}
Fired whenever the user has deselected a node. This will also remove selected attribute from the component.
header - the header slot will appear before the title and tree content.
<anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite">
<h3 slot="title">My custom title</h3>
</anura-tree>
<ul part="tree-root">
<li part="node-li">
<a part="node-link">
<anura-icon part="node-icon"></anura-icon>
<span part="node-name">Wheel</span>
<span part="node-counter">42</span>
</a>
<ul part="node-ul"><!-- snip, repeats inside --></ul>
</li>
<li><!-- snip, etc. --></li>
</ul>
E.g. color all the icons in the tree:
anura-tree::part(node-icon) { color: green; }