O módulo Dialog
é composto por 3 componentes: Dialog
, ConfirmationDialog
e PromisedDialog
. Cada um deles cria um modal próprio de tela cheia com suas especificações.
O PromisedDialog
é exibido durante a execução de uma Promise
e após sua conclusão fecha o modal. Já o ConfirmationDialog
exibe uma tela com dois botões que controlam o fluxo da aplicação. Para casos de apenas uma exibição de mensagem durante um período de tempo, o uso do Dialog
é aconselhável.
<Dialog ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
align | Alinhamento vertical do conteúdo (top , center ) |
string |
center |
bgColor | Define a cor de fundo do modal | string |
'#e3e3e3' |
textColor | Define a cor do texto do modal | boolean |
'#4a4a4a' |
isOpen | Define se o modal vai estar aberto por padrão | boolean |
'false' |
title | Título do modal | string |
undefined |
fullscreen | Define se o modal ocupará a tela inteira | boolean |
false |
className | Classe a ser adicionado ao elemento pai do componente | string |
`` |
freezeKeystrokes | Define se congela os eventos de <Keystroke /> do pai do componente. Pode ser um valor booleano, ou uma lista de teclas separa por vírgula |
string |
false |
<ConfirmationDialog ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
negativeLabel | Texto no Botão de Confirmação Negativa | string |
'Cancelar' |
positiveLabel | Texto no Botão de Confirmação Positiva | string |
'Confirmar' |
isOpen | Define se o modal vai estar aberto por padrão | boolean |
'false' |
title | Título do modal | string |
undefined |
className | Classe a ser adicionado ao elemento pai do componente | string |
`` |
<PromisedDialog ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
delay | Tempo de espera depois de executar a Promise
|
string |
'right' |
promise | A Promise a ser executada |
boolean |
false |
isOpen | Define se o modal vai estar aberto por padrão | boolean |
'false' |
title | Título do modal | string |
undefined |
className | Classe a ser adicionado ao elemento pai do componente | string |
`` |
<Popup ...props />
Propriedades | Descrição | Tipo | Padrão |
---|---|---|---|
isOpen | Define se o pop-up vai estar aberto por padrão | boolean |
'false' |
<Dialog ... on:event="..." />
Eventos | Disparado quando ... | Tipo |
---|---|---|
open | O diálogo for exibido | function() |
close | O diálogo fechar | function() |
Chama myMethod()
quando o diálogo for exibido.
<dialog on:open="myMethod()" />
Chama o console.log
quando o diálogo fechar.
<dialog on:close="console.log('Dialog fechou')" />
<PromisedDialog ... on:event="..." />
Eventos | Descrição | Tipo |
---|---|---|
success | Especifique uma função que será chamada quando a Promise do diálogo for de sucesso(.then ). Recebe o valor da Promise.resolve
|
function(event) |
failure | Especifique uma função que será chamada quando a Promise do diálogo for de falha(.catch ). Recebe o valor da Promise.reject
|
function(event) |
Chama console.log
quando a Promise for de sucesso.
<PromisedDialog on:success="console.log('promise success', event)" />
Chama o método promiseFailed
quando o Promise falhar.
<PromisedDialog on:failure="promiseFailed(event)" />
... methods: { promiseFailed(event) { console.log(event) }, } ...
<ConfirmationDialog ... on:event="..." />
Eventos | Descrição | Tipo |
---|---|---|
negative | Especifique uma função que será chamada quando o diálogo receber a ação negativa ou do botão vermelho do teclado | function() |
positive | Especifique uma função que será chamada quando o diálogo receber a ação positiva ou do botão verde do teclado | function() |
Chama myMethod()
quando o diálogo receber ação positiva.
<ConfirmationDialog on:positive="myMethod()" />
Chama o console.log
quando o diálogo receber ação negativa.
<ConfirmationDialog on:negative="console.log('on:negative')" />
<Popup ... on:event="..." />
Eventos | Disparado quando ... | Tipo |
---|---|---|
open | O pop-up for exibido | function() |
close | O pop-up fechar | function() |
Chama myMethod()
quando o diálogo for exibido.
<Popup on:open="myMethod()" />
Chama o console.log
quando o diálogo fechar.
<Popup on:close="console.log('Dialog fechou')" />
Abre o Dialog
e o mantém aberto pelo tempo (duration
em milissegundos) especificado.
Fecha o Dialog
após o tempo (delay
em milissegundos) especificado.
Abre o ConfirmationDialog
e o mantém aberto pelo tempo (duration
em milissegundos) especificado.
Fecha o ConfirmationDialog
.
Abre o Popup
.
Fecha o Popup
.
<Dialog ... />
Slot | Descrição |
---|---|
extra | O slot extra pode ser usado para adicionar conteúdo adicional após a mensagem do diálogo. |
Exemplo:
<dialog>
Minha mensagem
<div slot="extra">Conteúdo extra</div>
</dialog>
<ConfirmationDialog ... />
Slot | Descrição |
---|---|
footer | O slot footer pode ser usado para adicionar conteúdo no final do diálogo, ou terceiro botão. |
Exemplo:
<ConfirmationDialog>
<div slot="footer">Conteúdo final</div>
</ConfirmationDialog>
<Popup ... />
Slot | Descrição |
---|---|
Html | O slot pode ser usado para adicionar conteúdo dentro do pop-up. |
Exemplo:
<Popup>
<h1>Component Pop-up<h1>
<p>Texto de descrição</p>
</Popup>