TreeView

Árbol de carpetas y archivos desplegable, con guías de nivel.

Cuándo usarlo

Props. items [{id, label, icon, meta, children}], defaultOpen (ids), defaultSelected / selected, onSelect(item), aria-label.

Visual. Filas de 32px, text-sm-semibold en text-tertiary, iconos de 16px; seleccionada bg-secondary_hover. Sangría de 24px por nivel con línea border-secondary.

Uso. Navegación de documentos (Ornatus) o jerarquías de categorías. Más de cuatro niveles es mala señal.

Teclado. Al entrar con Tab el foco va a la fila elegida. Las flechas ↑ ↓ mueven el foco sin elegir, → abre y ← cierra (o sube al padre). Clic, Enter o espacio eligen la fila y abren o cierran la carpeta, también si ya estaba elegida.

Detalles. Sin icon, las carpetas llevan folder y los archivos file-04. textValue en un elemento da el texto para buscar con el teclado cuando label no es texto.

Ejemplos

Notas

Trabajo

roadmap.md

pentest.md

Casa

LEEME.md2 KB

Recetas

Archivo

Props

Prop	Tipo	Por defecto	Descripción
`items`obligatoria	`TreeItem[]`	—	Más de cuatro niveles es mala señal.
`defaultOpen`	`string[]`	`[]`	Ids de las carpetas abiertas al principio.
`defaultSelected`	`string`	—	Elemento seleccionado al principio (no controlado).
`selected`	`string`	—	Elemento seleccionado (controlado).
`onSelect`	`((item: TreeItem) => void)`	—	Al elegir un elemento con clic, Enter o espacio.
`aria-label`	`string`	—	Nombre del árbol para lectores de pantalla.
`className`	`string`	—

Código

import { TreeView } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<TreeView
				aria-label="Documentos"
				items={[{ id: "notas", label: "Notas", children: [{ id: "leeme", label: "LEEME.md" }] }]}
				defaultOpen={["notas"]}
				onSelect={(item) => abrir(item.id)}
			/>
		</>
	);
}

---
import { TreeView } from "@jotis-me/react";
---

<TreeView client:load
	aria-label="Documentos"
	items={[{ id: "notas", label: "Notas", children: [{ id: "leeme", label: "LEEME.md" }] }]}
	defaultOpen={["notas"]}
	onSelect={(item) => abrir(item.id)}
/>

onSelect es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.