ACCORDION

Props

Tabla generada desde el esquema real (ui-schema.ts); si el esquema cambia, cambia esta tabla.

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).

Estado y contexto que usa

Cómo interactúa con state y context (expresiones ${...}).

• hidden / onLoadWhen

  Condiciones comunes: hidden: "${!state.x}" oculta el componente; onLoadWhen ejecuta onLoad al 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.

Ver todas las acciones

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": "ACCORDION",
        "props": {
          "multiple": false,
          "sections": [
            {
              "title": "Que es esto?",
              "defaultOpen": true,
              "content": [
                {
                  "type": "TEXT",
                  "props": {
                    "content": "Un acordeon accesible."
                  }
                }
              ]
            },
            {
              "title": "Como se usa?",
              "content": [
                {
                  "type": "TEXT",
                  "props": {
                    "content": "Enter o Espacio para abrir."
                  }
                }
              ]
            }
          ]
        }
      }
    }
  ]
}