notificaciones-w3css

Notificacion

Utilidad para mostrar notificaciones en el explorador. Utilizamos w3css para mostrar notificaciones.

Caracteristicas:

• Son tres tipos de notificaciones(success, warning, alert)
• Se encapsula su funcionamiento con shadowRoot
• Responsivas

DEMO

Uso

addNotificacion(<opciones> opciones?);

Opcion	tipo	Description
tipo	string	Indica el color con el se muestra la notificación
titulo	string	El título de la notificación
mensaje	string	El mensaje de la notificación
tiempo	number	El tiempo que durara la notificación
w3css	string	Indica la ubicacion del css w3.css

opciones

Tipo

Se utiliza para indicar el color en que se mostrara los colores de las notificaciones. Por defecto tenemos en el objecto NOTIFICACIONEs definidos 3 valores. Pero tambien se pueden utilizar directamente los colores de w3.css. Por defecto es NOTIFICACION.success.

addNotificacion({
    tipo: 'w3-indigo'
});

Titulo

Se utiliza para mostrar el título de la notificación. El texto que se usa es para ponerlo directamente en la notificación mediante un innerHTML. Por defecto tiene el valor 'Título'.

addNotificacion({
    titulo: 'Aviso'
});

Mensaje

Se utiliza para mostrar el mensaje de la notificación. El texto que se usa es para ponerlo directamente en la notificación mediante un innerHTML. Por defecto tiene el valor 'Mesanje'.

addNotificacion({
    mensaje: 'Este es un mensaje'
});

Tiempo

Se utiliza paraindicar cuanto dura la notificación. Se indica en milisegundos.

addNotificacion({
    tiempo: 2000
});

w3css

Se utiliza paraindicar la ubicacion de la libreria de w3css, por defecto es: https://www.w3schools.com/w3css/4/w3.css

//supongamos que descargamos la libreria y la tenemos en la carpeta css
addNotificacion({
    w3css: './css/w3.css'
});

Notificaciones

Estan definidas en el objecto NOTIFICACION y son las siguientes:

tipo	Valor
SUCCESS	w3-green
WARNING	w3-yellow
ALERT	w3-red

Ejemplo

import { addNotificacion, NOTIFICACION} from "notificaciones-w3css";

addNotificacion({
    tipo: NOTIFICACION.SUCCESS,
    titulo: '✔ Terminado',
    mensaje: 'Se termino la tarea correctamente.',
    tiempo: 2000
});
addNotificacion({
    tipo: NOTIFICACION.WARNING,
    titulo: ' Cuidado',
    mensaje: 'No se puede realizar esto.',
    tiempo: 2000
});
addNotificacion({
    tipo: NOTIFICACION.ALERT,
    titulo: ' Falló',
    mensaje: 'El servidor no funciona<br> Favor de contactar al administrador.',
    tiempo: 2000
});
//Puede ocupar una de las clases de color de w3css en el tipo
addNotificacion({
    tipo: 'w3-indigo',
    titulo: '&#10004; Terminado',
    mensaje: 'Se termino la tarea correctamente.',
    tiempo: 2000
});