Skip to main content

Drawer Next

Informação

Você está visualizando a documentação de um recurso next.

Para evitar conflitos de nomes, os recursos next são agrupados na documentação através do objeto Next.

Base​

Anatomia​

A estrutura da Drawer é composta pelos subcomponentes Drawer.Header, Drawer.Content e Drawer.Footer, que organizam o cabeçalho, o conteúdo e o rodapé.

  1. Cabeçalho: subcomponente Drawer.Header, é possível incluir um título, texto auxiliar, prefixo, sufixo e o botão de fechar
  2. Conteúdo: subcomponente Drawer.Content, é a área principal da Drawer
  3. Rodapé: subcomponente Drawer.Footer, é a área para ações e conteúdos fixos na base da Drawer
Informação

Se o subcomponente Drawer.Content não estiver presente, o conteúdo passado como filho da Drawer será adicionado automaticamente na região de conteúdo.

Visibilidade​

Não controlado​

Por padrão, a Drawer não é controlada. Utilize a propriedade defaultShow para indicar que o componente deve iniciar visível por padrão.

<Next.Drawer defaultShow>
  <Next.Drawer.Header>
    <Next.Drawer.Header.Title>
      Drawer visível por padrão
    </Next.Drawer.Header.Title>
    <Next.Drawer.Header.Suffix>
      <Next.Drawer.Header.Close />
    </Next.Drawer.Header.Suffix>
  </Next.Drawer.Header>
  Conteúdo da Drawer
</Next.Drawer>

Controlado​

Use a propriedade show e o callback onToggle para controlar a visibilidade da Drawer.

Tamanhos​

Utilize a propriedade size com os valores 'sm', 'md' ou 'lg' para definir a largura da Drawer.

Sem backdrop​

Utilize a propriedade noscreen para remover o backdrop da Drawer.

Informação

Quando o backdrop é removido, a Drawer continua sobrepondo o conteúdo da página, mas não bloqueia a interação com o restante da página e não fecha automaticamente quando o usuário clica fora da área.

Em composição com o Container​

A Drawer utiliza o componente Container como fundação, Drawer.Header, Drawer.Content e Drawer.Footer reutilizam os subcomponentes correspondentes do Container e podem ser substituídas por eles sem prejuízo.

Por ser um Container, a Drawer pode receber internamente outros componentes Container preservando seus estilos e comportamentos, mesmo com a presença de elementos intermediários. Esta estrutra é útil para embedar elementos de interface via micro-frontends (MFEs).

Informação

O botão fechar tanto da Drawer quanto do Container funcionam de forma equivalente mesmo quando são renderizados por instâncias diferentes do React.

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.