Author: | nihaojob |
---|---|
Views Total: | 699 views |
Official Page: | Go to website |
Last Update: | January 14, 2023 |
License: | MIT |
Preview:

Description:
popular-message.js is a JavaScript library that helps create toast-like info/success/warning/error notifications and loading indicators on your modern web apps.
With the popular-message library, you can easily create stylish feedback messages informing your users about the status of their actions. It also allows you to create loading indicators that can be used to notify the user when a request is being processed.
How to use it:
1. Install and import the popular-message.
# Yarn $ yarn add popular-message # NPM $ npm i popular-message
import $message from 'popular-message'; import 'popular-message/index.css';
2. Or directly load the following files into your document.
<link rel="stylesheet" href="index.css" /> <script src="index.js"></script>
3. Basic usages.
$message.info('This is an info message'); $message.success('This is a success message'); $message.warning('This is a warning message'); $message.error('This is an error message'); $message.loading('loading...');
4. Create custom toast messages and loading indicators
$message.info('This is an info message',{ // auto dismiss after 2 seconds // 0 means always show the toast message duration: 2, // show a close button inside the toast message closable: false, // determine whether to allow html content dangerUseHtml: false, // callback onClose:() => console.log('close'), });
5. Set global options.
$Message.config({ // top offset in px top: 24, // auto dismiss after 3 seconds // 0 means always show the toast message duration: 3, // only display one toast message at a time singleton: false, });
6. Destroy the instance.
$message.destroy()