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..." />

Livewire y el morph

La raíz del árbol lleva wire:ignore, y hay que saberlo.

El árbol guarda en Alpine qué ramas están abiertas y qué nodos marcados, y eso el servidor no lo emite: en el siguiente render, el morph se lo llevaba por delante y el árbol se quedaba muerto. Por eso la raíz va con wire:ignore.

La consecuencia: si pintas contenido propio dentro del árbol contando con que el servidor lo actualice, no se actualizará. Sácalo fuera.

Accesibilidad

Un lector de pantalla dice en qué rama va y cuántas hay.

  • Cada nodo lleva aria-setsize y aria-posinset, que es lo que ARIA pide para poder decir «3 de 7». Con un filtro puesto cuenta los que quedan, no los que había.
  • El nombre de la región y el marcador de posición del filtro salen de kore-ui.ui.translations; el filtro decía «Filter...» hasta la 2.0.

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
ariaLabel string|null config Nombre del árbol, para distinguir varios en la misma página
Cargando