2.9.1 • Published 4 years ago
@bndynet/dialog v2.9.1
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>