Elegante notificación popup biblioteca JavaScript-Notiflix

Vista prévia

Descripción

Notiflix es una biblioteca emergente de notificación flexible, potente y personalizable que envía diferentes tipos de mensajes de notificación al usuario.

Características

• Notificaciones de alertas como tostadas: éxito, error, advertencia e información.
• Cuadros emergentes de confirmación.
• Cuadros de diálogo de informe: correcto, error, advertencia e información.
• 6 indicadores de carga: estándar, reloj de arena, círculo, flechas, puntos y pulso.

Funcionamiento

Instalación:

# Yarn
$ yarn add notiflix

# NPM
$ npm install notiflix --save

Cargue los archivos JavaScript y CSS requeridos en el documento.

<link rel="stylesheet" href="notiflix-version.min.css" />
<script src="notiflix-version.min.js"></script>

Cree una notificación de alerta.

Notiflix.Notify.Init({

// options here
});

// or
Notiflix.Notify.Success('Success message');
Notiflix.Notify.Failure('Failure message');
Notiflix.Notify.Warning('Warning message');
Notiflix.Notify.Info('Info message ');
Notiflix.Notify.Success('Success message', function(){

// Callback
 });

Cree un diálogo de confirmación.

Notiflix.Confirm.Init({

// defaults

ID: "NotiflixConfirmWrap",

className: "notiflix-confirm",

width: "280px",

zindex: 4003,

position: "center",

distance: "10px",

backgroundColor: "#f8f8f8",

borderRadius: "25px",

backOverlay: !0,

backOverlayColor: "rgba(0,0,0,0.5)",

rtl: !1,

useGoogleFont: !0,

fontFamily: "Quicksand",

cssAnimation: !0,

cssAnimationStyle: "fade",

cssAnimationDuration: 300,

titleColor: "#00b462",

titleFontSize: "16px",

titleMaxLength: 34,

messageColor: "#1e1e1e",

messageFontSize: "14px",

messageMaxLength: 110,

buttonsFontSize: "15px",

buttonsMaxLength: 34,

okButtonColor: "#f8f8f8",

okButtonBackground: "#00b462",

cancelButtonColor: "#f8f8f8",

cancelButtonBackground: "#a9a9a9"
});

// or
Notiflix.Confirm.Show('Confirm Title','Confirm Message','Ok Button Text');

// with callback
Notiflix.Confirm.Show(

'Confirm Title',

'Confirm Message',

'Ok Button Text',

'Cancel Button Text',
function(){

// callback
});

Cree un diálogo de informe.

Notiflix.Report.Init({

// defaults

ID: "NotiflixReportWrap",

className: "notiflix-report",

width: "320px",

backgroundColor: "#f8f8f8",

borderRadius: "25px",

rtl: !1,

zindex: 4002,

backOverlay: !0,

backOverlayColor: "rgba(0, 0, 0, 0.5)",

useGoogleFont: !0,

fontFamily: "Quicksand",

svgSize: "110px",

plainText: !0,

titleFontSize: "16px",

titleMaxLength: 34,

messageFontSize: "13px",

messageMaxLength: 400,

buttonFontSize: "14px",

buttonMaxLength: 34,

cssAnimation: !0,

cssAnimationDuration: 360,

cssAnimationStyle: "fade",

success: {


svgColor: "#00b462",


titleColor: "#1e1e1e",


messageColor: "#242424",


buttonBackground: "#00b462",


buttonColor: "#fff"

},

failure: {


svgColor: "#f44336",


titleColor: "#1e1e1e",


messageColor: "#242424",


buttonBackground: "#f44336",


buttonColor: "#fff"

},

warning: {


svgColor: "#f2bd1d",


titleColor: "#1e1e1e",


messageColor: "#242424",


buttonBackground: "#f2bd1d",


buttonColor: "#fff"

},

info: {


svgColor: "#00bcd4",


titleColor: "#1e1e1e",


messageColor: "#242424",


buttonBackground: "#00bcd4",


buttonColor: "#fff"

}
});

// or
Notiflix.Report.Success('Title','Success Message','Button Text');
Notiflix.Report.Failure('Title','Failure Message','Button Text');
Notiflix.Report.Warning('Title','Warning Message','Button Text');
Notiflix.Report.Info('Title','Info Message','Button Text');

// with a callback
Notiflix.Report.Success(

'Success Title',

'Success Message',

'Button Text',
function(){

// callback
});

Cree un indicador de carga.

Notiflix.Loading.Init({

ID: "NotiflixLoadingWrap",

className: "notiflix-loading",

zindex: 4e3,

backgroundColor: "rgba(0,0,0,0.8)",

rtl: !1,

useGoogleFont: !0,

fontFamily: "Quicksand",

cssAnimation: !0,

cssAnimationDuration: 400,

clickToClose: !1,

customSvgUrl: null,

svgSize: "80px",

svgColor: "#00b462",

messageID: "NotiflixLoadingMessage",

messageFontSize: "15px",

messageMaxLength: 34,

messageColor: "#dcdcdc"
});

// or
Notiflix.Loading.Standard();
Notiflix.Loading.Hourglass();
Notiflix.Loading.Circle();
Notiflix.Loading.Arrows();
Notiflix.Loading.Dots();
Notiflix.Loading.Pulse();

// with custom loading text
Notiflix.Loading.Standard('Loading...');

// remove
Notiflix.Loading.Remove();

// remove after delay
Notiflix.Loading.Remove(2000);


// use a custom loading spinner
Notiflix.Loading.Init({

customSvgUrl:'icon.svg',

 svgSize:'80px'
});
 Notiflix.Loading.Custom();

Configuración global.

Notiflix.Notify.Init({

wrapID: "NotiflixNotifyWrap",

width: "280px",

position: "right-top",

distance: "10px",

opacity: 1,

borderRadius: "5px",

rtl: !1,

timeout: 3e3,

messageMaxLength: 110,

backOverlay: !1,

backOverlayColor: "rgba(0,0,0,0.5)",

ID: "NotiflixNotify",

className: "notiflix-notify",

zindex: 4001,

useGoogleFont: !0,

fontFamily: "Quicksand",

fontSize: "13px",

cssAnimation: !0,

cssAnimationDuration: 400,

cssAnimationStyle: "fade",

closeButton: !1,

useIcon: !0,

useFontAwesome: !1,

fontAwesomeIconStyle: "basic",

fontAwesomeIconSize: "34px",

success: {


background: "#00b462",


textColor: "#fff",


childClassName: "success",


notiflixIconColor: "rgba(0, 0, 0, 0.25)",


fontAwesomeClassName: "fas fa-check-circle",


fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"

},

failure: {


background: "#f44336",


textColor: "#fff",


childClassName: "failure",


notiflixIconColor: "rgba(0, 0, 0, 0.2)",


fontAwesomeClassName: "fas fa-times-circle",


fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"

},

warning: {


background: "#f2bd1d",


textColor: "#fff",


childClassName: "warning",


notiflixIconColor: "rgba(0, 0, 0, 0.2)",


fontAwesomeClassName: "fas fa-exclamation-circle",


fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"

},

info: {


background: "#00bcd4",


textColor: "#fff",


childClassName: "info",


notiflixIconColor: "rgba(0, 0, 0, 0.2)",


fontAwesomeClassName: "fas fa-info-circle",


fontAwesomeIconColor: "rgba(0, 0, 0, 0.2)"

}
});