Press "Enter" to skip to content

Create Notifications Notice Widget With a Javascript Plugin | NoticeKit

NoticeKit is a small, lightweight, no-dependency notification tool that creates notifications easily with this JavaScript plugin. NoticeKit JavaScript library provides 6 types of download disks and 5 types of toast notifications for modern web development.

toast notification javascript, toastr, css toast, toast notification animation, toast notification, toast notification jquery

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.

optiontyperequireddefaultDescriptionoptions
Textstringtruetips text
typestringfalse'default'the style type of toast (‘default’ — no icon)

‘default’、’success’、

‘error’、’info’、’warning’

autoClosestringfalsetrueauto close after 4 seconds
showClosestringfalsefalseShow close button

Configurable Loading Spinner & Toast Notification, NoticeKit Plugin/Github


See Demo And Download

Official Website(OUDUIDUI): Click Here

This superior jQuery/javascript plugin is developed by OUDUIDUI. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.