K
KoreUI

Tree

UI

Componente de árbol jerárquico con expand/collapse, selección, filtrado y múltiples modos de selección.

Uso básico

<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'license', 'label' => 'LICENSE', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => [
        ['key' => 'index', 'label' => 'index.js', 'icon' => 'file', 'children' => []],
    ]],
]" />
<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'license', 'label' => 'LICENSE', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => [
        ['key' => 'index', 'label' => 'index.js', 'icon' => 'file', 'children' => []],
    ]],
]" />

Selección

Habilita la selección con diferentes modos: single, multiple o checkbox.

<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'license', 'label' => 'LICENSE', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => []],
]" :selectable="true" selectionMode="checkbox" />
<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'license', 'label' => 'LICENSE', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => []],
]" :selectable="true" selectionMode="checkbox" />

Filtro

Muestra un campo de búsqueda para filtrar nodos del árbol.

<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'changelog', 'label' => 'CHANGELOG.md', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => [
        ['key' => 'app', 'label' => 'app.js', 'icon' => 'file', 'children' => []],
    ]],
]" :filter="true" filterPlaceholder="Buscar..." />
<x-kore::tree :nodes="[
    ['key' => 'docs', 'label' => 'Documents', 'icon' => 'folder', 'children' => [
        ['key' => 'readme', 'label' => 'README.md', 'icon' => 'file-text', 'children' => []],
        ['key' => 'changelog', 'label' => 'CHANGELOG.md', 'icon' => 'file-text', 'children' => []],
    ]],
    ['key' => 'src', 'label' => 'Source', 'icon' => 'folder', 'children' => [
        ['key' => 'app', 'label' => 'app.js', 'icon' => 'file', 'children' => []],
    ]],
]" :filter="true" filterPlaceholder="Buscar..." />

Props

Prop Tipo Default Descripción
nodes array [] Datos del árbol
selectable bool false Habilitar selección
selectionMode string single Modo: single, multiple, checkbox
expandedKeys array [] Nodos expandidos inicialmente
selectedKeys array [] Nodos seleccionados inicialmente
filter bool false Mostrar campo de filtro
filterPlaceholder string Filter... Placeholder del filtro