开源软件名称：

开源软件地址：

开源编程语言：

开源软件介绍：

v4:

v5:

A JavaScript/TypeScript notification, confirmation, and prompt library.

Notifications can display as toast style, snackbar style, banners, dialogs, alerts, or desktop notifications (using the Web Notifications spec) with fall back to an in-browser notice.

PNotify provides a unique notification flow called modalish that provides a good user experience, even when many notifications are shown at once.

Demos

Latest Stable - http://sciactive.com/pnotify/

Development - https://sciactive.github.io/pnotify/

Table of Contents

• Getting Started
  • Documentation for Old Versions
  • Migrating from PNotify 4
• Installation
  • Svelte
  • React
  • Angular
  • Angular (Injectable)
  • AngularJS
  • Vanilla JS (ES5)
  • Vanilla JS (ES6)
• Styles
  • Bright Theme
  • Material
    • Material Icons
    • Roboto Font
  • Angeler
  • Bootstrap
  • Font Awesome 4 (Icons)
  • Font Awesome 5 (Icons)
• Creating Notices
• Options
  • Changing Defaults
• Modules
  • Creating Notices with Modules
    • TypeScript
  • Desktop Module
  • Mobile Module
  • Countdown Module
  • Animate Module
  • Confirm Module
  • Paginate Module
• Exported Methods and Properties
• Instance Methods and Properties
  • Events
• Stacks
  • Example Stack
• Features
• Browser Compatibility and Build Size
• Licensing and Additional Info

Getting Started

You can get PNotify using NPM or Yarn. (You can also use jsDelivr.)

You should install the packages you need individually. Alternatively, you can install all of them at once with the pnotify package.

# Install the packages you need individually.

# You definitely need this one.
npm install --save-dev @pnotify/core
# These are the optional ones.
npm install --save-dev @pnotify/animate
npm install --save-dev @pnotify/bootstrap3
npm install --save-dev @pnotify/bootstrap4
npm install --save-dev @pnotify/confirm
npm install --save-dev @pnotify/countdown
npm install --save-dev @pnotify/desktop
npm install --save-dev @pnotify/font-awesome4
npm install --save-dev @pnotify/font-awesome5-fix
npm install --save-dev @pnotify/font-awesome5
npm install --save-dev @pnotify/glyphicon
npm install --save-dev @pnotify/mobile
npm install --save-dev @pnotify/paginate

# ...

# Or, you can install this to get them all.
npm install --save-dev pnotify

Documentation for Old Versions

• Readme for v4 on the v4 branch.
• Readme for v3 on the v3 branch.

Migrating from PNotify 4

Installation

In addition to the JS and CSS, be sure to include a PNotify style.

Svelte

PNotify in Svelte.

import { alert, defaultModules } from '@pnotify/core';
import * as PNotifyMobile from '@pnotify/mobile';

defaultModules.set(PNotifyMobile, {});

alert({
  text: 'Notice me, senpai!'
});

React

PNotify in React.

import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

alert({
  text: 'Notice me, senpai!'
});

Angular

PNotify in Angular.

import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

//...
export class WhateverComponent {
  constructor() {
    alert({
      text: 'Notice me, senpai!'
    });
  }
}

For IE support, see this issue.

Angular (Injectable)

PNotify in Angular (Injectable)

// pnotify.service.ts
import { Injectable } from '@angular/core';
import { alert, defaultModules } from '@pnotify/core';
import '@pnotify/core/dist/PNotify.css';
import * as PNotifyMobile from '@pnotify/mobile';
import '@pnotify/mobile/dist/PNotifyMobile.css';

defaultModules.set(PNotifyMobile, {});

@Injectable()
export class PNotifyService {
  getPNotifyAlert() {
    return alert;
  }
}

// whatever.module.ts
//...
import { PNotifyService } from './pnotify.service';
@NgModule({
  declarations: [...],
  imports: [...],
  providers: [PNotifyService],
  bootstrap: [...]
})
export class WhateverModule {}

// whatever.component.ts
import { PNotifyService } from './pnotify.service';
//...
export class WhateverComponent {
  alert = undefined;
  constructor(pnotifyService: PNotifyService) {
    this.alert = pnotifyService.getPNotifyAlert();
    this.alert({
      text: 'Notice me, senpai!'
    });
  }
}

AngularJS

PNotify in AngularJS.

<link href="node_modules/@pnotify/core/dist/PNotify.css" rel="stylesheet" type="text/css" />
<link href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css" rel="stylesheet" type="text/css" />

var angular = require('angular');
var PNotify = require('@pnotify/core');
var PNotifyMobile = require('@pnotify/mobile');

PNotify.defaultModules.set(PNotifyMobile, {});

angular.module('WhateverModule', [])
  .value('PNotify', PNotify)
  .controller('WhateverController', ['PNotify', function(PNotify) {
    PNotify.alert({
      text: 'Notice me, senpai!'
    });
  }]);

Vanilla JS (ES5)

PNotify in vanilla ES5

<script type="text/javascript" src="node_modules/@pnotify/core/dist/PNotify.js"></script>
<link href="node_modules/@pnotify/core/dist/PNotify.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="node_modules/@pnotify/mobile/dist/PNotifyMobile.js"></script>
<link href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
  PNotify.defaultModules.set(PNotifyMobile, {});

  PNotify.alert({
    text: 'Notice me, senpai!'
  });
