GRID
Rejilla de columnas iguales; en movil se reduce sola.
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 |
|---|---|---|---|---|---|
| columns | enum | No | 123456 | 2 | Numero de columnas (escritorio). |
| gap | enum | No | 012345681012 | 3 | Espacio en escala de 4px (0-12). |
| maxHeight | enum | No | "sm""md""lg""xl" | — | Limita la altura y activa el scroll. |
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
- INSERT_CONTENT
Inserta HTML/texto en el editor del composer.
Obligatorios:
content· Campos:contentcloseOverlay
Acciones que lo controlan
Ninguna.
Ejemplo en un manifest real
Tomado de bloomx-extensions/giphy/manifest.json (core-giphy), en mounts[1].component.children[0].children[0].props.false[0].children[1].props.false[0].props.false[0].props.true[0] (punto OVERLAY).
También se usa en: domain-metrics/manifest.json.
{
"type": "GRID",
"props": {
"columns": 3,
"gap": 2,
"maxHeight": "lg"
},
"children": [
{
"type": "FOR_EACH",
"props": {
"items": "${state.gifs}",
"as": "item",
"template": {
"type": "IMAGE_BUTTON",
"props": {
"src": "${item.images.fixed_height_small.url}",
"alt": "${item.title || \"GIF\"}",
"onClick": {
"action": "INSERT_CONTENT",
"content": "<img src=\"${item.images.original.url}\" alt=\"${item.title}\" style=\"max-width:100%;height:auto\" />",
"closeOverlay": true
}
}
}
}
}
]
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "OVERLAY",
"component": {
"type": "GRID",
"props": {
"columns": 3,
"gap": 2,
"maxHeight": "lg"
},
"children": [
{
"type": "FOR_EACH",
"props": {
"items": "${state.gifs}",
"as": "item",
"template": {
"type": "IMAGE_BUTTON",
"props": {
"src": "${item.images.fixed_height_small.url}",
"alt": "${item.title || \"GIF\"}",
"onClick": {
"action": "INSERT_CONTENT",
"content": "<img src=\"${item.images.original.url}\" alt=\"${item.title}\" style=\"max-width:100%;height:auto\" />",
"closeOverlay": true
}
}
}
}
}
]
}
}
]
}