Moved
This package has moved and is now available at @dile/dile-confirm. Please update your dependencies. This repository is no longer maintained.
dile-confirm
This is a Web Component to implement a modal confirm box, based on LitElement.
Let's go to DEMOS page!
Use
Install it from npm:
npm i dile-confirm
Place the script In your HTML page or include the dile-confirm.js file in your JS bundle. After that you can use the dile-confirm tag, like this:
<dile-confirm id="myModal">
<p>
Delete this file?
</p>
</dile-confirm>
Whatever you place inside the <dile-confirm> tag will be the content displayed when the modal box opens.
In addition, the confirm box display two buttons inside the modal interface:
- Cancel button: pressing it, the confirm box closes and dispatchs the dile-confirm-cancelled event
- Accept button: pressing it, the confirm box closes and dispatchs the dile-confirm-accepted event
Properties
- opened: Bolean property used to change the confirm modal state, false is closed / true means open.
- cancelLabel: The text to the cancel button.
- acceptLabel: The text to the accept button.
- blocking: Click on the background layer do not closes the confirm box.
Methods
- open: Use it to open the modal confirm box
- close: Use it to close the modal confirm box
- accept: Closes the modal box and dispatch dile-confirm-accepted event
- cancel: Closes the modal box and dispatch dile-confirm-cancelled event
Custom events
- dile-confirm-cancelled: Dispatched when the confirm box is cancelled. This occurs when the user press the cancel button or closes the modal box cliking outside.
- dile-confirm-accepted: Dispatched when the confirm box is accepted. This occurs when the user press the accept button.
Style customization
These are the dile-confirm CSS custom properties. (But remember, you can customize the modal box interface also by using the CSS custom properties of the dile-modal component)
| Custom property | Description | Default |
|---|---|---|
| --dile-confirm-accept-button-color | Accept button background color | #007bff |
| --dile-confirm-cancel-button-color | Cancel button background color | #dc3545 |
| --dile-confirm-accept-text-button-color | Accept button text color | #fff |
| --dile-confirm-cancel-text-button-color | Cancel button text color | #fff |
| --dile-confirm-border-radius-button | Button border radius | 5px |
| --dile-confirm-padding-button | Button padding | 7px |
| --dile-confirm-font-size-button | Button font size | 1em |
| --dile-confirm-buttons-text-align | Buttons element text align | right |
| --dile-confirm-text-transform | Button text transformation | uppercase |
| --dile-confirm-buttons-margin-top | Confirm buttons section margin-top | 10px |
| --dile-confirm-buttons-margin-bottom | Confirm buttons section margin-bottom | 10px |
| --dile-confirm-buttons-margin-left | Confirm buttons section margin-left | 0 |
| --dile-confirm-buttons-margin-right | Confirm buttons section margin-right | 0 |