@aurelia-mdc-web/tree-view/dist/commonjs/mdc-tree-view.html

Wrapper for Material Components Web Tree View

<template class="mdc-tree-view">
  <require from="./mdc-tree-node"></require>
  <require from="./node-filter"></require>
  <ul class="mdc-tree-view__list">
    <li repeat.for="$node of nodes | nodeFilter:filter" class="mdc-tree-view__list-item">
      <let $tree.bind="element"></let>
      <let $tree-vm.bind="$parent"></let>
      <div class="mdc-tree-view__node ${$node.selected ? 'mdc-tree-view__node--selected' : ''}"
        click.trigger="nodeClicked($node)" mdc-ripple="no-class.bind: true;">
        <div class="mdc-tree-view__node__ripple"></div>
        <let filtered-children.bind="$node.children | nodeFilter:filter"></let>
        <button mdc-icon-button if.bind="filteredChildren.length" type="fab" size="small" class="mdc-tree-view__expander"
          on.bind="$node.expanded">
          <mdc-icon-button-icon class="material-icons">chevron_right</mdc-icon-button-icon>
          <mdc-icon-button-icon class="material-icons" on>expand_more</mdc-icon-button-icon>
        </button>
        <div else class="mdc-tree-view__leaf-padding"></div>
        <mdc-tree-node class="mdc-tree-node" factory.bind="nodeViewFactory"
          root-binding-context.bind="rootBindingContext"></mdc-tree-node>
      </div>
      <mdc-promisify-reference if.bind="$node.children" promise.from-view="$node.childTreeViewPromise"
        reference.to-view="treeView">
      </mdc-promisify-reference>
      <mdc-tree-view if.bind="filteredChildren.length && $node.expanded" nodes.bind="filteredChildren"
        root-binding-context.bind="rootBindingContext" view-model.ref="treeView" filter.bind="filter"
        mdctree:node-selected.trigger="childNodeSelected($event.detail.node)">
      </mdc-tree-view>
    </li>
  </ul>
  <slot></slot>
</template>