Drawer - Copan Platform

Drawer

O Drawer é usado para exibir ações e informações sensíveis ao contexto. Os drawers não impedem que os usuários concluam suas tarefas, como faria um modal. Um drawer é útil quando você deseja focar o usuário em uma tarefa específica, ele pode fornecer contexto ou informações adicionais durante uma tarefa.

API

Showcase

Migração

Utilização

Playground

() => { 
  const [ open, setOpen ] = React.useState(false);

  return (
    <>
      <Button 
        aria-expanded={open}
        aria-haspopup="dialog"
        aria-controls="drawer-id"
        onClick={() => setOpen(true)}
      >
        Open Drawer
      </Button>
      <Drawer
        id="drawer-id"
        aria-labelledby="drawer-title-id"
        open={open} 
        onDismiss={() => setOpen(false)}
      >
        <Typography textStyle="h4" id="drawer-title-id">Title</Typography>
        <div>
          My content
        </div>
      </Drawer>
    </>
  )
}

() => { 
  const [ open, setOpen ] = React.useState(false);

  return (
    <>
      <Button 
        aria-expanded={open}
        aria-haspopup="dialog"
        aria-controls="drawer-id"
        onClick={() => setOpen(true)}
      >
        Open Drawer
      </Button>
      <Drawer
        id="drawer-id"
        aria-labelledby="drawer-title-id"
        open={open} 
        onDismiss={() => setOpen(false)}
      >
        <Typography textStyle="h4" id="drawer-title-id">Title</Typography>
        <div>
          My content
        </div>
      </Drawer>
    </>
  )
}

Propriedades

Nome (* = obrigatório)	Tipo	Valores	Descrição
children	ReactNode	`—`	Conteúdo interno.
padding	string	`default` (default) `none`	Define se o conteúdo do Drawer terá um inner padding de 24px.
placement	string	`left` (default) `right`	Posicionamento do Drawer.
open	boolean	`false` (default) `true`	Se true, o Drawer será aberto. Caso contrário, será fechado.
alwaysRender	boolean	`false` (default) `true`	Se true, o Drawer permanecerá renderizado no DOM, mesmo quando open for false.
dismissProps	DrawerDismiss	`-`	Define o comportamento para fechar o Drawer.

Propriedades DrawerDismiss

Nome (* = obrigatório)	Tipo	Valores	Descrição
escapeKey	boolean	`true` (default) `false`	Define se a tecla `esc` chama o método `onDismiss`.
outsidePressEvent	string	`pointerdown` (default) `mousedown` `click`	Define qual evento é capturado ao clicar no backdrop para chamar o método `onDismiss`.
asPortal	boolean	`false` `true` (default)	Define se o componente será criado com um Portal, fora do nó principal da aplicação e dentro do `body`

Métodos

Nome (* = obrigatório)	Tipo	Descrição
onDismiss	function	Método acionado quando um dos comportamentos dismissive é identificado.