Treeview

A treeview represents a hierarchical view of information, where each item can have a number of subitems.

Examples

Basic

Breadcrumb can have a various separator icon.

Code

<template>
  <Demo>
    <base-treeview title="Parent 1" :is-open="true">
      <base-treeview title="Child 1" :is-open="true">
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.1</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.2</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.3</p>
        </base-butt>
      </base-treeview>
      <base-treeview title="Child 2">
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.1</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.2</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.3</p>
        </base-butt>
      </base-treeview>
    </base-treeview>
    <base-treeview title="Parent 2">
      <base-treeview title="Child 1">
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.1</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.2</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 1.3</p>
        </base-butt>
      </base-treeview>
      <base-treeview title="Child 2">
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.1</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.2</p>
        </base-butt>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-fas-circle" class="w-2 h-2" />
          <p class="flex-1 text-left">Child 2.3</p>
        </base-butt>
      </base-treeview>
    </base-treeview>
  </Demo>
</template>

Custom

Customize treeview content using slot

Code

<template>
  <Demo>
    <base-treeview :is-open="true">
      <template #header="slotProps">
        <base-icon v-if="!slotProps.isOpen" icon="i-far-folder" class="w-4 h-4" />
        <base-icon v-if="slotProps.isOpen" icon="i-far-folder-open" class="w-4 h-4" />
        <p class="flex-1 text-left">Parent 1</p>
      </template>
      <base-treeview :is-open="true">
        <template #header="slotProps">
          <base-icon v-if="!slotProps.isOpen" icon="i-far-folder" class="w-4 h-4" />
          <base-icon v-if="slotProps.isOpen" icon="i-far-folder-open" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1</p>
        </template>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.1</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.2</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.3</p>
        </base-button>
      </base-treeview>
      <base-treeview>
        <template #header="slotProps">
          <i
            class="i-far-folder"
            :class="{
              'i-far-folder-open': slotProps.isOpen
            }"
          ></i>
          <p class="flex-1 text-left">Child 2</p>
        </template>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.1</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.2</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.3</p>
        </base-button>
      </base-treeview>
    </component>
    <base-treeview>
      <template #header="slotProps">
        <base-icon v-if="!slotProps.isOpen" icon="i-far-folder" class="w-4 h-4" />
        <base-icon v-if="slotProps.isOpen" icon="i-far-folder-open" class="w-4 h-4" />
        <p class="flex-1 text-left">Parent 2</p>
      </template>
      <base-treeview>
        <template #header="slotProps">
          <i
            class="i-far-folder"
            :class="{
              'i-far-folder-open': slotProps.isOpen
            }"
          ></i>
          <p class="flex-1 text-left">Child 1</p>
        </template>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.1</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.2</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 1.3</p>
        </base-button>
      </base-treeview>
      <base-treeview>
        <template #header="slotProps">
          <i
            class="i-far-folder"
            :class="{
              'i-far-folder-open': slotProps.isOpen
            }"
          ></i>
          <p class="flex-1 text-left">Child 2</p>
        </template>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.1</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.2</p>
        </base-button>
        <base-button is-block class="space-x-4">
          <base-icon icon="i-far-file-lines" class="w-4 h-4" />
          <p class="flex-1 text-left">Child 2.3</p>
        </base-button>
      </base-treeview>
    </component>
  </Demo>
</template>

Treeview API

Slot

#default slot for rendering button content

#header slot for rendering treeview button