anura-tree

<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.

Attributes

root

required: yes, live: yes, default: -

The root node of your navigation (ID or String).

value

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.

icon

required: no, live: yes, default: folder

The icon that each node in the tree should display (see anura-icon)

depth

required: no, live: no, default: -

To what depth the tree should load subnodes.

deselectable

required: no, live: no, default: -

Whether to allow a user to deselect a previously selected node. Otherwise the user can only change the selection.

show-count

required: no, live: no, default: -

Whether to show a count of how many items are in this node (provided your adapter supports this)

state

required: no, live: no, default: true

Whether to update the URL to persist the currently selected node (for sharing the link)

hide

required: no, live: no, default: []

Comma-separated list of node IDs that you wish to hide (does not render them at all)

Events

change

regular change event

node-clicked

{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.

node-selected

{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.

node-deselected

{detail: {id: node.id, name: node.name}}

Fired whenever the user has deselected a node. This will also remove selected attribute from the component.

Slots

• header - the header slot will appear before the title and tree content.

• title - appears before the tree content. When show-root is disabled, this slot will automatically be set to the root nodes name, unless you overwrite this slot yourself.

  <anura-tree adapter="some-adapter" root="1337" icon="tag" aria-live="polite">
  <h3 slot="title">My custom title</h3>
  </anura-tree>

• footer - he footer slot will appear at the very end, after the tree content.

Parts

<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; }