@mamba/dialog v12.2.1

Dialog

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 />

<ConfirmationDialog ...props />

<PromisedDialog ...props />

<Popup ...props />

Eventos

<Dialog ... on:event="..." />

Exemplos:

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="..." />

Exemplos:

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="..." />

Exemplos:

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="..." />

Exemplos:

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')" />

Métodos

Dialog.open(duration)

Abre o Dialog e o mantém aberto pelo tempo (duration em milissegundos) especificado.

Dialog.close(delay)

Fecha o Dialog após o tempo (delay em milissegundos) especificado.

ConfirmationDialog.open(duration)

Abre o ConfirmationDialog e o mantém aberto pelo tempo (duration em milissegundos) especificado.

ConfirmationDialog.close()

Fecha o ConfirmationDialog.

Popup.open()

Abre o Popup.

Popup.close()

Fecha o Popup.

Slots

<Dialog ... />

Exemplo:

<dialog>
  Minha mensagem
  <div slot="extra">Conteúdo extra</div>
</dialog>

<ConfirmationDialog ... />

Exemplo:

<ConfirmationDialog>
  <div slot="footer">Conteúdo final</div>
</ConfirmationDialog>

<Popup ... />

Exemplo:

<Popup>
  <h1>Component Pop-up<h1>
  <p>Texto de descrição</p>
</Popup>