Drawer

Painel lateral deslizante (`mk-drawer`, `mk-drawer-header`, `mk-drawer-footer`) que entra a partir de qualquer borda da tela.

O mk-drawer é um painel overlay que desliza a partir de uma das bordas da tela. Suporta posicionamento em quatro direções, cinco tamanhos e composição via sub-componentes mk-drawer-header e mk-drawer-footer — que auto-atribuem o slot correto ao serem inseridos como filhos diretos do drawer.

Padrão

import { useRef } from 'react';
import { MkDrawer, MkButton } from '@db1/makuco-ui-react';

function Example() {
  const drawerRef = useRef(null);
  return (
    <>
      <MkButton variant="filled" onClick={() => drawerRef.current.open = true}>
        Abrir Drawer
      </MkButton>
      <MkDrawer
        ref={drawerRef}
        heading="Título do Drawer"
        onMkClose={() => drawerRef.current.open = false}
      >
        <p>Conteúdo do drawer.</p>
      </MkDrawer>
    </>
  );
}

<mk-button variant="filled" (click)="drawer.open = true">Abrir Drawer</mk-button>
<mk-drawer #drawer heading="Título do Drawer" (mkClose)="drawer.open = false">
  <p>Conteúdo do drawer.</p>
</mk-drawer>

Com rodapé

Use mk-drawer-footer para área de ações. O sub-componente auto-atribui slot="footer" quando inserido como filho direto de mk-drawer.

<MkDrawer ref={drawerRef} heading="Confirmar ação" onMkClose={() => drawerRef.current.open = false}>
  <p>Tem certeza que deseja continuar?</p>
  <MkDrawerFooter>
    <MkButton variant="outlined" onClick={() => drawerRef.current.open = false}>Cancelar</MkButton>
    <MkButton variant="filled" onClick={() => drawerRef.current.open = false}>Confirmar</MkButton>
  </MkDrawerFooter>
</MkDrawer>

<mk-drawer #drawer heading="Confirmar ação" (mkClose)="drawer.open = false">
  <p>Tem certeza que deseja continuar?</p>
  <mk-drawer-footer>
    <mk-button variant="outlined" (click)="drawer.open = false">Cancelar</mk-button>
    <mk-button variant="filled" (click)="drawer.open = false">Confirmar</mk-button>
  </mk-drawer-footer>
</mk-drawer>

Com header customizado

Use mk-drawer-header para substituir o título padrão por conteúdo livre. O sub-componente auto-atribui slot="header" — não é necessário slot="..." manual.

<MkDrawer ref={drawerRef} onMkClose={() => drawerRef.current.open = false}>
  <MkDrawerHeader>
    <span>Configurações avançadas</span>
  </MkDrawerHeader>
  <p>Conteúdo com header customizado.</p>
</MkDrawer>

<mk-drawer #drawer (mkClose)="drawer.open = false">
  <mk-drawer-header>
    <span>Configurações avançadas</span>
  </mk-drawer-header>
  <p>Conteúdo com header customizado.</p>
</mk-drawer>

Posicionamento

Use placement para controlar a borda de entrada: "right" (padrão), "left", "top" ou "bottom".

<MkDrawer ref={drawerRef} placement="left" heading="Menu lateral" onMkClose={() => drawerRef.current.open = false}>
  <p>Navegação lateral.</p>
</MkDrawer>

<mk-drawer #drawer placement="left" heading="Menu lateral" (mkClose)="drawer.open = false">
  <p>Navegação lateral.</p>
</mk-drawer>

Tamanhos

A prop size controla a largura (para left/right) ou a altura (para top/bottom). Os valores em pixels são os mesmos para as quatro direções.

Valor	Largura / Altura
`"sm"`	320px
`"md"` (padrão)	480px
`"lg"`	640px
`"xl"`	800px
`"full"`	100vw / 100vh

Tamanho full

Use size="full" para ocupar toda a viewport. Adequado para formulários extensos, fluxos de configuração ou quando o contexto da página deve ser completamente substituído pelo painel.

import { useRef } from 'react';
import { MkDrawer, MkDrawerFooter, MkButton } from '@db1/makuco-ui-react';

