Introdução

Um painel que desliza a partir da borda da tela para apresentar conteúdo ou ações sem sair da página atual.

Uso

Painel lateral básico

import { Drawer, Button } from "../components/ui";

export default function MyPage() {
  return (
    <Drawer
      trigger={<Button>Open Drawer</Button>}
      title="Settings"
      description="Adjust your preferences."
      body="Drawer body content goes here."
      cancel={<Button variant="outline">Close</Button>}
      confirm={<Button>Save</Button>}
    />
  );
}

Construtor de páginas CMS

Este componente está disponível como um bloco drawer no Construtor de páginas (content/pages/*.json). trigger é uma lista de blocos aninhada (o CMS sempre envia um array):

{
  "type": "drawer",
  "title": "Settings",
  "description": "Adjust your preferences.",
  "confirmText": "Save",
  "cancelText": "Close",
  "trigger": [{ "type": "button", "text": "Open Drawer" }]
}

Propriedades

Drawer

| title | `string \ | JSX.Element` | O título do painel. | | description | `string \ | JSX.Element` | A descrição do painel. | | body | `string \ | JSX.Element` | O conteúdo principal. | | footer | `string \ | JSX.Element` | Conteúdo personalizado do rodapé. |

| cancel | JSX.Element | Elemento renderizado como disparador de fechamento (cancelar). | | confirm | JSX.Element | Elemento renderizado como disparador de ação. | | closable | boolean | Se deve mostrar o botão de fechar. Padrão: true. | | interactive | boolean | Habilita a hidratação do lado do cliente para comportamento interativo. | | class | string | Classes CSS personalizadas para o elemento raiz. |

Props adicionais (por exemplo, open, defaultOpen, onOpenChange, id) são repassados ao primitive de painel subjacente.