zino-alert v1.0.0

JavaScript Alert Web Component

Autonomous open source alert component with RTL support built on Custom Elements and Shadow DOM specifications.

How to use

Installation

• Install with npm

$ npm install zino-alert

• Install with bower

$ bower install zino-alert

Using zino-alert

• HTML way

<zino-alert id="alert-1"
    heading="HTML"
    text="Lorem ipsum dolor sit amet."
    type="success"></zino-alert>

<script type="module" src="../zino-alert.js"></script>

Alert customizations are possible via data-* attributes.

• using the DOM API

<script type="module" src="../zino-alert.js"></script>

<script>
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();
</script>

• using the constructor

<script type="module">
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();
</script>

Styling

: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

Methods

document.querySelector("zino-alert").open();

Events

document.querySelector("zino-alert").addEventListener("close.alert", function(event) {
    // do something...    
});

Browser Support

License

zino-alert is licensed under the MIT license.

Copyright (c) 2019-2020 Dimitar Ivanov