confirm-extended-dialog v1.0.6
Confirm Extended Dialog
Description
Confirm extended dialog is a web component that displays a dialog box that can be customized in the description to display buttons of Confirm and Cancel. Finally, the dialog can execute actions after clicking the Confirm or Cancel button.
Installation
Download from npm:
npm i confirm-extended-dialog
Usage
Add in the project
Once it is installed, import it in the HTML file using the script
tag.
<script type="module">
import "confirm-extended-dialog";
</script>
Title and description
To set the title and description, use the slot
attribute in the HTML. For the title, use slot="title"
and for description, use slot="description"
. You can use one or the other or both.
<confirm-extended-dialog>
<h1 slot="title">Do you want to continue?</h1>
<p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>
Attributes
The confirm-extended-dialog
web component has the following attributes:
confirm-label
. Customizes the text of the confirmation button. By default, it isConfirm
.cancel-label
. Customizes the text of the cancel button. By default, it isCancel
.icon
. Customizes the icon to show what kind of confirmation dialog it is. The allowable values aresuccess
,warning
, anderror
. By default, there is no icon.open
. It allows opening the dialog using the attribute by settingopen="true"
. By default, the dialog is closed.
Customize the text of the labels and the icon
<confirm-extended-dialog confirm-label="Yes" cancel-label="No" icon="warning">
<h1 slot="title">Do you want to continue?</h1>
<p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>
Open immediately
<confirm-extended-dialog open="true">
<h1 slot="title">Do you want to continue?</h1>
<p slot="description">The changes cannot be undone.</p>
</confirm-extended-dialog>
Listeners
The confirm extended dialog web component can execute an action when the confirm or cancel button is clicked. Let's see each case:
// When the confirm button is clicked, an alert message is shown
const dialog = document.querySelector("confirm-extended-dialog");
dialog.addEventListener("confirm", () => alert("Hello world!!"));
// When the cancel button is clicked, the dialog is immediately closed and an alert message is shown.
const dialog = document.querySelector("confirm-extended-dialog");
dialog.addEventListener("cancel", () => alert("Goodbye world!!"));
Technologies
Contributing
Any contribution is welcome.
License
MIT licensed.