CARD
Tarjeta con titulo opcional. Hereda radio y paleta del tema.
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 |
|---|---|---|---|---|---|
| title | texto | No | — | — | Titulo. |
| description | texto | No | — | — | Subtitulo. |
| icon | icono (Lucide) | No | — | — | 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. |
| tone | enum | No | "neutral""primary""success""warning""danger""info" | "neutral" | Acentua el borde con la intencion (neutral = sin acento). |
| variant | enum | No | "outline""flat""elevated" | "outline" | Aspecto de la superficie. |
| density | enum | No | "compact""comfortable""spacious" | "comfortable" | Relleno interior. |
| footer | componentes | No | — | — | Pie (botones, notas). |
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
- SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue - CONFIRM
Pide confirmacion y encadena onConfirm/onCancel.
Obligatorios: — · Campos:
messageonConfirmonCancel - 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 - TOAST
Muestra un aviso breve.
Obligatorios:
message· Campos:messagevarianttone
Acciones que lo controlan
Ninguna.
Ejemplo en un manifest real
Tomado de bloomx-extensions/quick-notes/manifest.json (core-quick-notes), en mounts[0].component.children[1].props.endPane.props.false.props.true (punto PAGE).
También se usa en: composer-helper/manifest.json, domain-metrics/manifest.json.
{
"type": "CARD",
"props": {
"title": "${state.selected.title}"
},
"children": [
{
"type": "TEXT",
"props": {
"content": "${state.selected.body}"
}
},
{
"type": "ROW",
"props": {
"gap": 2
},
"children": [
{
"type": "BUTTON",
"props": {
"label": {
"es": "Editar",
"en": "Edit"
},
"icon": "Pencil",
"variant": "outline",
"onClick": [
{
"action": "SET_STATE",
"key": "draft",
"value": "${state.selected}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
{
"type": "BUTTON",
"props": {
"label": {
"es": "Eliminar",
"en": "Delete"
},
"icon": "Trash2",
"tone": "danger",
"variant": "outline",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar esta nota?",
"en": "Delete this note?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": [
"${state.selected.id}"
]
},
"key": "deleteNote",
"onSuccess": [
{
"action": "SET_STATE",
"key": "selected",
"value": null
},
{
"action": "SET_STATE",
"key": "mode",
"value": "none"
},
{
"action": "SET_STATE",
"key": "checked",
"value": []
},
{
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
{
"action": "TOAST",
"message": {
"es": "Notas eliminadas",
"en": "Notes deleted"
},
"tone": "success"
}
]
}
}
}
}
]
}
]
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "PAGE",
"component": {
"type": "CARD",
"props": {
"title": "${state.selected.title}"
},
"children": [
{
"type": "TEXT",
"props": {
"content": "${state.selected.body}"
}
},
{
"type": "ROW",
"props": {
"gap": 2
},
"children": [
{
"type": "BUTTON",
"props": {
"label": {
"es": "Editar",
"en": "Edit"
},
"icon": "Pencil",
"variant": "outline",
"onClick": [
{
"action": "SET_STATE",
"key": "draft",
"value": "${state.selected}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
{
"type": "BUTTON",
"props": {
"label": {
"es": "Eliminar",
"en": "Delete"
},
"icon": "Trash2",
"tone": "danger",
"variant": "outline",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar esta nota?",
"en": "Delete this note?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": [
"${state.selected.id}"
]
},
"key": "deleteNote",
"onSuccess": [
{
"action": "SET_STATE",
"key": "selected",
"value": null
},
{
"action": "SET_STATE",
"key": "mode",
"value": "none"
},
{
"action": "SET_STATE",
"key": "checked",
"value": []
},
{
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
{
"action": "TOAST",
"message": {
"es": "Notas eliminadas",
"en": "Notes deleted"
},
"tone": "success"
}
]
}
}
}
}
]
}
]
}
}
]
}