STEPPER
Indicador de los pasos de un proceso (completado, actual, pendiente, error). Solo informa; para mostrar contenido por pasos usa WIZARD.
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 |
|---|---|---|---|---|---|
| steps | arreglo de objeto | No | — | — | Pasos (max 20). |
| current | numero | No | 0 … 100 | 0 | Indice (desde 0) del paso actual. |
| orientation | enum | No | "horizontal""vertical" | "horizontal" | Disposicion (la horizontal pasa a vertical en pantallas estrechas). |
| onSelect | accion(es)acción | No | — | — | Accion al pulsar un paso completado (recibe value: su indice). |
Estructuras anidadas
steps[]
| Prop | Tipo | Valores permitidos | Por defecto | Descripción |
|---|---|---|---|---|
| steps[].title | texto | — | — | Titulo del paso. |
| steps[].description | texto | — | — | Descripcion corta. |
| steps[].status | enum | "complete""current""upcoming""error" | — | Estado explicito; por defecto se deduce de current. |
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 |
|---|---|---|
| onSelect | ${value} | Accion al pulsar un paso completado (recibe value: su indice). |
| 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
Ninguna.
Acciones que lo controlan
Ninguna.
Ejemplo en un manifest real
Ningún manifest de bloomx-extensions usa todavía este componente. Este es el ejemplo del esquema (ui-examples.ts) dentro de un manifest mínimo.
{
"manifestVersion": "1.0",
"id": "my-extension",
"version": "1.0.0",
"name": "My extension",
"permissions": [],
"mounts": [
{
"point": "EMAIL_TOOLBAR",
"component": {
"type": "STEPPER",
"props": {
"current": 1,
"steps": [
{
"title": "Datos",
"description": "Nombre y correo"
},
{
"title": "Revision"
},
{
"title": "Confirmacion"
}
]
}
}
}
]
}