Tree

Penggunaan

items adalah array bersarang - node dengan children merender sebagai baris yang dapat diperluas, node tanpanya merender sebagai leaf. Klik baris untuk memperluasnya (dan memilihnya, jika ia adalah leaf):

<script setup lang="ts">
const items = [
  {
    label: 'Documents',
    value: 'documents',
    children: [
      { label: 'Resume.pdf', value: 'resume' },
      { label: 'Cover Letter.docx', value: 'cover-letter' },
    ],
  },
  { label: 'Notes.txt', value: 'notes' },
]
</script>

<template>
  <STree :items="items" />
</template>

Multiple selection

multiple membuat v-model menjadi array daripada satu node. default-expanded (array keys) membuka cabang segera, tanpa perlu klik:

<STree v-model="selected" :items="items" multiple :default-expanded="['frontend', 'backend']" />

Checkbox mode

checkbox menunjukkan checkbox tri-state per baris (menggunakan model checked/unchecked/indeterminate milik SCheckbox sendiri) dan mengaktifkan multiple bersama propagasi parent↔child: memilih parent mencentang setiap descendant, dan mencentang semua child node mencentang parent juga (mencentang sebagian menandainya indeterminate sebagai gantinya):

<STree v-model="selected" :items="items" checkbox :default-expanded="['permissions']" />

Konten item kustom

Slot item menggantikan konten ikon+label default baris, di-scope dengan node itu sendiri plus state expanded/selected/indeterminate live:

<STree :items="items">
  <template #item="{ item }">
    <span class="flex flex-1 items-center justify-between">
      <span>{{ item.label }}</span>
      <SBadge v-if="item.badge" :label="item.badge" size="sm" variant="soft" />
    </span>
  </template>
</STree>

Disabled items

disabled: true pada node memblokir hanya baris itu - siblings tetap interaktif:

<STree :items="items" />

const items = [
  { label: 'Members', value: 'members' },
  { label: 'Billing', value: 'billing', disabled: true },
]

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Tree sendiri:

Props

Events

Slots