Dialog
An interactive dialog includes alert, confirm, notification and modal dialogs. But can be used in Browser and TypeScript project.
Getting Started
For SPA (Single Page Application)
Use npm install @bndynet/dialog
to install package, and import them like below:
import { alert, confirm, notify, loading, loadingFor, iframe, element } from "@bndynet/dialog";
For Website
The UMD build is also available on unpkg.com, and you can add to your website like:
<link href="https://unpkg.com/@bndynet/dialog/dist/dialog.css" rel="stylesheet" type="text/css" />
<script src="https://unpkg.com/@bndynet/dialog/dist/dialog.umd.js"></script>
<script>
dialog.setup({
theme: "your-theme", // will be appended the `class` attribute of `body` tag, more themes please see https://github.com/bndynet/dialog-themes
labelOK: "OK",
labelCancel: "Cancel",
animate: true,
notificationAutoClose: true,
notificationClickClose: true,
notificationCloseDelay: 3000,
notificationTheme: "default",
notificationPlacement: "bottom right",
notificationMaxItems: 3,
notificationSquare: false
});
dialog.setTheme("theme");
dialog.alert("content", function() {});
dialog.alert("title", "content", function() {});
dialog.confirm("content", function() {}); // same as `dialog.confirm("content").then(function() { })`
dialog.confirm("title", "content", function() {}); // same as `dialog.confirm("title", "content").then(function() { })`
dialog.notify("Message"[, "success"|"warning"|"error"]);
dialog.notify({message: "message", theme: "success"});
dialog.loading();
dialog.loading(false); // hide the global loading box
dialog.loading({text: "Loading"});
dialog.url('http://bndy.net', 'Title'[, {width: '80%', height: '80%'}]);
dialog.element('formId', 'Form Title'[, {width: '80%', height: '80%'}]);
// loading box for element
var elLoading = dialog.loadingFor("#id", "Loading...", "#00ff00");
elLoading.hide();
</script>