SPLIT_PANE
Categoría: EstructuraSin hijos
Dos paneles (p. ej. lista y detalle): lado a lado en escritorio y apilados en pantallas estrechas. Redimensionable con raton o teclado si resizable.
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 |
|---|---|---|---|---|---|
| startPane | componentes | No | — | — | Panel principal (izquierda; arriba en movil). |
| endPane | componentes | No | — | — | Panel secundario (derecha; debajo en movil). |
| ratio | enum | No | "1:3""1:2""1:1""2:1""3:1" | "1:2" | Proporcion de ancho startPane:endPane. |
| resizable | booleano | No | truefalse | — | El usuario mueve el divisor (arrastrar o flechas izquierda/derecha, Inicio/Fin). |
| gap | enum | No | 012345681012 | 4 | Espacio en escala de 4px (0-12). |
| sticky | booleano | No | truefalse | — | El panel principal (startPane) queda fijo al desplazar la pagina (solo escritorio). |
| startLabel | texto | No | — | — | Nombre accesible de startPane. |
| endLabel | texto | No | — | — | Nombre accesible de endPane. |
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 - 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 - CONFIRM
Pide confirmacion y encadena onConfirm/onCancel.
Obligatorios: — · Campos:
messageonConfirmonCancel - 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] (punto PAGE).
{
"type": "SPLIT_PANE",
"props": {
"ratio": "2:1",
"gap": 6,
"startLabel": {
"es": "Lista de notas",
"en": "Notes list"
},
"endLabel": {
"es": "Detalle de la nota",
"en": "Note detail"
},
"startPane": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.notesData && state.notesData.count == 0 && !state.$error.listNotes}",
"true": {
"type": "EMPTY",
"props": {
"icon": "NotebookPen",
"title": {
"es": "Aún no tienes notas",
"en": "You have no notes yet"
},
"description": {
"es": "Crea tu primera nota para empezar.",
"en": "Create your first note to get started."
},
"actionLabel": {
"es": "Nueva nota",
"en": "New note"
},
"action": [
{
"action": "SET_STATE",
"key": "draft",
"value": {}
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
"false": {
"type": "TABLE",
"props": {
"caption": {
"es": "Notas",
"en": "Notes"
},
"columns": [
{
"key": "title",
"label": {
"es": "Título",
"en": "Title"
},
"sortable": true
},
{
"key": "preview",
"label": {
"es": "Texto",
"en": "Text"
}
},
{
"key": "updatedAt",
"label": {
"es": "Modificada",
"en": "Modified"
},
"sortable": true,
"format": "datetime"
}
],
"data": "${state.notesData.notes}",
"rowKey": "id",
"selectable": "multiple",
"bind": "checked",
"searchable": true,
"searchPlaceholder": {
"es": "Buscar notas",
"en": "Search notes"
},
"defaultSort": {
"key": "updatedAt",
"dir": "desc"
},
"pageSize": 10,
"emptyText": {
"es": "Ninguna nota coincide",
"en": "No notes match"
},
"loading": "${state.$loading.listNotes}",
"error": "${state.$error.listNotes}",
"onRetry": {
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
"onRowClick": [
{
"action": "SET_STATE",
"key": "selected",
"value": "${row}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "view"
}
],
"actions": [
{
"label": {
"es": "Eliminar",
"en": "Delete"
},
"icon": "Trash2",
"tone": "danger",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar esta nota?",
"en": "Delete this note?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": [
"${row.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"
}
]
}
}
}
],
"bulkActions": [
{
"label": {
"es": "Eliminar seleccionadas",
"en": "Delete selected"
},
"icon": "Trash2",
"tone": "danger",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar las notas seleccionadas?",
"en": "Delete the selected notes?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": "${state.checked}"
},
"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"
}
]
}
}
}
]
}
}
}
},
"endPane": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.mode == 'edit'}",
"true": {
"type": "CARD",
"props": {
"title": {
"es": "Nota",
"en": "Note"
}
},
"children": [
{
"type": "FORM",
"props": {
"fields": [
{
"name": "title",
"label": {
"es": "Título",
"en": "Title"
},
"type": "text",
"required": true,
"defaultValue": "${state.draft.title}",
"rules": {
"required": true,
"maxLength": 120,
"message": {
"es": "El título es obligatorio (máximo 120 caracteres)",
"en": "The title is required (maximum 120 characters)"
}
}
},
{
"name": "body",
"label": {
"es": "Texto",
"en": "Text"
},
"type": "textarea",
"rows": 8,
"defaultValue": "${state.draft.body}",
"rules": {
"maxLength": 2000,
"message": {
"es": "Máximo 2000 caracteres",
"en": "Maximum 2000 characters"
}
}
}
],
"submitLabel": {
"es": "Guardar",
"en": "Save"
},
"cancelLabel": {
"es": "Cancelar",
"en": "Cancel"
},
"validateOn": "blur",
"onSubmit": {
"action": "CALL_BACKEND",
"function": "saveNote",
"args": {
"id": "${state.draft.id}"
},
"key": "saveNote",
"retry": {
"attempts": 1
},
"onSuccess": [
{
"action": "SET_STATE",
"key": "selected",
"value": "${result.note}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "view"
},
{
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
{
"action": "TOAST",
"message": {
"es": "Nota guardada",
"en": "Note saved"
},
"tone": "success"
}
]
},
"onCancel": {
"action": "SET_STATE",
"key": "mode",
"value": "${state.selected ? 'view' : 'none'}"
}
}
}
]
},
"false": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.selected}",
"true": {
"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"
}
]
}
}
}
}
]
}
]
},
"false": {
"type": "EMPTY",
"props": {
"icon": "NotebookPen",
"title": {
"es": "Selecciona una nota",
"en": "Select a note"
},
"description": {
"es": "Elige una nota de la lista para verla aquí.",
"en": "Pick a note from the list to see it here."
}
}
}
}
}
}
}
}
}{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "PAGE",
"component": {
"type": "SPLIT_PANE",
"props": {
"ratio": "2:1",
"gap": 6,
"startLabel": {
"es": "Lista de notas",
"en": "Notes list"
},
"endLabel": {
"es": "Detalle de la nota",
"en": "Note detail"
},
"startPane": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.notesData && state.notesData.count == 0 && !state.$error.listNotes}",
"true": {
"type": "EMPTY",
"props": {
"icon": "NotebookPen",
"title": {
"es": "Aún no tienes notas",
"en": "You have no notes yet"
},
"description": {
"es": "Crea tu primera nota para empezar.",
"en": "Create your first note to get started."
},
"actionLabel": {
"es": "Nueva nota",
"en": "New note"
},
"action": [
{
"action": "SET_STATE",
"key": "draft",
"value": {}
},
{
"action": "SET_STATE",
"key": "mode",
"value": "edit"
}
]
}
},
"false": {
"type": "TABLE",
"props": {
"caption": {
"es": "Notas",
"en": "Notes"
},
"columns": [
{
"key": "title",
"label": {
"es": "Título",
"en": "Title"
},
"sortable": true
},
{
"key": "preview",
"label": {
"es": "Texto",
"en": "Text"
}
},
{
"key": "updatedAt",
"label": {
"es": "Modificada",
"en": "Modified"
},
"sortable": true,
"format": "datetime"
}
],
"data": "${state.notesData.notes}",
"rowKey": "id",
"selectable": "multiple",
"bind": "checked",
"searchable": true,
"searchPlaceholder": {
"es": "Buscar notas",
"en": "Search notes"
},
"defaultSort": {
"key": "updatedAt",
"dir": "desc"
},
"pageSize": 10,
"emptyText": {
"es": "Ninguna nota coincide",
"en": "No notes match"
},
"loading": "${state.$loading.listNotes}",
"error": "${state.$error.listNotes}",
"onRetry": {
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
"onRowClick": [
{
"action": "SET_STATE",
"key": "selected",
"value": "${row}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "view"
}
],
"actions": [
{
"label": {
"es": "Eliminar",
"en": "Delete"
},
"icon": "Trash2",
"tone": "danger",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar esta nota?",
"en": "Delete this note?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": [
"${row.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"
}
]
}
}
}
],
"bulkActions": [
{
"label": {
"es": "Eliminar seleccionadas",
"en": "Delete selected"
},
"icon": "Trash2",
"tone": "danger",
"onClick": {
"action": "CONFIRM",
"message": {
"es": "¿Eliminar las notas seleccionadas?",
"en": "Delete the selected notes?"
},
"onConfirm": {
"action": "CALL_BACKEND",
"function": "deleteNote",
"args": {
"ids": "${state.checked}"
},
"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"
}
]
}
}
}
]
}
}
}
},
"endPane": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.mode == 'edit'}",
"true": {
"type": "CARD",
"props": {
"title": {
"es": "Nota",
"en": "Note"
}
},
"children": [
{
"type": "FORM",
"props": {
"fields": [
{
"name": "title",
"label": {
"es": "Título",
"en": "Title"
},
"type": "text",
"required": true,
"defaultValue": "${state.draft.title}",
"rules": {
"required": true,
"maxLength": 120,
"message": {
"es": "El título es obligatorio (máximo 120 caracteres)",
"en": "The title is required (maximum 120 characters)"
}
}
},
{
"name": "body",
"label": {
"es": "Texto",
"en": "Text"
},
"type": "textarea",
"rows": 8,
"defaultValue": "${state.draft.body}",
"rules": {
"maxLength": 2000,
"message": {
"es": "Máximo 2000 caracteres",
"en": "Maximum 2000 characters"
}
}
}
],
"submitLabel": {
"es": "Guardar",
"en": "Save"
},
"cancelLabel": {
"es": "Cancelar",
"en": "Cancel"
},
"validateOn": "blur",
"onSubmit": {
"action": "CALL_BACKEND",
"function": "saveNote",
"args": {
"id": "${state.draft.id}"
},
"key": "saveNote",
"retry": {
"attempts": 1
},
"onSuccess": [
{
"action": "SET_STATE",
"key": "selected",
"value": "${result.note}"
},
{
"action": "SET_STATE",
"key": "mode",
"value": "view"
},
{
"action": "CALL_BACKEND",
"function": "listNotes",
"key": "listNotes",
"resultKey": "notesData",
"toastOnError": false
},
{
"action": "TOAST",
"message": {
"es": "Nota guardada",
"en": "Note saved"
},
"tone": "success"
}
]
},
"onCancel": {
"action": "SET_STATE",
"key": "mode",
"value": "${state.selected ? 'view' : 'none'}"
}
}
}
]
},
"false": {
"type": "CONDITIONAL",
"props": {
"condition": "${state.selected}",
"true": {
"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"
}
]
}
}
}
}
]
}
]
},
"false": {
"type": "EMPTY",
"props": {
"icon": "NotebookPen",
"title": {
"es": "Selecciona una nota",
"en": "Select a note"
},
"description": {
"es": "Elige una nota de la lista para verla aquí.",
"en": "Pick a note from the list to see it here."
}
}
}
}
}
}
}
}
}
}
]
}