</script>

Vanilla JS (ES6)

PNotify in vanilla ES6+

<link href="node_modules/@pnotify/core/dist/PNotify.css" rel="stylesheet" type="text/css" />
<link href="node_modules/@pnotify/mobile/dist/PNotifyMobile.css" rel="stylesheet" type="text/css" />
<script type="module">
  import { alert, defaultModules } from 'node_modules/@pnotify/core/dist/PNotify.js';
  import * as PNotifyMobile from 'node_modules/@pnotify/mobile/dist/PNotifyMobile.js';

  defaultModules.set(PNotifyMobile, {});

  alert({
    text: 'Notice me, senpai!'
  });
</script>

Styles

Bright Theme

The default theme, Bright Theme. Supports dark mode. Include the CSS file in your page:

<link href="node_modules/@pnotify/core/dist/BrightTheme.css" rel="stylesheet" type="text/css" />

Or if you're using a packager that imports CSS:

import '@pnotify/core/dist/BrightTheme.css';

Material

The Material theme. Supports dark mode. Requires material-design-icons and optionally the Roboto font. Include the CSS file in your page:

<link href="node_modules/@pnotify/core/dist/Material.css" rel="stylesheet" type="text/css" />

Or if you're using a packager that imports CSS:

import '@pnotify/core/dist/Material.css';

Then set the default styling and icons to 'material':

import { defaults } from '@pnotify/core';
// or
const { defaults } = require('@pnotify/core');

// Set default styling.
defaults.styling = 'material';
// This icon setting requires the Material Icons font. (See below.)
defaults.icons = 'material';

Material Icons

To use the Material Style icons, include the Material Design Icons Font in your page.

# 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

<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css" />

Or if you're using a packager that imports CSS:

import 'material-design-icons/iconfont/material-icons.css';

Alternatively, you can use the Google Fonts CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

Or a clone from jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/material-icons-font.css" />

Roboto Font

The Material style uses the "400" and "500" weights of Roboto. It will fall back to "sans-serif".

You can use the Google Font CDN:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" />

Angeler

The Angeler theme. Supports dark mode. Include the CSS file in your page:

<link href="node_modules/@pnotify/core/dist/Angeler.css" rel="stylesheet" type="text/css" />

Or if you're using a packager that imports CSS:

import '@pnotify/core/dist/Angeler.css';

It's recommended that you set the close button to not hide by default, as that is how Angela designed the theme to look best.

import { defaults } from '@pnotify/core';
// or
const { defaults } = require('@pnotify/core');

defaults.closerHover = false;

You can use the angeler-extended class to use the alternate, more spacious styling for the Angeler theme. This works great for big, center of the page notices, like page errors.

alert({
  text: "I'll be more expanded than normal, with a separated title line.",
  addClass: 'angeler-extended'
});

:info: It's named after Angela Murrell, who designed it, and it's pronounced like An-jel-er.

Bootstrap

npm install --save-dev @pnotify/bootstrap3 @pnotify/glyphicon
# or
npm install --save-dev @pnotify/bootstrap4

Styling for the popular Bootstrap library. Doesn't support dark mode (but you can use a Bootstrap theme).

Include the CSS:

<link rel="stylesheet" href="node_modules/@pnotify/bootstrap4/dist/PNotifyBootstrap4.css" />

Or if you're using a packager that imports CSS:

import '@pnotify/bootstrap4/dist/PNotifyBootstrap4.css';

Include the appropriate line(s) from below:

import { defaultModules } from '@pnotify/core';
import * as PNotifyBootstrap4 from '@pnotify/bootstrap4';
// or
const { defaultModules } = require('@pnotify/core');
const PNotifyBootstrap4 = require('@pnotify/bootstrap4');

Then set it as a default module:

defaultModules.set(PNotifyBootstrap4, {});

Change the "4" to "3" for Bootstrap 3, and also import and set PNotifyGlyphicon to use Bootstrap 3's glyphicons. PNotifyGlyphicon doesn't have any CSS to import.

Font Awesome 4 (Icons)

npm install --save-dev @pnotify/font-awesome4

To set Font Awesome 4 as the default icons, include the appropriate line from below:

import { defaultModules } from '@pnotify/core';
import * as PNotifyFontAwesome4 from '@pnotify/font-awesome4';
// or
const { defaultModules } = require('@pnotify/core');
const PNotifyFontAwesome4 = require('@pnotify/font-awesome4');

Then set it as a default module:

defaultModules.set(PNotifyFontAwesome4, {});

Font Awesome 5 (Icons)

npm install --save-dev @pnotify/font-awesome5 @pnotify/font-awesome5-fix

To set Font Awesome 5 as the default icons, include the appropriate line from below:

import { defaultModules } from '@pnotify/core';
import * as PNotifyFontAwesome5Fix from '@pnotify/font-awesome5-fix';
import * as PNotifyFontAwesome5 from '@pnotify/font-awesome5';
// or
const { defaultModules } = require('@pnotify/core');
const PNotifyFontAwesome5F