https://github.com/riverside/zino-alert
:christmas_tree: Autonomous open source alert component
https://github.com/riverside/zino-alert
alert alertdialog customelements ecmascript2015 ecmascript6 es6 javascript shadowdom sweetalert sweetalert2 web-components webcomponent webcomponents zino-alert
Last synced: 4 months ago
JSON representation
:christmas_tree: Autonomous open source alert component
- Host: GitHub
- URL: https://github.com/riverside/zino-alert
- Owner: riverside
- License: mit
- Created: 2019-11-22T18:40:31.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-06-04T18:28:41.000Z (about 3 years ago)
- Last Synced: 2025-08-17T15:34:51.982Z (10 months ago)
- Topics: alert, alertdialog, customelements, ecmascript2015, ecmascript6, es6, javascript, shadowdom, sweetalert, sweetalert2, web-components, webcomponent, webcomponents, zino-alert
- Language: JavaScript
- Homepage: https://riverside.github.io/zino-alert/
- Size: 1.01 MB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript Alert Web Component
Autonomous open source alert component with RTL support built on Custom Elements and Shadow DOM specifications.
| Build | GitHub pages | NPM |
| --- | --- | --- |
| [](https://github.com/riverside/zino-alert/actions/workflows/test.yml) | [](https://github.com/riverside/zino-alert/actions/workflows/pages/pages-build-deployment) | [](https://www.npmjs.com/package/zino-alert) |
## How to use
### Installation
- Install with `npm`
```
$ npm install zino-alert
```
- Install with `bower`
```
$ bower install zino-alert
```
### Using `zino-alert`
- HTML way
```html
```
Alert customizations are possible via `data-*` attributes.
- using the DOM API
```html
const alert = document.createElement("zino-alert");
alert.heading = "DOM API";
alert.type = "success";
alert.text = "Autonomous WAI-ARIA accessible alert dialog.";
document.body.appendChild(alert);
alert.open();
```
- using the constructor
```html
import {ZinoAlert} from "../zino-alert.js";
const alert = new ZinoAlert({
heading: "Constructor",
type: "success",
text: "A web component build on Custom Elements and Shadow DOM APIs.",
showCancelButton: "true",
allowEscapeKey: "true"
});
document.body.appendChild(alert);
alert.open();
```
##### Styling
```css
:root {
--background-head: #fff;
--color-head: #FA4251;
--color-head-active: #FA4251;
--background-foot: #fff;
--color-foot: #222;
--background-odd: #fff;
--background-even: #fff;
--color-odd: #333;
--color-even: #222;
}
zino-grid {
margin: 20px auto 0;
width: 100%;
max-width: 1024px;
}
```
## Options
|Option|Required|Type|Default|Description|
|---|:---:|---|---|---|
|**allowEscapeKey** |No |Boolean|**true** |Whether to close the alert when the Escape key is pressed|
|**animation** |No |Boolean|**true** |Whether to use an animation when show the alert|
|**backdrop** |No |Boolean|**true** |Whether to use a backdrop|
|**background** |No |String |**#fff** |The alert's background color|
|**cancelButtonAriaLabel** |No |String |**Cancel** |The cancel button's aria-label attribute|
|**cancelButtonColor** |No |String |**#aaa** |The cancel button's background color|
|**cancelButtonText** |No |String |**Cancel** |The cancel button's text|
|**closeButtonAriaLabel** |No |String |**Close** |The close button's aria-label attribute|
|**confirmButtonAriaLabel**|No |String |**OK** |The confirm button's aria-label attribute|
|**confirmButtonColor** |No |String |**#3085d6**|The confirm button's background color|
|**confirmButtonText** |No |String |**OK** |The confirm button's text|
|**debug** |No |Boolean|**false** |If `true` will log events into console|
|**focusCancel** |No |Boolean|**false** |Whether to focus on cancel button when alert show|
|**focusConfirm** |No |Boolean|**true** |Whether to focus on confirm button when alert show|
|**footer** |No |String |**(empty)**|If not empty will show it's content at the alert's footer|
|**header** |No |String |**(empty)**|If not empty will show it's content at the alert's header|
|**heading** |No |String |**(empty)**|The alert's heading text|
|**position** |No |String |**center** |The alert's position. Accepts: top, top-start, top-left, top-end, top-right, center, center-start, center-left, center-end, center-right, bottom, bottom-start, bottom-left, bottom-end, bottom-right|
|**showCancelButton** |No |Boolean|**false** |Whether to show the cancel button|
|**showCloseButton** |No |Boolean|**false** |Whether to show the close button|
|**showConfirmButton** |No |Boolean|**true** |Whether to show the confirm button|
|**text** |No |String |**(empty)**|The alert's text|
|**type** |Yes|String |**(empty)**|The alert's icon. Accepts: success, error|
## Methods
| Method | Description |
| ------- | ----------- |
| **cancel** | Manually triggers the `cancel.alert` event. |
| **close** | Manually closes an alert and triggers the `close.alert` event. |
| **confirm** | Manually triggers the `confirm.alert` event. |
| **open** | Manually opens an alert and triggers the `open.alert` event. |
```javascript
document.querySelector("zino-alert").open();
```
## Events
| Event | Description |
| ------| ----------- |
| **cancel.alert** | This event is fired immediately when the **Cancel** button has been clicked. |
| **close.alert** | This event is fired immediately when the `close` instance method has been called. |
| **confirm.alert** | This event is fired immediately when the **Confirm** button has been clicked. |
| **open.alert** | This event is fired immediately when the `open` instance method has been called. |
```javascript
document.querySelector("zino-alert").addEventListener("close.alert", function(event) {
// do something...
});
```
## Browser Support
|Polyfill|Edge|IE11+|Chrome 54+|Firefox 63+|Safari 10.1+|Opera 41+|
|---|:---:|:---:|:---:|:---:|:---:|:---:|
|Yes|✓|✓|✓|✓|✓|✓|
|No|✗|✗|✓|✓|✓|✓|
## License
zino-alert is licensed under the MIT license.
Copyright (c) 2019-2020 Dimitar Ivanov