README
NoticeKit
A lightweight small notice widget with no dependencies, create notifications easily with this javascript plugin. See demo.
Main
dist/
├── notice.min.js
Get Started
install
download releases to your project.
<script src="./notice.min.js"></script>
or npm install
npm i @ouduidui/notice
import Notice from "@ouduidui/notice";
Usage
Syntax
const notice = new Notice();
Methods
showLoading()
Show loading animation.
notice.showLoading(options);
options
- Type:
Object - Optional
The options for loading. Check out the available options.
| option | type | required | default | Description | options |
|---|---|---|---|---|---|
| type | string |
false |
'line' |
the style type of loading animation | 'line'、'dots'、'dots_zoom'、'cube_flip'、'dots_spin'、'cube_zoom' |
| color | string |
false |
'#ffffff' |
color of loading animation and title | - |
| backgroundColor | string |
false |
'rgba(0,0,0,.6)' |
color of mask | - |
| title | string |
false |
- | loading text | - |
| fontSize | number |
false |
16 | font size of loading text | - |
Preview other style types of loading animation by demo.
Examples:
notice.showLoading({
type: 'dots',
title: 'Loading',
color: '#333',
backgroundColor: 'rgba(255,255,255,.6)',
fontSize: 14
});
hideLoading()
Close loading animation.
notice.hideLoading()
showToast()
show a pop-up to remind something.
notice.showToast(options);
options
- Type:
Object - Optional
The options for showing toast. Check out the available options.
| option | type | required | default | Description | options |
|---|---|---|---|---|---|
| Text | string |
true |
- | tips text | - |
| type | string |
false |
'default' |
the style type of toast ('default' -- no icon) | 'default'、'success'、'error'、'info'、'warning' |
| autoClose | string |
false |
true |
auto close after 4 seconds | - |
| showClose | string |
false |
false |
Show close button | - |
Preview other style types of loading animation by demo.