Elegante barra de aviso con barra de Progreso-Notice. js

Vista prévia

Descripción

Notice. js es un pequeño plugin de notificación de JavaScript vainilla para mostrar barras de aviso temporal apilables con barras de progreso que representan el tiempo restante.

Más características

• 4 tipos predefinidos.
• Modo modal: muestra una superposición de fondo cuando se abre la notificación.
• Compatibilidad con LTR o RTL.
• Animaciones de apertura/cierre personalizadas.

Funcionamiento

Instale & Descargue el paquete.

# NPM
$ npm install notice.js --save

Enlace a los archivos JavaScript y CSS necesarios.

<link href="noticejs.css" rel="stylesheet">
<script src="notice.js"></script>

Cree una nueva instancia de notificación.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message'
})

Mostrar la notificación en la página.

instance.show();

Establezca el tipo de animación. Tipos disponibles:

• Éxito (predeterminado)
• Información
• Advertencia
• Error

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



type: 'error'
})

Establezca la posición de la notificación. Default: ' topRight '.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



position: 'topLeft'
})

Establezca la duración de la notificación. Predeterminado: 3 segundos.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



timeout: 30
})

Agregue animaciones CSS3 adicionales a la notificación. En este ejemplo, vamos a usar Animate. CSS para las animaciones.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



animation: {




open: 'animated bounceInRight',




close: 'animated bounceOutLeft'



}
})

Más opciones de configuración.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



newestOnTop: false,



timeout: 30,



progressBar: true,



closeWith: ['button'],



modal: true,



width: 320,



scroll: {




maxHeightContent: 300,




showOnHover: true



},



rtl: false
})

Funciones de devolución de llamada.

const instance = new NoticeJs({



title: 'Notification title',



text: 'Notification message',



callbacks: {




beforeShow: [],




onShow: [],




afterShow: [],




onClose: [],




afterClose: [],




onClick: [],




onHover: [],




onTemplate: []



}
})