STACK
Apila hijos en vertical con un espacio de la escala.
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 |
|---|---|---|---|---|---|
| gap | enum | No | 012345681012 | 3 | Espacio en escala de 4px (0-12). |
| align | enum | No | "start""center""end""stretch""baseline" | "stretch" | Alineacion en el eje transversal. |
| justify | enum | No | "start""center""end""between""around" | "start" | Distribucion en el eje principal. |
| wrap | booleano | No | truefalse | — | Permite saltar de linea. |
| padding | enum | No | 012345681012 | 0 | Relleno interior en escala. |
| fullWidth | booleano | No | truefalse | true | Ocupa todo el ancho. |
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.
No tiene eventos propios (solo onLoad, común a todos).
| Evento | Recibe | Descripción |
|---|---|---|
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
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_API
Llama a una ruta del propio origen (/api/...).
Obligatorios:
url· Campos:urlmethodheadersbodyargsparamsemitEventkey - ADD_ATTACHMENT
Adjunta un archivo (url o contentBase64).
Obligatorios: — · Campos:
attachmenturlfilenamemimeTypecontentBase64size - SET_SUBJECT
Fija el asunto del correo.
Obligatorios: — · Campos:
subjectvalueifEmpty - TOAST
Muestra un aviso breve.
Obligatorios:
message· Campos:messagevarianttone - CLOSE_OVERLAY
Cierra el overlay actual.
Obligatorios: — · Campos: —
Acciones que lo controlan
Ninguna.
Ejemplo en un manifest real
Tomado de bloomx-extensions/calendar/manifest.json (core-calendar), en mounts[3].component.children[0] (punto OVERLAY).
También se usa en: composer-helper/manifest.json, domain-metrics/manifest.json, giphy/manifest.json, github-issues/manifest.json, quick-notes/manifest.json.
{
"type": "STACK",
"props": {
"gap": 2
},
"children": [
{
"type": "FOR_EACH",
"props": {
"items": "${state.existingEvents}",
"as": "eventItem",
"empty": {
"type": "EMPTY",
"props": {
"icon": "CalendarX",
"title": {
"es": "Aún no hay eventos",
"en": "No events yet"
},
"description": {
"es": "Crea tu primer evento y vuelve a intentarlo.",
"en": "Create your first event and try again."
}
}
},
"template": {
"type": "BUTTON",
"props": {
"label": "${eventItem.displayTitle || eventItem.title || 'Untitled event'}",
"icon": "CalendarDays",
"onClick": {
"action": "CALL_API",
"url": "/api/calendar/events/${eventItem.id}/attach-invite",
"method": "POST",
"body": {
"to": "${context.to}",
"cc": "${context.cc}"
},
"onSuccess": {
"actions": [
{
"action": "ADD_ATTACHMENT",
"attachment": "${result.attachment}"
},
{
"action": "SET_SUBJECT",
"subject": "${result.subject}",
"ifEmpty": true
},
{
"action": "TOAST",
"message": {
"es": "Invitación del evento adjuntada",
"en": "Selected event invite attached"
}
},
{
"action": "CLOSE_OVERLAY"
}
]
}
},
"variant": "outline",
"fullWidth": true,
"align": "start"
}
}
}
}
]
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "OVERLAY",
"component": {
"type": "STACK",
"props": {
"gap": 2
},
"children": [
{
"type": "FOR_EACH",
"props": {
"items": "${state.existingEvents}",
"as": "eventItem",
"empty": {
"type": "EMPTY",
"props": {
"icon": "CalendarX",
"title": {
"es": "Aún no hay eventos",
"en": "No events yet"
},
"description": {
"es": "Crea tu primer evento y vuelve a intentarlo.",
"en": "Create your first event and try again."
}
}
},
"template": {
"type": "BUTTON",
"props": {
"label": "${eventItem.displayTitle || eventItem.title || 'Untitled event'}",
"icon": "CalendarDays",
"onClick": {
"action": "CALL_API",
"url": "/api/calendar/events/${eventItem.id}/attach-invite",
"method": "POST",
"body": {
"to": "${context.to}",
"cc": "${context.cc}"
},
"onSuccess": {
"actions": [
{
"action": "ADD_ATTACHMENT",
"attachment": "${result.attachment}"
},
{
"action": "SET_SUBJECT",
"subject": "${result.subject}",
"ifEmpty": true
},
{
"action": "TOAST",
"message": {
"es": "Invitación del evento adjuntada",
"en": "Selected event invite attached"
}
},
{
"action": "CLOSE_OVERLAY"
}
]
}
},
"variant": "outline",
"fullWidth": true,
"align": "start"
}
}
}
}
]
}
}
]
}