Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
@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
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' |
<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 50 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 0 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
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.