PAGE_HEADER
Cabecera de una pagina completa: migas de pan, titulo (h1), estado, descripcion y acciones; muestra su propio estado de carga y error con Reintentar.
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 | Sí | — | — | Titulo de la pagina (h1). |
| description | texto | No | — | — | Texto de apoyo bajo el titulo. |
| 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. |
| breadcrumbs | arreglo de objeto | No | — | — | Migas de pan (max 6). |
| status | objeto | No | — | — | Estado de la pagina (etiqueta junto al titulo). |
| actions | componentes | No | — | — | Acciones (BUTTON, MENU...) a la derecha; en movil pasan debajo. |
| loading | booleano | No | truefalse | — | Muestra el esqueleto del titulo. |
| error | texto | No | — | — | Mensaje de error: muestra un aviso en lugar del estado. |
| onRetry | accion(es)acción | No | — | — | Accion del boton Reintentar (solo con error). |
Estructuras anidadas
breadcrumbs[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| breadcrumbs[].label | texto | — | — | Texto del tramo. |
| breadcrumbs[].url | URL segura | — | — | Ruta interna (empieza por /) o URL; sin url ni onClick es el tramo actual. |
| breadcrumbs[].onClick | accion(es)acción | — | — | Accion en lugar de navegar. |
status
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| status.label | texto | — | — | Texto del estado. |
| status.tone | enum | "neutral""primary""success""warning""danger""info" | "neutral" | Intencion semantica; el tema decide el color. |
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 |
|---|---|---|
| breadcrumbs[].onClick | — | Accion en lugar de navegar. |
| onRetry | — | Accion del boton Reintentar (solo con error). |
| onLoad | — | Accion que se ejecuta una vez al montar. |
Estado y contexto que usa
Cómo interactúa con state y context (expresiones ${...}).
loadingAcepta
${state.$loading.<clave>}: CALL_BACKEND/CALL_API mantienen esa marca solos.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
- REFRESH
Refresca los datos de la pagina.
Obligatorios: — · Campos: —
- TOAST
Muestra un aviso breve.
Obligatorios:
message· Campos:messagevarianttone - SET_STATE
Guarda
valueenstate[key](la clave admite ruta con puntos).Obligatorios:
key· Campos:keyvalue - 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
Acciones que lo controlan
- SET_LOADING
Marca una clave como cargando (
state.$loading).Obligatorios:
key· Campos:keyvalue
Ejemplo en un manifest real
Tomado de bloomx-extensions/quick-notes/manifest.json (core-quick-notes), en mounts[0].component.children[0] (punto PAGE).
También se usa en: domain-metrics/manifest.json, github-issues/manifest.json.
{
"type": "PAGE_HEADER",
"props": {
"title": {
"es": "Notas rápidas",
"en": "Quick notes"
},
"description": {
"es": "Tus notas personales, solo visibles para ti.",
"en": "Your personal notes, visible only to you."
},
"icon": "lucide:NotebookPen",
"breadcrumbs": [
{
"label": {
"es": "Inicio",
"en": "Home"
},
"url": "/"
},
{
"label": {
"es": "Notas rápidas",
"en": "Quick notes"
}
}
],
"actions": {
"type": "BUTTON",
"props": {
"label": {
"es": "Nueva nota",
"en": "New note"
},
"icon": "Plus",
"hidden": "${state.mode == 'edit'}",
"onClick": [
{
"action": "SET_STATE",
"key": "draft",
"value": {}
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
"loading": "${state.$loading.listNotes}",
"error": "${state.$error.listNotes}",
"onRetry": {
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
}
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "PAGE",
"component": {
"type": "PAGE_HEADER",
"props": {
"title": {
"es": "Notas rápidas",
"en": "Quick notes"
},
"description": {
"es": "Tus notas personales, solo visibles para ti.",
"en": "Your personal notes, visible only to you."
},
"icon": "lucide:NotebookPen",
"breadcrumbs": [
{
"label": {
"es": "Inicio",
"en": "Home"
},
"url": "/"
},
{
"label": {
"es": "Notas rápidas",
"en": "Quick notes"
}
}
],
"actions": {
"type": "BUTTON",
"props": {
"label": {
"es": "Nueva nota",
"en": "New note"
},
"icon": "Plus",
"hidden": "${state.mode == 'edit'}",
"onClick": [
{
"action": "SET_STATE",
"key": "draft",
"value": {}
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
"loading": "${state.$loading.listNotes}",
"error": "${state.$error.listNotes}",
"onRetry": {
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
}
}
}
}
]
}