Drawer

Tipo: Core

DesignersFigma Design System 2.0
Devs · HTML/CSSmds-styles Storybook com classes e exemplos
Devs · Angularmds-angular Storybook com inputs e outputs

Definição Funcional

O Drawer é um painel deslizante que emerge da lateral da tela para fluxos de entrada de dados ou navegação. Ele permite realizar tarefas complexas, como preencher formulários, sem que o usuário perca totalmente o contexto da página principal.

Diretrizes de Comportamento

Uso: Formulários de cadastro, edição de itens e menus globais.
Título: Use Caixa de Título no topo do painel para identificar a ação (ex: Novo Motorista).
Ações: Os botões de ação (Salvar, Cancelar) devem ficar fixos no rodapé do Drawer.
Saída: Deve permitir o fechamento ao clicar fora (backdrop) ou em um ícone de “X”.

Sugestão padronização

Adotar os nomes Modal e Drawer como componentes distintos no Design System, unificando o “FloatPanel” do Angular sob essas duas categorias.

Drawer (Painel Lateral): Focado em fluxos de trabalho. Ideal para formulários de cadastro ou edição. Por abrir na lateral, ele permite que o usuário ainda veja parte da tabela ou mapa ao fundo, mantendo o contexto.
Modal (Diálogo Central): Focado em interrupção ou detalhamento. Ideal para confirmações críticas (Excluir), alertas ou visualização de dados que ocupam muito espaço e exigem foco total.

Para desenvolvedores

Tudo abaixo é lido do código (stories, SCSS e componentes Angular) a cada npm run docs:sync — se algo estiver diferente do que você vê no projeto, o código é quem manda.

HTML/CSS (mds-styles)

Exemplo

Story Drawer do Storybook:

<div id="mds-overlay" class="mds-overlay mds-overlay--primary  mds-overlay--right"" style="z-index: 100; position: fixed; inset: 0; background: rgba(0,0,0,0.5);">
  <section role="dialog" class="mds-float-panel mds-float-panel--drawer mds-float-panel--sm  style="display: flex; flex-direction: column;">
    <header class="mds-float-panel__header">
      <button class="mds-btn mds-btn--control mds-btn--sm mds-float-panel__back">
        <span class="mds-btn__icon"><i data-lucide="arrow-left"></i></span>
      </button>
      <h2 class="title" id="floatPanel__title">Filtros Avançados</h2>
      <div class="mds-float-panel__header__actions">
        <button class="mds-btn mds-btn--control mds-btn--icon-only mds-btn--sm mds-float-panel__close--modal">
          <span class="mds-btn__icon"><i data-lucide="x" class="mds-icon--mds mds-icon--sm"></i></span>
        </button>
      </div>
    </header>
    <div class="mds-float-panel__body padding--md" style="flex: 1; overflow-y: auto;">
      <p>Conteúdo lateral de filtros...</p>
    </div>
    <footer class="mds-float-panel__actions">
      <button class="mds-btn mds-btn--primary mds-btn--outline">
        <span class="mds-btn__label">Cancelar</span>
      </button>
      <button class="mds-btn mds-btn--primary">
        <span class="mds-btn__label">Salvar</span>
      </button>
    </footer>
  </section>
</div>

Variações e opções

Opções do painel de controles do Storybook — escolha um valor lá para ver o resultado ao vivo. As classes CSS correspondentes estão na lista abaixo.

Opção	Valores	Padrão no exemplo
`type`	`modal` `drawer`	`modal`
`size`	`xs` `sm` `md` `lg` `xl` `xxxl`	`md`
`justify`	`center` `right` `left`	`center`
`isOpen`	`true` · `false`	`true`

Classes CSS

Lidas do SCSS (src/scss) — só aparece aqui o que realmente existe.

Tipo	Classes
Bloco	`.mds-float-panel` `.mds-overlay`
Elementos	`.mds-float-panel__actions` `.mds-float-panel__back` `.mds-float-panel__body` `.mds-float-panel__close` `.mds-float-panel__header` `.mds-float-panel__header__actions` `.mds-float-panel__header__options`
Modificadores	`.mds-float-panel__close--drawer` `.mds-float-panel__close--modal` `.mds-float-panel--bordered` `.mds-float-panel--drawer` `.mds-float-panel--full-height` `.mds-float-panel--fullscreen` `.mds-float-panel--modal` `.mds-nav-tabs__item--active` `.mds-overlay--center` `.mds-overlay--hide` `.mds-overlay--left` `.mds-overlay--primary` `.mds-overlay--right`

Angular (mds-angular)

Seletor

mds-float-panel

O FloatPanel (Painel Flutuante) exibe o conteúdo que requer interação do usuário, em uma camada acima da página.

Inputs

Input	Tipo	Padrão	Descrição
`className`	`string`	`''`	Classe CSS customizada adicionada ao host
`panelOpened` ⇄	`boolean`	`false`	Abre o painel
`fullscreen` ⇄	`boolean`	`false`	Painel em tela cheia
`fullscreenTogglable`	`boolean`	`true`	Permite alternar para tela-cheia
`forceFullscreen`	`boolean`	`false`	Força ficar em tela cheia
`bodyPadding`	`boolean`	`true`	Exibe o padding padrão no body
`bodyAdditionalClass`	`string`	`''`	Classe adicional para o body
`bodyScrollDisabled`	`boolean`	`false`	Desativa o scroll no body
`showHeader`	`boolean`	`true`	Exibe o header do painel
`showFooter`	`boolean`	`true`	Exibe o footer do painel
`loading`	`boolean`	`false`	Exibe loading do painel
`closeOnEsc`	`boolean`	`true`	Permite fechar o painel no ESC
`size`	`MdsSizesFloatPanel`	`'md'`	Tamanho do painel
`label`	`string`	`''`	Titulo da modal
`type`	`MdsFloatPanelTypes`	`'modal'`	Tipo do painel
`drawerPosition`	`MdsFloatPanelDrawerPositions`	`'right'`	Posição do drawer
`preventClose`	`boolean`	`false`	Exibe alerta para prevenir o fechamento da modal
`preventCloseText`	`string`	`Existem dados não salvos que serão perdidos, deseja fechar…`	Texto exibido no alerta para prevenir o fechamento da modal
`bordered`	`boolean`	`false`	Modo do float panel com bordas internas e cor de fundo no body
`forceMobile`	`boolean`	`false`	Força o comportamento de mobile

⇄ = binding bidirecional ([(input)]).

Outputs

Output	Payload	Descrição
`onClose`	`void`	Eventos
`onEscape`	`void`	—
`onOpen`	`void`	—

Slots

Conteúdo projetado com o atributo data-position:

data-position="before-header"
data-position="panel-subtitle"
data-position="after-title"
data-position="actions"
data-position="before-content"
data-position="after-content"
data-position="footer"
data-position="content"

Visão ao vivo

Drawer — Figma (Design System 2.0) ↗

Componentes relacionados

Modal