https://github.com/polydile/dile-confirm
Web component to create a confirm dialog (Accept / Cancel), based on LitElement
https://github.com/polydile/dile-confirm
Last synced: 11 months ago
JSON representation
Web component to create a confirm dialog (Accept / Cancel), based on LitElement
- Host: GitHub
- URL: https://github.com/polydile/dile-confirm
- Owner: Polydile
- License: mit
- Archived: true
- Created: 2019-06-18T08:37:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-19T18:33:29.000Z (over 1 year ago)
- Last Synced: 2025-07-03T03:48:49.124Z (12 months ago)
- Language: JavaScript
- Homepage: https://dile-confirm.polydile.com/
- Size: 2.2 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moved!
**This package has moved** and is now available at [@dile/ui](https://github.com/Polydile/dile-components). Please update your dependencies. This repository is no longer maintained. You can read the documentation at [Dile Components](https://dile-components.com/).
# dile-confirm
This is a Web Component to implement a modal confirm box, based on LitElement.
Let's [go to DEMOS page](https://dile-confirm.polydile.com)!
# 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:
```
Delete this file?
```
Whatever you place inside the `````` 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](https://github.com/Polydile/dile-modal))
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