Todos los componentes (204)

Árbol

Navegación · Tree · .amset-tree

Qué es y cuándo usarlo

Cosas dentro de cosas: las categorías de la tienda, las carpetas de un archivo. Cada rama se abre y se cierra, y se puede elegir una, varias o ninguna.

Cuándo usarlo

Jerarquías de tres niveles o más, o de dos pero largas, donde hace falta ver de dónde cuelga cada cosa.
detail para lo pequeño de la derecha (cuántos productos hay dentro); icon para distinguir las ramas de un vistazo.
selection="multiple" para marcar varias categorías, con cascade si marcar una rama tiene que marcar todo lo de dentro (la rama a medias se ve y se anuncia como «elegida en parte»); "none" si el árbol solo sirve para recorrer.
loadData para pedir los hijos de una rama al abrirla (una rama con isLeaf: false y sin children): mientras llegan lleva su anillo y se anuncia loadingText («Cargando…»).

Cuándo no

Dos niveles cortos: casi siempre se lee mejor una SelectableList con secciones.
Para el menú de la aplicación: SideNav.
Para secciones de texto plegables: Accordion.

Teclado: Tab entra en el árbol. Las flechas arriba y abajo recorren las ramas visibles, e Inicio y Fin van a la primera y a la última; la derecha abre una rama cerrada y la izquierda la cierra o sube a la madre, como en cualquier explorador de archivos. Intro o Espacio eligen, y escribir las primeras letras salta a la rama que empieza así. Una rama deshabilitada no coge el foco ni se puede elegir.

Accesibilidad: es un treegrid con nombre obligatorio (label). Cada rama dice su nivel (aria-level) y si está abierta (aria-expanded), no solo con la flecha. Los iconos son decorativos y la marca de elegida ocupa su sitio siempre, para que las filas no bailen.

Aspecto fino: variables CSS --amset-tree-*: -detail, -font, -gap, -padding, -radius, -row-padding. El tamaño mueve el relleno de la caja y de cada fila, y el cuerpo de letra.

Cómo se ve

Documentos

Imagenes

<Tree
  label="Carpetas"
  branches={[
    { key: 'docs', label: 'Documentos', children: [
      { key: 'con', label: 'Contratos', detail: '12 ficheros' },
    ] },
  ]}
/>

Props

Se importa con import { Tree } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`branches`obligatoria	`readonly TreeNode[]`	—
`label`obligatoria	`string`	De que es el arbol: "Categorías de la tienda". Obligatorio.
`cascade`	`boolean`	Marcar una rama marca todo lo de dentro, y una rama con solo una parte marcada se ve «a medias». El valor es el conjunto de claves marcadas: una rama figura solo si todo lo que se puede marcar dentro de ella lo esta. Lo apagado no se toca.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`initialOpenKeys`	`readonly string[]`	—
`initialValue`	`string \| readonly string[]`	—
`loadData`	`(key: string) => Promise<readonly TreeNode[]>`	Pide los hijos de una rama la primera vez que se abre (carga diferida). La rama lleva `isLeaf: false` y no trae `children`. Si falla, la rama se queda cerrada y se puede reintentar.
`loadingText`	`string`	Lo que se anuncia mientras llegan los hijos. Por defecto, «Cargando…».
`onChange`	`((key: string \| null) => void) \| ((keys: readonly string[]) => void)`	—
`onOpen`	`(keys: readonly string[]) => void`	—
`openKeys`	`readonly string[]`	Claves abiertas. Si no se pasa, el arbol las lleva por dentro.
`selection`	`"multiple" \| "none" \| "single"`	—
`size`	`"sm" \| "md" \| "lg"`	El relleno de cada fila y el cuerpo de letra.
`value`	`string \| readonly string[] \| null`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-tree-padding`	`var(--amset-space-1)`
`--amset-tree-row-padding`	`var(--amset-space-2)`
`--amset-tree-gap`	`var(--amset-space-2)`
`--amset-tree-font`	`var(--amset-text-base)`
`--amset-tree-detail`	`var(--amset-text-sm)`
`--amset-tree-radius`	`var(--amset-radius)`

Cómo se cambia

.amset-tree {
  --amset-tree-padding: ...;
  --amset-tree-row-padding: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: