Create Notifications Notice Widget With a Javascript Plugin | NoticeKit

How to make use of it:

1. To use this library, including the next information on the net web page.

<link rel="stylesheet" href="./dist/notice.min.css" />
<script src="./dist/notice.min.js"></script>

2. Or import the NoticeKit as an ES module.

# NPM
$ npm i @ouduidui/notice

import Notice from "@ouduidui/notice";
import "@ouduidui/notice/style.css";

3. Create a brand new instance for the NoticeKit.

const instance = new Notice();

4. Show a loading spinner on the screen.

// show the loading spinner
instance.showLoading({
  type: 'line'
});

// hide the loading spinner
instance.hideLoading()

5. Available choices to customize the loading spinners.

instance.showLoading({

  // color of the loading spinner
  color: '#ffffff',

  // background color of the background overlay
  backgroundColor: 'rgba(0,0,0,.6)',

  // shows loading text
  title: 'Loading...',

  // font size of the loading text
  fontSize: 16,

});

6. Show a toast-like notification popup on the display.

instance.showToast({
  text: 'Toast Message Here'
  type: 'default'
});

7. Determine whether or not to auto dismiss the toast notification after 4 seconds.

instance.showToast({
  autoClose: true
});

8. Determine whether to indicate a detailed button inside the toast notification.

instance.showToast({
  showClose: false
});

The options for showing toast. Check out the available options.

Configurable Loading Spinner & Toast Notification, NoticeKit Plugin/Github

See Demo And Download