modales-w3css v1.1.0
Modales w3css
Utilidad para mostrar modales en el explorador. Utilizamos w3css para mostrar la modal.
Modal
Se utiliza solo para informar.
Uso
import {Modal} from 'modales-w3css';
let modal = new Modal();
modal.innerHtml = `<h1>Hola mundo</h1>`;
modal.open();
Nota: Si solo va usar la modal importe directamente desde su archivo
import {Modal} from 'modales-w3css/modal';
Atributos
innerHtml: string
Se usa para definir el contenido de la modal se utiliza la propiedad innerHtml.
modal.innerHtml = `
<div class="w3-panel w3-green">
<h3>Success!</h3>
<p>Green often indicates something successful or positive.</p>
</div>
`;
titulo: string
Se usa para definir el título de la modal.
modal.titulo = `Título de la modal`;
opciones.aceptar: string
Se usa para definir el texto del botón aceptar, por defecto Aceptar
;
modal.opciones.aceptar = `Sí`;
opciones.cancelar: string
Se usa para definir el texto del botón cancelar, por defecto Cancelar
;
modal.opciones.cancelar = `No`;
opciones.hostw3css: string
Se usa para definir el host de w3css, por defecto es https://www.w3schools.com/w3css/4/w3.css
.
modal.opciones.hostw3css = `css/w3.css`;
opciones.colorActivo: string
Se usa para definir el color activo de la modal, por defecto es w3-blue
.
modal.opciones.colorActivo = `w3-black`;
opciones.colorCancelar: string
Se usa para definir el color cancelar de la modal, por defecto es w3-red
.
modal.opciones.colorCancelar = `w3-black`;
opciones.colorFondo: string
Se usa para definir el color cancelar de la modal, por defecto es w3-white
.
modal.opciones.colorFondo = `w3-indigo`;
opciones.borderRadius: string
Se usa para definir el radio de los bordos, por defecto es 0
.
modal.opciones.borderRadius = `0 0 10px 10px`;
opciones.ancho: string
Se usa para definir el ancho de la modal, por defecto es 50%
.
modal.opciones.ancho = `300px`;
Métodos
open(): Promise
Se usa para saber la respuesta de abrir la ventana, se utiliza la función open.
modal.open().then(res => {
//presiono el botón x de la modal
if (res.op === 'cerrar') {
console.log('modal cerrada');
}
if (res.op === 'cancelar') {
console.log('modal cancelada');
}
if (res.op === 'aceptar') {
console.log('modal aceptar');
}
});
Usar formularios
Puede usar formularios para obtener datos del formulario.
modal.innerHtml = `
<div class="w3-panel w3-green">
<h3>Dime tu nombre</h3>
<form class="w3-container">
<p>
<div class="w3-margin-top">
<label for="nombre"><b>Nombre:</b></label>
<input type="text" name="nombre" class="w3-input w3-border"/>
</p>
</form>
</div>
`;
Los elementos del formulario estan contenidos dentro del objecto de respuesta en la llave data.
modal.open().then(res => {
console.log(res.data);
});
Modal Aceptar
Es una modal que cuenta con el boton de cerrar y el boton de Aceptar. Extiende de la clase Modal por lo que todos los atributos y métodos son los mismos.
Uso
import {ModalAceptar} from 'modales-w3css';
let modal = new ModalAceptar();
modal.innerHtml = `<h1>modal cerrar</h1>`;
modal.open();
Nota: Si solo va usar la modal importe directamente desde su archivo
import {ModalAceptar} from 'modales-w3css/modal-aceptar';
Modal cerrar
Es una modal que solo cuenta con el boton de cerrar. Extiende de la clase Modal.
Uso
import {ModalCerrar} from 'modales-w3css';
let modal = new ModalCerrar();
modal.innerHtml = `<h1>modal cerrar</h1>`;
modal.open();
Nota: Si solo va usar la modal importe directamente desde su archivo
import {ModalCerrar} from 'modales-w3css/modal-cerrar';