Dialog
HTML
<x-dialog>
<div id="dialog-title">Save Preferences?</div>
<div id="dialog-content">
Anything you may want here
</div>
<div id="dialog-buttons">
<button id="ok" class="btn dialog-ok">OK</button>
<button id="alternate" class="btn dialog-alternate">Apply</button>
<button id="cancel" class="btn dialog-cancel">Cancel</button>
</div>
</x-dialog>
JavaScript
document.querySelector('#dlgBtn').addEventListener('click', () => {
let dialog = document.querySelector('x-dialog');
dialog.dispatchEvent(new CustomEvent('open'));
dialog.okAction = () => {
showSnackbar('OK Button Pressed');
};
dialog.cancelAction = () => {
showSnackbar('Cancel Button Pressed');
};
dialog.alternateAction = () => {
showSnackbar('Apply Button Pressed');
};
});