material-dialogs
v1.0.9
Published
Javascript library for styled dialogs with Material Design without dependencies.
Downloads
24
Maintainers
Readme
Material Dialogs
Javascript library for styled dialogs with Material Design without dependencies.
Install
Install with npm or yarn
npm i material-dialogs --save
yarn add material-dialogs
Import into your project
ES6
import {xAlert, xConfirm, xPrompt} from 'material-dialogs.js';
If you are working with a standard HTML page without a library, you can use the following:
<script type="module">
import {xAlert} from "/node_modules/material-dialogs/material-dialogs.js";
const button = document.querySelector('button');
button.addEventListener('click', () => {
xAlert({title: 'Alert', message: 'Are you sure?'});
})
//...
</script>
How to use
All functions return a promise, that is, you can perform an action conditionally on the user's action, See the examples below:
Alert
No action
xAlert({title: 'Alert', message: 'Are you sure?'});
With action when clicking the button
xAlert({title: 'Alert', message: 'Are you sure?', textConfirm: 'Yes', textCancel: 'No'}).then(() => {
console.log('alert');
}).catch(() => {
console.log('cancel');
});
Confirm
xConfirm({title: 'Confirm', message: 'Are you sure?', textConfirm: 'Yes', textCancel: 'No'}).then(() => {
console.log('confirm');
}).catch(() => {
console.log('cancel');
});
Prompt
xPrompt({title: 'Prompt', message: 'Enter your name', textConfirm: 'Save', textCancel: 'Cancel', value: 'Mark'}).then((value) => {
console.log(value);
}).catch(() => {
console.log('cancel');
});
Custom
const formDemo = `<form>
<div class="xmodal-input">
<label for="name">Name</label><br>
<input type="text" class="xmodal-input" name="name"><br>
</div>
<div class="xmodal-input">
<label for="email">Email</label><br>
<input type="email" class="xmodal-input" name="email"><br>
</div>
<div class="xmodal-buttons">
<button type="submit" class="xmodal-button">Submit</button>
</div>
</form>`;
xAlert({title: 'Personalized', message: formDemo, textConfirm: null}).then(() => {
console.log('alert');
}).catch(() => {
console.log('cancel');
});
});
For more details, see the example file demo\index.html