Introducción
Estas aburrido de los mensajes de alertas aburridos y tardas vastante tiempo en crear unos desde o las librerias son muy dificil de usar, estas en tu hora buena. con lumina alerts crea mensajes de alerta facil, rapido, y ahorra tiempo pero sobre todo mensajes bonitos. La personalización, temas, posiciones, iconos y muchos mas son partes de mi libreria, que esperas y usas esta super libreria.
Instalación
Para comenzar a utilizar lumina alerts en tu proyecto, simplemente incluye el archivo JavaScript en tu página HTML:
<script src="https://cdn.jsdelivr.net/gh/Moisesdemolf/lumina-alerts/lumina-alerts.js"></script>
¡Y eso es todo! Ahora estás listo para mostrar alertas impresionantes en tu sitio web.
Opciones
Para mostrar un mensaje emergente utilizando Mi Librería, puedes utilizar la siguiente función:
msg(options);
Donde options es un objeto con las siguientes propiedades:
| Propiedad | Descripción |
|---|---|
| theme | El tema del mensaje emergente. Puede ser 'none', 'error', 'info', 'success', 'warning', 'ios' o 'android'. |
| text | El texto del mensaje emergente. |
| duration | La duración del mensaje emergente en milisegundos. |
| title | El título del mensaje emergente. |
| icon | La URL de un icono personalizado para el mensaje emergente. |
| confirmBTN | Un valor booleano que indica si se muestra un botón de confirmación. |
| confirmTXT | El texto del botón de confirmación. |
| confirmCLICK | La función que se ejecuta al hacer clic en el botón de confirmación. |
| cancelBTN | Un valor booleano que indica si se muestra un botón de cancelación. |
| cancelTXT | Texto del botón de cancelación (opcional) |
| cancelCLICK | Función que se ejecuta al hacer clic en el botón de cancelación. |
| position | Posición de la notificación (mas abajo, pero por defecto es center). |
| input | Mostrar un campo de entrada en la notificación (opcional). |
| placeholder | Texto de marcador de posición para el campo de entrada. |
| background | Color de fondo personalizado para la notificación (opcional). |
| animationIn | Animación de entrada para la notificación (fadeIn). |
| animationOut | Animación de salida para la notificación (fadeOut). |
Uso
Uso basico
Para mostrar un mensaje de alerta es simmplemente poniendo:
msg({text:"Una alert simple"})
Y con eso tenemos un alerta simple.
Ahora personalizemos nustros mensajes aun más:
msg({
theme: 'success',
title: 'Felicidades',
text: 'Has creado un mensaje de alerta algo simple, pero hermoso.'
})
En lo anterior creamos un mensaje de alerta con un titulo, un tema y un texto ¡no cuesta nada verdad!
Ahora agamos un mensaje de alerta mas completo:
msg({
theme: 'none',
text: 'Soy lumina alerts, libreria de alerts de javascript <br>Bienvenido',
title: "Hola" ,
icon: 'images/idea.png',
cancelBTN: true,
confirmBTN: true,
confirmTXT: 'Aceptar',
confirmCLICK: 'mensaje2()',
input: "text",
placeholder: "Escribe un texto"
});
function mensaje1(){
msg({
theme: 'error',
text: 'Cerrastes el alerta'
})
}
function mensaje2(){
msg({
theme: 'success',
text: 'su texto es: ' + intext()
});
}
Posicion
Una de las opciones que también hay en lumina alerts, son las pocisiones de los mensajes de alerta. aki tienes un ejepmlo basico:
msg({
position: 'top-left',
text: 'esta pocisión es top left'
});
las posiciones desponibles son:
- top-left
- top-center
- top-right
- bottom-left
- bottom-center
- bottom-right
- center (por defecto)
Estas posiciones se ven mas mejor en pc, ya que en telefonos no se muchos los cambios.
Temas
En lumina alerts hay 7 temas disponibles para usar.
Ejemplos de uso de cada tema:
msg({
theme:'none',
text: "ejemplo del tema none"
})
msg({
theme: 'info',
text: "ejemplo de tema info"
})
msg({
theme: 'success',
text: "ejemplo de tema success"
})
msg({
theme: 'error',
text: "ejemplo de codigo del tema error"
})
msg({
theme: 'warning',
text: "ejemplo de codigo del tema warning"
})
msg({
theme:'ios',
text: "ejemplo de codigo del tema ios"
})
msg({
theme: 'android',
text: "ejemplo de codigo del tema android"
})
Que te a parecido esa demostración, puedes crear muchas cosas más, lee la siguiente sección de trucos, para usar mejor mi libreria.
Trucos
Una cosa importe es la coma( , ). Si vas a poner multiples opciones has uso de la coma ya que con eso la libreria entiende que es otra opción.
Tambien uno de los trucos mas importantes es no poner opciones que ya tienen un valor, y tu vienes y pones el mismo valor que esta predeterminado. Por ejemplo:
Opción 1:
msg({
theme: 'none',
text: 'este es un mensaje simple',
cancelBTN: true,
position: 'center'
})Opción 2:
msg({text: 'este es un mensaje simple'})En el ejemplo anterior en la opcion 2 solo hemos ocupado una linea y nos hemos ahorrado codigo, y muestra lo mismo.
El punto a lo que kiero llegar esque no uses opciones que no vas a ocupar o si ya tiene un valor predeterminado y tu no vas a cambiar el valor.
Tambien en el titulo o en el texto del mensaje de alerta tu puedes poner codigo html ya que e ocupado html, css y javascript puro para crear esta libreria.
Puedes añadir por ejemplo animate css para poner otras animaciones a los alertas. Pero igual la puedes unir con cualquier otra libreria y asi poder crear nuevas cosas
Y sobre la estructura, puedes optar por poner todas las opciones en una sola linea o poner cada opcion en linea deferente, ai depende de las preferencias del usuario.
Aunque si vas a usar mas de una opción es mas mejor poner cada opción en una linea diferente, para que sea facil de entender, pero también depende de tus preferencias.
Recuerda que ¡Programar es magia!
Donación
Soy un desarrollador nuevo y para poder hacer crecer esta libreria se nesecita tu apoyo no importa la cantidad, pero lo que importa es la intención. Ayudanos a crecer
Contacto
Me puedes contactar mediante las siguientes redes sociales:
Agradecimientos
Le agradesco a todas aquellas personas que an usado mi libreria y también a todas aquellas perosonas que an contribuido. Muchas gracias.