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.

Screenshot of <anura-tree>

Attributes

root

required: yes, live: yes, default: -

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

CELUM only: You can load an entire node type by passing the node type ID as a negative number, -101 implying tree=-1&kind=101

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

title

required: no, live: yes, default: name of root node

Set a custom title, rather than the name of the root node.

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). You should use the DAMs permission system to achieve this, but if for some reason you can't, this is an option.

node-type

required: no, live: yes, default: -

Which node type you wish to load. Usually not necessary, as an ID should be unique - depends on your DAM.

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.

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