Confirm button

Custom confirm button

Package@schukai/component-form
Importimport {ConfirmButton} from "https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/confirm-button.js";

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.