Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@mamba/dialog
Advanced tools
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
Readme
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>
FAQs
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
The npm package @mamba/dialog receives a total of 46 weekly downloads. As such, @mamba/dialog popularity was classified as not popular.
We found that @mamba/dialog demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.