Componente web del cuadro de diálogo del estilo iOS-Pure-Dialog

Vista prévia

Descripción

Pure-Dialog es un componente web para crear ventanas emergentes de diálogo de confirmación/alerta estilo iOS personalizables en la aplicación web/móvil.

Install it via NPM:

$ npm install pure-dialog --save

Funcionamiento

Incluir el documento-registro-elemento polyfill en el documento.

<script src="polyfills/document-register-element.js"></script>

Incluya el código JavaScript y CSS del componente de diálogo puro en el documento.

<script src="src/pure-dialog.js"></script>
<link href="src/pure-dialog.css" rel="stylesheet">

Cree el diálogo.

<pure-dialog id="example" title="Pure Dialog Demo" buttons="Absolutely, No, Maybe">

Is this project worth a star?
</pure-dialog>

Mostrar el cuadro de diálogo en la página.

document.querySelector('#example').show()

Mostrar el cuadro de diálogo como un cuadro de diálogo modal.

document.querySelector('#example').showModal()

Personalice la ventana emergente de diálogo.

var dialog = document.createElement('pure-dialog');

// set its properties
dialog.id = 'example';
dialog.title = 'Pure Dialog Demo';
dialog.innerHTML = 'Is this project worth a star?';
dialog.buttons = 'Absolutely, No';
dialog.closeButton = false;
dialog.autoClose = false;

API methods.

// show the dialog
dialog.show();





// show the dialog as a modal
dialog.showModal();

 // close the dialog
dialog.close();




 // add the dialog to the DOM (not require if using HTML literal)
dialog.appendToDOM();

 // remove the dialog from the DOM
dialog.remove();

Events.

// listen for button clicks
document.addEventListener('pure-dialog-button-clicked', function(e) {

console.log(e.type);

// event name

console.log(e.target);
// pure-dialog HTML element

console.log(e.detail);
// button clicked

 // use e.preventDefault() to cancel event
});

// detect closed clicked
document.addEventListener('pure-dialog-close-clicked', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element

// stop the dialog from closing by using e.preventDefault()
});

// detect dialog is opening
document.addEventListener('pure-dialog-opening', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element

// stop the dialog from opening by using e.preventDefault()
});

// detect dialog has opened
document.addEventListener('pure-dialog-opened', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element
});

// detect dialog is closing
document.addEventListener('pure-dialog-closing', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element

// stop the dialog from closing by using e.preventDefault()
});

// detect dialog has closed
document.addEventListener('pure-dialog-closed', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element
});

// detect dialog is appending to DOM
document.addEventListener('pure-dialog-appending', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element

// stop the dialog from been inserted by using e.preventDefault()
});

// detect dialog removed from DOM
document.addEventListener('pure-dialog-removing', function(e) {

console.log(e.type);

 // event name

console.log(e.target);
 // pure-dialog HTML element

// stop the dialog from been removed by using e.preventDefault()
});

Registro de cambios

11/11/2018

• v1.3.2: fixed button seperator issue

08/22/2018

• v1.3.0