https://github.com/bndynet/dialog

Pretty browser dialogs, notifications and loading boxes
https://github.com/bndynet/dialog

alert confirm dialog notification toaster typescript

Last synced: about 22 hours ago
JSON representation

Pretty browser dialogs, notifications and loading boxes

• Host: GitHub
• URL: https://github.com/bndynet/dialog
• Owner: bndynet
• Created: 2019-01-26T03:11:01.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-06-23T03:35:17.000Z (over 3 years ago)
• Last Synced: 2025-01-11T21:17:01.312Z (9 months ago)
• Topics: alert, confirm, dialog, notification, toaster, typescript
• Language: TypeScript
• Homepage: https://bndynet.github.io/dialog/
• Size: 900 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

          
# Dialog

[Demo](https://bndynet.github.io/dialog/site/) |

[API Docs](https://bndynet.github.io/dialog/api/) |

[Themes](https://bndynet.github.io/dialog-themes)

[![npm](https://img.shields.io/npm/v/@bndynet/dialog.svg)](https://www.npmjs.com/package/@bndynet/dialog)

[![Build Status](https://travis-ci.com/bndynet/dialog.svg?branch=master)](https://travis-ci.com/bndynet/dialog)

[![Coverage Status](https://coveralls.io/repos/github/bndynet/dialog/badge.svg?branch=master)](https://coveralls.io/github/bndynet/dialog?branch=master)

[![Code Styles](https://img.shields.io/badge/Code_Style-Prettier-ff69b4.svg)](https://github.com/prettier/prettier)

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:

```typescript

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:

```html

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

```