# PNotify
# 如何使用
# 在React中使用
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
PNotify.alert('Notice me, senpai!');
1
2
3
2
3
# Angular
import PNotify from 'pnotify/dist/es/PNotify';
import PNotifyButtons from 'pnotify/dist/es/PNotifyButtons';
//...
export class WhateverComponent {
constructor() {
PNotifyButtons; // Initiate the module. Important!
PNotify.alert('Notice me, senpai!');
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 原生ES5
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotify.js"></script>
<script type="text/javascript" src="node_modules/pnotify/dist/iife/PNotifyButtons.js"></script>
<script type="text/javascript">
PNotify.alert('Notice me, senpai!');
</script>
1
2
3
4
5
2
3
4
5
# 原生ES6
import PNotify from 'node_modules/pnotify/dist/es/PNotify.js';
import PNotifyButtons from 'node_modules/pnotify/dist/es/PNotifyButtons.js';
PNotify.alert('Notice me, senpai!');
1
2
3
2
3
# 默认主题
<link href="node_modules/pnotify/dist/PNotifyBrightTheme.css" rel="stylesheet" type="text/css" />
1
Material 样式模块：
import PNotifyStyleMaterial from 'pnotify/dist/es/PNotifyStyleMaterial.js';
// or
var PNotifyStyleMaterial = require('pnotify/dist/umd/PNotifyStyleMaterial.js');
// Set default styling.
PNotify.defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
PNotify.defaults.icons = 'material';
1
2
3
4
5
6
7
2
3
4
5
6
7
# Material Icons
# The official Google package:
npm install --save material-design-icons
# OR, An unofficial package that only includes the font:
npm install --save material-design-icon-fonts
1
2
3
4
2
3
4
# Bootstrap作为默认样式
要将Bootstrap设置为默认样式，请在导入PNotify后从下面包含相应的设置：
PNotify.defaults.styling = 'bootstrap3'; // Bootstrap version 3
PNotify.defaults.icons = 'bootstrap3'; // glyphicons
// or
PNotify.defaults.styling = 'bootstrap4'; // Bootstrap version 4
1
2
3
4
2
3
4
# Font Awesome
要将Font Awesome设置为默认图标，请在导入PNotify后从下面包含相应的设置：
PNotify.defaults.icons = 'fontawesome4'; // Font Awesome 4
// or
PNotify.defaults.icons = 'fontawesome5'; // Font Awesome 5
1
2
3
2
3
# 创建通知提示
// 手动设置类型
PNotify.alert({
text: "I'm an alert.",
type: 'notice'
});
// 自动设置类型。
PNotify.notice({
text: "I'm a notice."
});
PNotify.info({
text: "I'm an info message."
});
PNotify.success({
text: "I'm a success message."
});
PNotify.error({
text: "I'm an error message."
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18