function Example() {
  const drawerRef = useRef(null);
  return (
    <>
      <MkButton variant="filled" onClick={() => drawerRef.current.open = true}>
        Abrir Full
      </MkButton>
      <MkDrawer
        ref={drawerRef}
        heading="Configurações da conta"
        size="full"
        onMkClose={() => drawerRef.current.open = false}
      >
        {/* conteúdo */}
        <MkDrawerFooter>
          <MkButton variant="outlined" onClick={() => drawerRef.current.open = false}>
            Cancelar
          </MkButton>
          <MkButton variant="filled" onClick={() => drawerRef.current.open = false}>
            Salvar alterações
          </MkButton>
        </MkDrawerFooter>
      </MkDrawer>
    </>
  );
}

<mk-button variant="filled" (click)="drawer.open = true">Abrir Full</mk-button>
<mk-drawer
  #drawer
  heading="Configurações da conta"
  size="full"
  (mkClose)="drawer.open = false"
>
  <!-- conteúdo -->
  <mk-drawer-footer>
    <mk-button variant="outlined" (click)="drawer.open = false">Cancelar</mk-button>
    <mk-button variant="filled" (click)="drawer.open = false">Salvar alterações</mk-button>
  </mk-drawer-footer>
</mk-drawer>

Sub-componentes

mk-drawer expõe duas regiões via slots nomeados. Os sub-componentes abaixo auto-atribuem o slot correto ao serem inseridos como filhos diretos de mk-drawer — não é necessário declarar slot="..." manualmente.

Sub-componente	Slot alvo	Descrição
`mk-drawer-header`	`header`	Substitui o título gerado pela prop `heading` por conteúdo livre.
(slot padrão)	—	Corpo principal do drawer. Qualquer filho sem `slot` vai para o corpo.
`mk-drawer-footer`	`footer`	Rodapé com separador visual. Ideal para ações (confirmar/cancelar).

Props — mk-drawer

Prop	Tipo	Padrão	Descrição
`open`	`boolean`	`false`	Controla a visibilidade do drawer. Refletido como atributo.
`placement`	`"left" \| "right" \| "top" \| "bottom"`	`"right"`	Borda a partir da qual o painel desliza.
`size`	`"sm" \| "md" \| "lg" \| "xl" \| "full"`	`"md"`	Largura (left/right) ou altura (top/bottom) do painel.
`heading`	`string`	—	Título exibido no cabeçalho. Ignorado quando `mk-drawer-header` está presente.
`closeOnBackdrop`	`boolean`	`true`	Fecha o drawer ao clicar no backdrop.
`hideClose`	`boolean`	`false`	Oculta o botão X do cabeçalho.
`locale`	`string`	—	Tag BCP 47 para i18n. Recai para o atributo `lang` ancestral.

Eventos

Evento	Componente	Payload	Descrição
`mkOpen`	`mk-drawer`	`void`	Emitido quando o drawer abre.
`mkClose`	`mk-drawer`	`void`	Emitido ao fechar via backdrop, botão X ou tecla Escape.

Slots

Componente	Slot	Descrição
`mk-drawer`	`header`	Header customizado. Preenchido por `mk-drawer-header`.
`mk-drawer`	(default)	Corpo principal do drawer.
`mk-drawer`	`footer`	Rodapé. Preenchido por `mk-drawer-footer`.
`mk-drawer-header`	(default)	Conteúdo livre do header customizado.
`mk-drawer-footer`	(default)	Conteúdo do rodapé (ações, links, metadados).

Acessibilidade

O painel tem role="dialog" e aria-modal="true".
aria-labelledby aponta para o título quando heading é fornecida.
O foco é movido automaticamente para o painel ao abrir e restaurado ao elemento anterior ao fechar.
Tab fica preso dentro do painel enquanto o drawer estiver aberto (focus trap recursivo com suporte a shadow DOM).
Escape fecha o drawer.
Body scroll é bloqueado enquanto o drawer estiver aberto.

Tecla	Comportamento
`Escape`	Fecha o drawer.
`Tab`	Move foco para o próximo elemento focalizável dentro do painel.
`Shift + Tab`	Move foco para o elemento anterior. Ao atingir o primeiro, volta para o último (wrap-around).

Drawer

On this page