Pretty not-blocking cuadro de diálogo emergente JavaScript plugin-prompt-cuadros

Vista prévia

Descripción

El plug-in de JavaScript de cuadro de diálogo utilizado para crear agradable, limpia la alerta/confirmar/símbolo del sistema y ventanas emergentes de notificación de notificaciones como tostadas en su aplicación Web. escrito en ES6/SCSS.

Funcionamiento

Descargar & instalar los cuadros de aviso con NPM:

# NPM
$ npm install prompt-boxes --save

Importe los cuadros de mensaje en el módulo.

// ES 6
import pb from 'prompt-boxes';

// CommonJS:
const pb = require('prompt-boxes');

Con opciones.

var pb = new PromptBoxes({



// top or bottom


toastDir: 'top',



 // max number of toasts to display


toastMax: 5,



// auto dismiess after 5 seconds


// 0 = never


toastDuration: 5000,



// is dissmissable


toastClose: false,



// shows prompt as position absolute


promptAsAbsolute: true,



 // animation speed


animationSpeed: 500



});

Cree cuadros de diálogo de alerta de notificación con varios temas:

pb.success('Success toast');
pb.error('Error toast');
pb.alert('Alert toast');
pb.info('Info toast');

pb.success('Success toast');
pb.error('Error toast');
pb.alert('Alert toast');
pb.info('Info toast');

Cree un cuadro de diálogo de confirmación con devoluciones de llamada.

pb.confirm(

(outcome) => alert(`You have: ${ outcome ? 'confirmed' : 'cancelled' }`), // Callback

'Are you sure?', // confirm text

'Yes', // Confirm text

'No' // Cancel text
);

Cree un cuadro de diálogo de solicitud.

pb.prompt(

(value) => alert(`You have: ${ value ? `entered ${ value }` : 'cancelled' }`), // Callback

'Your User Name',
// Prompt text

'text',
// Input type, or 'textarea'

'A defult value', // Default value

'Submit',
// Submit text

'Cancel'
// Cancel text
);

Para personalizar los estilos de diálogo, simplemente reemplace las variables en el SCSS como estas:

$white: #FFF;
$black: #252525;

$light-grey: #EEE;
$grey: #CCC;
$dark-grey: #999;

 $light-blue: #79bde6;
$blue: #4591bf;
$dark-blue: #366988;

$light-red: #ff7575;
$red: #da4242;
$dark-red: #af3535;

$light-green: #6ed06c;
$green: #51cc50;
$dark-green: #409c3f;

$br: 2px;

Registro de cambios

10/27/2018

• Se agregó TextArea y soporte de valor predeterminado para los prompts

09/20/2018

• Ahora se permite HTML en los mensajes del sistema

07/13/2018

• Error de barra de tiempo fija

07/10/2018

• Las tostadas ahora se caerán por la pila al cerrar manualmente

05/30/2018

• Añadir duración y opción cerrada a tostadas
• Los estilos fijos

05/24/2018

• Solucionado el problema al borrar elementos quitados nuevas ocurrencias