Miss any of our Open RFC calls?Watch the recordings here! »

@bndynet/dialog

2.9.1 • Public • Published

Dialog

Demo | API Docs | Themes

npm Build Status Coverage Status Code Styles

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> 

Install

npm i @bndynet/dialog

DownloadsWeekly Downloads

30

Version

2.9.1

License

MIT

Unpacked Size

157 kB

Total Files

23

Last publish

Collaborators

  • avatar