Confirm button
Usage
The ConfirmButton component enables the display of a confirmation prompt before the final execution of an action.
// create element
const button = document.createElement('monster-confirm-button');
// set label
button.setOption('labels.button', 'click me!');
// insert element into the DOM
document.getElementById('body').appendChild(button);
Add confirm action
The confirm button can be given a function via the actions.confirm
option.
button.setOption('actions.confirm', function (event) {
console.log('confirm');
button.hideDialog();
});
Add confirm action with state
The state is realized via a process queue.
button.setOption('actions.confirm', function (event) {
const self = this;
new Processing(() => {
self.setState('activity'); // set state
button.setOption('disabled', true);
}, 2000, () => { // delay 2000 milliseconds
button.hideDialog();
}).run().then(() => {
button.setOption('disabled', undefined); // remove state
});
});
Layout
The confirm-button control can be customized to your own needs. For this purpose, the control can be designed via CSS.
The different parts of the control can be designed using CSS. Since the internals of the component are in a shadow tree, access is via css pseudo-element parts.
monster-confirm-button::part(popper) {
background-color: white;
}
The nested parts can each be addressed via the part name and the subpart name. So the part button is addressable from the confirm button via confirm-button
.
monster-confirm-button::part(confirm-button) {
background-color: white;
}
The individual parts and slots are shown in the following picture.