TREE
Arbol navegable accesible (WAI-ARIA tree: flechas, Inicio/Fin, Intro). Nodos {id, label, icon?, badge?, children?}.
En esta página
Props
Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.
| Prop | Tipo | Requerido | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|---|
| items | cualquiera | No | — | — | Arbol [{id,label,description?,icon?,badge?,children?:[...]}]; max 500 nodos y 8 niveles. |
| bind | nombre | No | — | — | Clave de state con el id del nodo elegido. |
| label | texto | No | — | — | Nombre accesible del arbol. |
| defaultExpanded | numero | No | 0 … 8 | 1 | Niveles abiertos al inicio (0 = todo cerrado). |
| onSelect | accion(es)acción | No | — | — | Accion al elegir un nodo (recibe value: su id; y item). |
| emptyText | texto | No | — | — | Texto si no hay nodos. |
| loading | booleano | No | truefalse | — | Muestra esqueleto. |
Props comunes a todos los componentes
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| hidden | booleano | truefalse | — | true oculta el componente (admite expresiones). |
| onLoad | accion(es)acción | — | — | Accion que se ejecuta una vez al montar. |
| onLoadWhen | cualquiera | — | — | Condicion: onLoad se ejecuta cuando pasa a verdadera. |
| ariaLabel | texto | — | — | Nombre accesible explicito. |
Eventos y acciones que acepta
Props que ejecutan una acción (o cadena de acciones). Las variables disponibles en ${...} dentro de la acción son las que recibe cada evento.
| Evento | Recibe | Descripción |
|---|---|---|
| onSelect | ${value} | Accion al elegir un nodo (recibe value: su id; y item). |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
bindEnlace bidireccional: lee y escribe
state.<clave>(admite rutas "a.b"). Vervalue/defaultValue.loadingAcepta
${state.$loading.<clave>}: CALL_BACKEND/CALL_API mantienen esa marca solos.items / data / rows / optionsLos datos suelen venir de
${state.<clave>}(rellenada porresultKeyde CALL_BACKEND) o de${context.*}.hidden / onLoadWhenCondiciones comunes:
hidden: "${!state.x}"oculta el componente;onLoadWhenejecutaonLoadal pasar a verdadera.
Simulador interactivo
Renderiza el JSON validado con el mismo renderer y el mismo kit que la app, con el tema actual de esta página. Nada sale a la red: CALL_BACKEND usa una respuesta simulada.
Acciones relacionadas
Acciones que este componente puede disparar desde sus props de acción (cualquiera de UI_ACTIONS) y las que lo controlan. Detalle de cada acción en la sección de acciones.
Usadas en sus ejemplos y manifests
Ninguna.
Acciones que lo controlan
- SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue - SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Ningún manifest de bloomx-extensions usa todavía este componente. Este es el ejemplo del esquema (ui-examples.ts) dentro de un manifest mínimo.
{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "EMAIL_TOOLBAR",
"component": {
"type": "STACK",
"props": {
"gap": 2
},
"children": [
{
"type": "TREE",
"props": {
"label": "Carpetas",
"bind": "folderSel",
"defaultExpanded": 1,
"items": [
{
"id": "inbox",
"label": "Entrada",
"icon": "Inbox",
"badge": "3"
},
{
"id": "projects",
"label": "Proyectos",
"icon": "Folder",
"children": [
{
"id": "p-a",
"label": "Proyecto A"
},
{
"id": "p-b",
"label": "Proyecto B",
"children": [
{
"id": "p-b-1",
"label": "Facturas"
}
]
}
]
},
{
"id": "archive",
"label": "Archivo",
"icon": "Archive"
}
]
}
},
{
"type": "TEXT",
"props": {
"content": "Elegido: ${state.folderSel | default:\"(ninguno)\"}",
"variant": "muted"
}
}
]
}
}
]
}