Introdução

Um painel sobreposto que desliza a partir da borda da tela, abrigando conteúdo temporário, formulários, configurações ou fluxos de várias etapas. Este componente permite que os usuários realizem tarefas, ajustem preferências ou revisem informações detalhadas sem perder o contexto de suas visualizações de página principais.

O componente Drawer está totalmente integrado como um bloco drawer no Page Builder, permitindo que autores de conteúdo e desenvolvedores configurem facilmente botões de gatilho, cabeçalhos descritivos e rodapés de ação personalizados diretamente no CMS.

Uso

Estes exemplos ilustram como os editores de conteúdo vinculam e estruturam os componentes drawer.

1. Gaveta de Configuração de Ajustes Padrão

Um painel de configuração padrão que inclui um título, uma descrição e gatilhos de botões primários/secundários.

{
  "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. Gaveta de Revisão de Informações com Rodapé Personalizado

Apresenta uma composição de layout alternativa onde uma lista de botões de ação personalizados é fornecida dentro do array de rodapé junto com os controles padrão.

{
  "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 do Desenvolvedor e Acessibilidade

• Ilha de Hidratação: Como o painel deslizante depende de transformações de estado do lado do cliente, dispensas de sobreposição de fundo, armadilhas de foco de teclado e interações de toque, ele é hidratado como uma ilha de cliente interativa por padrão ("interactive": true).
• Conformidade WAI-ARIA: Nos bastidores, este componente está em conformidade com as especificações de sobreposição (role="dialog", aria-modal="true", aria-labelledby, aria-describedby). Abrir o drawer prende automaticamente o foco do teclado dentro do painel. Pressionar a tecla Escape ou clicar na camada de fundo escurecida descarta o drawer com segurança, retornando o foco ao elemento acionador.
• Composição de Ilha Unificada: Para evitar incompatibilidades de hidratação e bugs de colisão de sobreposição dentro de quadros de cliente complexos, os elementos aninhados (incluindo gatilhos de confirmação, calços de fechamento e spinners de carregamento) são agrupados dentro de um único ambiente de ilha unificado.