Skip to main content

Drawer Next

Import​

import { Drawer } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode

Description​

Filhos do Drawer.

show​

Typebool

Description​

Controla a visibilidade do Drawer (modo controlado).

defaultShow​

Typebool

Description​

Define se o Drawer deve iniciar visível por padrão (modo não controlado).

noscreen​

Typebool
Defaultfalse

Description​

Quando true, remove o bloqueio de tela (backdrop) e o aprisionamento de foco do Drawer, e o clique fora do Drawer não pretende mais escondê-lo.

size​

Type
Enum of:
  • 'sm'
  • 'md'
  • 'lg'
Default'md'

Description​

Define a largura do painel do Drawer, podendo ser 'sm', 'md' ou 'lg'.

keepMounted​

Typebool
Defaultfalse

Description​

Se true, mantém o Drawer montado no DOM mesmo quando não está visível.

onToggle​

Typefunc
Paramevent React.SyntheticEvent - A origem do evento que acionou o callback.
Paramshow boolean - Indica se o Drawer pretende ser exibido (true) ou escondido (false).
Paraminfos object - Informações adicionais.
  • infos.reason string - Razão para o acionamento do callback,

Description​

Callback acionado quando o Drawer pretende ser exibido ou escondido.

podendo ser (a) 'esc': o usuário pressionou ESC, (b) 'clickOutside': o usuário clicou fora do Drawer, exceto quando noscreen é true e (c) 'closeButton': o usuário clicou no botão de fechar.

<DrawerHeader />​

Import​

import { DrawerHeader } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo do cabeçalho, tipicamente subcomponentes como DrawerHeaderPrefix, DrawerHeaderTitle, DrawerHeaderAuxiliary, DrawerHeaderSuffix e DrawerHeaderCustom.

Filhos que não sejam uma desses subcomponentes são colocados automaticamente em um DrawerHeaderCustom.

<DrawerHeaderPrefix />​

Import​

import { DrawerHeaderPrefix } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo do cabeçalho exibido no início (à esquerda).

<DrawerHeaderTitle />​

Import​

import { DrawerHeaderTitle } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Título do cabeçalho.

<DrawerHeaderAuxiliary />​

Import​

import { DrawerHeaderAuxiliary } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo auxiliar do cabeçalho, tipicamente descrições ou informações adicionais.

<DrawerHeaderSuffix />​

Import​

import { DrawerHeaderSuffix } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo do cabeçalho exibido no final (à direita).

<DrawerHeaderCustom />​

Import​

import { DrawerHeaderCustom } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo customizado do cabeçalho.

<DrawerHeaderClose />​

Import​

import { DrawerHeaderClose } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typestring
DefaultDrawerHeaderClose.translations.en.close
Description​

Texto acessível do botão. Valores pré-definidos estão disponíveis no atributo DrawerHeaderClose.translations para português (DrawerHeaderClose.translations.ptBR.close), espanhol (DrawerHeaderClose.translations.es.close) e inglês (DrawerHeaderClose.translations.en.close).

<DrawerContent />​

Import​

import { DrawerContent } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo da região principal.

<DrawerFooter />​

Import​

import { DrawerFooter } from '@resultadosdigitais/tangram-components/next'

Properties​

children​

Typenode
Description​

Conteúdo do rodapé.

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.