Introducción

Un panel superpuesto que se desliza desde el borde de la pantalla, alojando contenido temporal, formularios, configuraciones o flujos de varios pasos. Este componente permite a los usuarios realizar tareas, ajustar preferencias o revisar información detallada sin perder el contexto de sus vistas de página principales.

El componente Drawer está totalmente integrado como un bloque drawer en el Page Builder, lo que permite a los autores de contenido y desarrolladores configurar fácilmente botones de activación, encabezados descriptivos y pies de página de acción personalizados directamente dentro del CMS.

Uso

Estos ejemplos ilustran cómo los editores de contenido enlazan y estructuran los componentes drawer.

1. Cajón de Configuración de Ajustes Estándar

Un panel de configuración estándar que incluye un título, una descripción y activadores de botones primarios/secundarios.

{
  "type": "drawer",
  "title": "Workspace Preferences",
  "description": "Customize your development workspace configurations.",
  "confirmText": "Apply Changes",
  "cancelText": "Cancel",
  "trigger": [
    {
      "type": "button",
      "text": "Open Settings",
      "variant": "outline"
    }
  ]
}

2. Cajón de Revisión de Información con Pie de Página Personalizado

Presenta una composición de diseño alternativa donde se proporciona una lista de botones de acción personalizados dentro del array de pie de página junto con los controles estándar.

{
  "type": "drawer",
  "title": "System Diagnostics",
  "description": "Real-time node and performance overview.",
  "cancelText": "Dismiss",
  "trigger": [
    {
      "type": "button",
      "text": "Review System Specs"
    }
  ],
  "footer": [
    {
      "type": "button",
      "text": "Refresh Node",
      "variant": "subtle",
      "colorPalette": "blue"
    }
  ]
}

Props

Notas para Desarrolladores y Accesibilidad

• Isla de Hidratación: Debido a que el panel deslizante depende de transformaciones de estado del lado del cliente, descartes de superposición de fondo, trampas de foco de teclado e interacciones táctiles, se hidrata como una isla de cliente interactiva por defecto ("interactive": true).
• Cumplimiento WAI-ARIA: En su interior, este componente cumple con las especificaciones de superposición (role="dialog", aria-modal="true", aria-labelledby, aria-describedby). Abrir el drawer atrapa automáticamente el foco del teclado dentro del panel. Presionar la tecla Escape o hacer clic en la capa de fondo oscurecida descarta el drawer de forma segura, devolviendo el foco al elemento desencadenante.
• Composición de Isla Unificada: Para prevenir discrepancias de hidratación y errores de colisión de superposición dentro de marcos de cliente complejos, los elementos anidados (incluidos los activadores de confirmación, los escudos de cierre y los spinner de carga) se agrupan dentro de un único entorno de isla unificado.