@mamba/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 concl

Stats

StarsIssuesVersionUpdatedCreatedSize
@mamba/dialog
3.5.33 months ago3 years agoMinified + gzip package size for @mamba/dialog in KB

Readme

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

Parâmetros 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 ``

<ConfirmationDialog ...props />

Parâmetros 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 />

Parâmetros 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 />

Parâmetros Descrição Tipo Padrão
isOpen Define se o pop-up vai estar aberto por padrão boolean 'false'

Eventos

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

Eventos Disparado quando ... Tipo
open O diálogo for exibido function()
close O diálogo fechar function()

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

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)

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

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()

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

Eventos Disparado quando ... Tipo
open O pop-up for exibido function()
close O pop-up fechar function()

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

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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.