Modal - Copan Platform

Modal

Modais são usados para exibir conteúdo em uma camada acima da interface. Eles são usados em casos em que é necessário apresentar grandes quantidades de conteúdo ou ações complexas (como o preenchimento de formulários) de um modo que o usuário não perca o contexto em que se encontra.

API

Showcase

Migração

Utilização

Playground

() => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Modal
        open={open}
        onDismiss={() => setOpen(false)}
        width={480}
        aria-labelledby="modal-title-id"
      >
        <Typography id="modal-title-id">
          Título do modal
        </Typography>
        <UISpacer xs="base02" />
        <Button onClick={() => setOpen(false)}>
          Fechar modal
        </Button>
      </Modal>

      <Button
        onClick={() => setOpen(true)}
        aria-expanded={open}
        aria-haspopup="dialog"
      >
        Abrir modal
      </Button>
    </>
  );
}

() => {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Modal
        open={open}
        onDismiss={() => setOpen(false)}
        width={480}
        aria-labelledby="modal-title-id"
      >
        <Typography id="modal-title-id">
          Título do modal
        </Typography>
        <UISpacer xs="base02" />
        <Button onClick={() => setOpen(false)}>
          Fechar modal
        </Button>
      </Modal>

      <Button
        onClick={() => setOpen(true)}
        aria-expanded={open}
        aria-haspopup="dialog"
      >
        Abrir modal
      </Button>
    </>
  );
}

Propriedades

Nome (* = obrigatório)	Tipo	Valores	Descrição
children	ReactNode	`—`	Conteúdo interno do Modal. Pode ter um conteúdo genérico com grandes quantidades de conteúdo ou ações complexas (como o preenchimento de formulários ou imagens, por exemplo). Caso deseje comunicar rapidamente uma informação adicional ou um contexto com ações mais diretas, utilize o Dialog.
open	boolean	`false` (default) `true`	Valor que define se o modal é mostrado ou não.
alwaysRender	boolean	`false` (default) `true`	Valor que define se o Modal é sempre renderizado no DOM ou não.
role	string	`dialog` (default)	O aria role do modal. Sugerido utilizar dialog ou alertdialog. Segue esse link para mais informações sobre os roles aria.
dismissProps	ModalDismiss	`-`	Define o comportamento para fechar o modal.
padding	string	`none` `default` (default)	Define se o conteúdo do modal terá um inner padding de 24px.
width	string \| number	`—`	Valor que define a largura do modal.
fullScreen	boolean	`false` (default) `true`	Define se o modal ocupára a tela toda, sem border radius.
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`

Propriedades ModalDismiss

Nome (* = obrigatório)	Tipo	Valores	Descrição
escapeKey	boolean	`false` `true` (default)	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`.

Métodos

Nome (* = obrigatório)	Tipo	Descrição
onDismiss	function	Função chamada quando o evento definido em `outsidePressEvent` é invocado ou pela tecla `esc` quando habilitada. Mas sozinha ela não fecha o Modal, depende de internamente da função fazer um `setOpen(false)`, por exemplo, que pode variar de acordo com o nome do state.