TABS
Pestanas accesibles (flechas, Inicio/Fin).
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 |
|---|---|---|---|---|---|
| tabs | arreglo de objeto | No | — | — | Pestanas. |
| bind | nombre | No | — | — | Clave de state con la pestana activa. |
| variant | enum | No | "underline""pills" | "underline" | Aspecto. |
| onChange | accion(es)acción | No | — | — | Al cambiar (recibe value). |
| value | texto | No | — | — | Pestana activa (value o label). |
| label | texto | No | — | — | value de este TAB_ITEM (forma heredada). |
Estructuras anidadas
tabs[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| tabs[].label | texto | — | — | Texto. |
| tabs[].value | nombre | — | — | Identificador. |
| tabs[].icon | icono (Lucide) | — | — | Icono: nombre Lucide (p. ej. "Mail"), "lucide:<Nombre>", "brand:<slug>" (logotipo de una app integrada, p. ej. "brand:zoom") o "initials:<XY>". Un nombre desconocido se muestra como icono generico. |
| tabs[].content | componentes | — | — | Contenido. |
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 |
|---|---|---|
| onChange | ${value} | Al cambiar (recibe value). |
| 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.value / defaultValueValor controlado por expresión (
${state.x}) o valor inicial único.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
- CALL_BACKEND
Llama a una funcion del server.js. Pone
state.$loading[key]/state.$error[key]solos, admite reintento y guarda el resultado conresultKey.Obligatorios:
function· Campos:functionargsparamskeyresultKeyretrytoastOnErroronSuccess - SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue - INSERT_CONTENT
Inserta HTML/texto en el editor del composer.
Obligatorios:
content· Campos:contentcloseOverlay
Acciones que lo controlan
- SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Tomado de bloomx-extensions/google-drive/manifest.json (core-google-drive), en mounts[1].component.props.children[1] (punto OVERLAY).
{
"type": "TABS",
"props": {
"tabs": [
{
"label": "Files",
"content": [
{
"type": "ROW",
"props": {
"children": [
{
"type": "INPUT",
"props": {
"placeholder": "Search files...",
"bindTo": "driveSearch"
}
},
{
"type": "BUTTON",
"props": {
"label": "Search",
"onClick": {
"action": "CALL_BACKEND",
"function": "listFiles",
"args": {
"search": "${state.driveSearch}"
},
"onSuccess": {
"action": "SET_STATE",
"key": "files",
"value": "${result.files}"
}
}
}
}
]
}
},
{
"type": "CONDITIONAL",
"props": {
"condition": "${state.files != null}",
"true": [
{
"type": "LIST",
"props": {
"items": "${state.files}",
"itemTemplate": {
"type": "BUTTON",
"props": {
"label": "${item.name}",
"className": "w-full justify-start",
"variant": "outline",
"onClick": {
"action": "INSERT_CONTENT",
"content": "<a href='${item.webViewLink}' target='_blank' rel='noreferrer'>${item.name}</a>",
"closeOverlay": true
}
}
}
}
}
],
"false": [
{
"type": "TEXT",
"props": {
"content": "Loading files..."
}
}
]
}
}
]
},
{
"label": "Upload",
"content": [
{
"type": "TEXT",
"props": {
"content": "Upload from this panel is not available yet. Use Files tab to insert links from Drive."
}
}
]
}
]
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "OVERLAY",
"component": {
"type": "TABS",
"props": {
"tabs": [
{
"label": "Files",
"content": [
{
"type": "ROW",
"props": {
"children": [
{
"type": "INPUT",
"props": {
"placeholder": "Search files...",
"bindTo": "driveSearch"
}
},
{
"type": "BUTTON",
"props": {
"label": "Search",
"onClick": {
"action": "CALL_BACKEND",
"function": "listFiles",
"args": {
"search": "${state.driveSearch}"
},
"onSuccess": {
"action": "SET_STATE",
"key": "files",
"value": "${result.files}"
}
}
}
}
]
}
},
{
"type": "CONDITIONAL",
"props": {
"condition": "${state.files != null}",
"true": [
{
"type": "LIST",
"props": {
"items": "${state.files}",
"itemTemplate": {
"type": "BUTTON",
"props": {
"label": "${item.name}",
"className": "w-full justify-start",
"variant": "outline",
"onClick": {
"action": "INSERT_CONTENT",
"content": "<a href='${item.webViewLink}' target='_blank' rel='noreferrer'>${item.name}</a>",
"closeOverlay": true
}
}
}
}
}
],
"false": [
{
"type": "TEXT",
"props": {
"content": "Loading files..."
}
}
]
}
}
]
},
{
"label": "Upload",
"content": [
{
"type": "TEXT",
"props": {
"content": "Upload from this panel is not available yet. Use Files tab to insert links from Drive."
}
}
]
}
]
}
}
}
]
}