Dialog
Confirmação
Fechado
import { Dialog } from '@rivocode/ui'Quando usar
Janela modal, para decisão que não pode continuar em segundo plano.
Compõe com DialogTrigger, DialogContent, DialogTitle, DialogDescription,
DialogFooter e DialogClose.
Renderiza em portal dentro do container do RivoProvider, que carrega o tema.
Sem o Provider ele lanca erro, e não renderiza sem estilo.
Quando não usar
Para confirmar o que não volta atrás (excluir, cancelar uma nota, sair sem
salvar), use AlertDialog. Este aqui fecha com Esc e com clique fora, e é isso
que o separa do outro: uma janela que se dispensa por engano não serve para uma
pergunta cuja resposta errada não tem desfazer.
Para o painel que abre no celular, prefira o Sheet: modal centralizado numa
tela estreita cobre quase tudo e briga com o teclado. E para o que só acrescenta
contexto ao lado de um botão (uma explicação, um formulário de duas linhas), o
Popover custa menos: o modal tranca o resto da página, e trancar a página para
mostrar um texto é cobrar caro por pouco.
No React Native
Traduz: o @rivocode/ui-native exporta Dialog - open, onOpenChange e title como props; sem DialogTrigger. Abre em fade, e sem transição quando o sistema pede para reduzir movimento; o cartão sobe para o espaço acima do teclado. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.
API
| Prop | Tipo |
|---|---|
actionsRef0.4.0A ref to imperative actions. | RefObject<DialogRootActions | null> |
defaultOpen0.4.0Whether the dialog is initially open. | boolean |
defaultTriggerId0.4.0ID of the trigger that the dialog is associated with. | string | null |
disablePointerDismissal0.4.0Whether to prevent the dialog from closing on outside presses. | boolean |
handle0.4.0A handle to associate the dialog with a trigger. | DialogHandle<Payload> |
modal0.4.0Determines if the dialog enters a modal state when open. | "trap-focus" | boolean |
onOpenChange0.4.0Event handler called when the dialog is opened or closed. | ((open: boolean, eventDetails: DialogRootChangeEventDetails) => void) |
onOpenChangeComplete0.4.0Event handler called after any animations complete when the dialog is opened or closed. | ((open: boolean) => void) |
open0.4.0Whether the dialog is currently open. | boolean |
triggerId0.4.0ID of the trigger that the dialog is associated with. | string | null |
Partes
Dialog se monta com estas peças. Todas vivem nesta página, porque separar cada uma num endereço obrigaria a abrir seis abas para montar uma tela.
DialogClose
/dialog-close.mdFecha o diálogo sem você guardar estado.
Envolve o botão de cancelar, o X do canto ou qualquer coisa que deva fechar.
Com render, vira o elemento que você passar.
| Prop | Tipo |
|---|---|
nativeButton0.4.0Whether the component renders a native `<button>` element when replacing it via the `render` prop. | boolean |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogCloseState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
DialogContent
/dialog-content.mdO painel do diálogo, com a tarja de fundo e o portal já montados.
No desktop ele centraliza. No celular ele encosta embaixo e ocupa a largura toda, que é onde o polegar alcança, centralizado, sobraria tarja dos dois lados e o conteúdo ficaria espremido no meio da tela.
O portal usa o contêiner do RivoProvider, então o tema vale dentro dele.
| Prop | Tipo |
|---|---|
classNames0.5.0Classe por parte: `backdrop`. | Partial<Record<"backdrop", string>> |
finalFocus0.4.0Determines the element to focus when the dialog is closed. | booleanRefObject<HTMLElementnull>((closeType: InteractionType) => voidbooleanHTMLElementnull) |
initialFocus0.4.0Determines the element to focus when the dialog is opened. | booleanRefObject<HTMLElementnull>((openType: InteractionType) => voidbooleanHTMLElementnull) |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogPopupState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
DialogDescription
/dialog-description.mdA frase abaixo do título, com o que o diálogo pede.
Vira o aria-describedby do painel, então o leitor de tela lê o contexto junto
com o título, antes de chegar aos botões.
| Prop | Tipo |
|---|---|
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogDescriptionState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
DialogFooter
/dialog-footer.mdA fila de ações do diálogo, alinhada à direita.
A ação que confirma vai por último na marcação, encostada na borda: é a que o olho encontra por último no desktop.
No celular os dois botões empilham e ocupam a largura toda, porque o painel
já encosta embaixo e duas ações lado a lado numa tela estreita saem apertadas
demais. Na pilha a ordem se inverte: quem confirma sobe para o alto e quem
cancela fica rente ao polegar. É o mesmo comportamento do AlertDialogFooter.
Sem prop própria: repassa ao elemento de baixo o que você mandar.
DialogTitle
/dialog-title.mdO título do diálogo.
Não é enfeite: a Base UI liga ele no aria-labelledby do painel, e um diálogo
sem título é anunciado como "diálogo" e nada mais. Se o desenho não pede
título visível, mantenha a peça e esconda com sr-only.
| Prop | Tipo |
|---|---|
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogTitleState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.
DialogTrigger
/dialog-trigger.mdO que abre o diálogo.
Por padrão sai como <button>. Para abrir a partir de outra peça, um item de
menu, um cartão inteiro, passe render com o elemento, e o estado de aberto
continua ligado no aria-expanded certo.
| Prop | Tipo |
|---|---|
handle0.4.0A handle to associate the trigger with a dialog. | DialogHandle<Payload> |
nativeButton0.4.0Whether the component renders a native `<button>` element when replacing it via the `render` prop. | boolean |
payload0.4.0A payload to pass to the dialog when it is opened. | Payload |
render0.4.0Allows you to replace the component's HTML element with a different tag, or compose it with another component. | ComponentRenderFn<HTMLProps, DialogTriggerState>ReactElement<unknown, stringJSXElementConstructor<any>> |
Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.