Biblioteca emergente de notificación personalizable para JavaScript-notificaciones impresionantes

Vista prévia

Descripción

Notificaciones impresionantes es una biblioteca de JavaScript independiente para crear animados, notificaciones popups personalizables en la Página Web.

Características

• Notificaciones de estilo modal.
• Notificaciones de estilo Toast.
• Soporta contenido HTML.
• Confirme & diálogos de alerta.
• Auto se descarta después de un cierto tiempo de espera.
• Barra de progreso de cuenta regresiva.
• Iconos basados en Font awesome.
• Temas de información/éxito/ADVERTENCIA/alerta.
• Compatibilidad con Async.

Funcionamiento

Instalar & importar:

# NPM
$ npm install awesome-notifications --save

// ES 6
import AWN from 'awesome-notifications';

// CommonJS:
const AWN = require('awesome-notifications');

Para el navegador, incluya Font awesome y la hoja de estilo de notificaciones impresionantes en la sección Head de la página.

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="dist/style.css" rel="stylesheet">

Incluya el JavaScript de las notificaciones impresionantes en la página cuando sea necesario.

<script src="dist/index.var.js"></script>

Inicializa la biblioteca de notificaciones impresionantes con las opciones predeterminadas. Para establecer la biblioteca, pase las opciones (véase más abajo) como en el objeto a la función AWN () .

var notifier = new AWN();

Cree sus propios popups de notificación con la siguiente sintaxis de JavaScript.

// basic
 notifier.tip('Message here');

// info message
notifier.info('Message here');

// success message
notifier.success('Message here');

// warning message
notifier.warning('Message here');

// alert messages
notifier.alert('Message here');

// confirm dialog
notifier.confirm('Are you sure?', okFunc, cancelFunc);

// modal window with custom css class
notifier.modal('<h2>Your custom title</h2><p>Your custom text</p>', 'custom-class-name')

// async toast
notifier.async(promise, onResolve, onReject, html)

// shows loader and blocks the screen
notifier.asyncBlock(promise, onResolve, onReject, html)

Opciones predeterminadas para personalizar la ventana emergente de notificación.

labels: {

tip: "Tip",

info: "Info",

success: "Success",

warning: "Attention",

alert: "Error",

async: "Loading",

confirm: "Confirmation required"
},
icons: {

tip: "question-circle",

info: "info-circle",

success: "check-circle",

warning: "exclamation-circle",

alert: "warning",

async: "cog fa-spin",

confirm: "warning",

prefix: "<i class='fa fa-fw fa-",

suffix: "'></i>",

enabled: true
},
replacements: {

tip: "",

info: "",

success: "",

warning: "",

alert: "",

async: "",

"async-block": "",

modal: "",

confirm: "",

general: { "<script>": "", "</script>": "" }
},
modal: {

okLabel: "OK",

cancelLabel: "Cancel",

maxWidth: "500px"
},
messages: {

async: "Please, wait...",

"async-block": "Loading"
},
handleReject(value) {

if (typeof param !== "string")


throw Error(



`promise.reject() returning value should be a string, Given ${typeof param} ${param}`


)

return param
},
maxNotifications: 10,
animationDuration: 300,
asyncBlockMinDuration: 500,
position: "bottom-right",
duration: 5000

Registro de cambios

10/25/2018

• v2.2.9