Tree view

  <vuestic-tree-root>
    <vuestic-tree-category label="Apparel">
      <vuestic-tree-node>Jackets</vuestic-tree-node>
    </vuestic-tree-category>
  </vuestic-tree-root>

Components

Tree view is composed of 3 components:

• vuestic-tree-root - Tree root.
• vuestic-tree-category - Tree category. You can keep category inside root or another category.
• vuestic-tree-node - Tree node. You can keep node inside root or category.

Let's break them apart:

vuestic-tree-root

Public methods:

• collapse - collapse tree root
• expand - expand tree root and nested categories (recursively)

You can call expand and collapse via refs. Check example if you must.

vuestic-tree-category

Public methods:

• collapse - collapse category
• expand - expand category and nested categories (recursively)

We also got an icon slot to simplify padding your icon. Here's an example

Props

• label - String | Number - category label
• isOpen - Boolean - defines default open|closed state. prop is bound unidirectionaly (component won't emit changes).

vuestic-tree-node

Slots

• checkbox
• icon
• iconRight They just provide utility paddings.

---

Find DEMOs here!