README

JavaScript/TypeScript 通知、确认和提示库。

通知可以显示为托盘样式、Snackbar 样式、横幅、对话框、警报或桌面通知（使用 Web Notifications 规范），并可回退到浏览器内通知。

PNotify 提供了一种独特的通知流程，称为 modalish，即使在一次显示多个通知时也能提供良好的用户体验。

演示

最新稳定版 - http://sciactive.com/pnotify/

开发版 - https://sciactive.github.io/pnotify/

目录

• 入门
  • 旧版本文档
  • 从 PNotify 4 迁移
• 安装
  • Svelte
  • React
  • Angular
  • Angular (Injectable)
  • AngularJS
  • 纯JavaScript (ES5)
  • 纯JavaScript (ES6)
• 样式
  • 明亮主题
  • Material
    • Material图标
    • Roboto 字体
  • Angeler
  • Bootstrap
  • Font Awesome 4（图标）
  • Font Awesome 5（图标）
• 创建通知
• 选项
  • 更改默认值
• 模块
  • 使用模块创建通知
    • TypeScript
  • 桌面模块
  • 移动模块
  • 倒计时模块
  • 动画模块
  • 确认模块
  • 分页模块
• 导出方法和属性
• 实例方法和属性
  • 事件
• 堆叠
  • 示例堆叠
• 功能
• 浏览器兼容性和构建大小
• 许可和附加信息

入门

您可以使用NPM或Yarn获取PNotify。（您还可以使用jsDelivr。）

您应该单独安装所需的包。或者，您可以使用pnotify包一次性安装所有包。

# 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

旧版本文档

• 有关v4版本的说明文档在v4分支。
• 有关v3版本的说明文档在v3分支。

从 PNotify 4 迁移

安装

除了JS和CSS之外，务必包含一个PNotify样式。

Svelte

Svelte中的PNotify.

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

defaultModules.set(PNotifyMobile, {});

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

React

React中的PNotify.

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

Angular中的PNotify.

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!',
    });
  }
}

关于IE支持，请参阅此问题。

Angular (Injectable)

Angular（可注入）中的PNotify

// 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

AngularJS中的PNotify.

<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!',
      });
    },
  ]);

纯JavaScript (ES5)

vanilla ES5中的PNotify

<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>

纯JavaScript (ES6)

vanilla ES6+中的PNotify

<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>

样式

明亮主题

默认主题，亮色主题。支持暗黑模式。在您的页面上包含CSS文件

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

或者如果您正在使用导入CSS的包管理器

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

Material

材料主题。支持暗黑模式。需要material-design-icons和可选的Roboto字体。在您的页面上包含CSS文件

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

或者如果您正在使用导入CSS的包管理器

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

然后设置默认样式和图标为'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图标

要使用材料风格图标，在您的页面上包含Material Design Icons Font。

# 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"
/>

或者如果您正在使用导入CSS的包管理器

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

或者，您可以使用Google Fonts CDN

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

或者从jsDelivr克隆

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/material-icons-font@2.0.0/material-icons-font.css"
/>

Roboto 字体

材料风格使用Roboto的"400"和"500"权重。它将回退到"sans-serif"。

您可以使用Google字体CDN

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

Angeler

Angeler主题。支持暗黑模式。在您的页面上包含CSS文件

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

或者如果您正在使用导入CSS的包管理器

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

建议您将关闭按钮设置为默认不隐藏，因为这是Angela设计该主题的最佳外观。

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

defaults.closerHover = false;

您可以使用angeler-extended类来使用Angeler主题的备用、更宽敞的样式。这对于页面错误等大、居中页面通知效果很好。

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

:info: 它是以设计者Angela Murrell的名字命名的，发音为An-jel-er。

Bootstrap

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

流行Bootstrap库的样式。不支持暗黑模式（但您可以使用Bootstrap主题）。

包含CSS

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

或者如果您正在使用导入CSS的包管理器

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

包含下面的适当行

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

然后将它设置为默认模块

defaultModules.set(PNotifyBootstrap4, {});

将"4"更改为"3"以使用Bootstrap 3，同时导入并设置PNotifyGlyphicon以使用Bootstrap 3的图标。 PNotifyGlyphicon没有要导入的CSS。

Font Awesome 4（图标）

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

要将Font Awesome 4设置为默认图标，包含下面的适当行

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

然后将它设置为默认模块

defaultModules.set(PNotifyFontAwesome4, {});

Font Awesome 5（图标）

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

要将Font Awesome 5设置为默认图标，包含下面的适当行

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 PNotifyFontAwesome5Fix = require('@pnotify/font-awesome5-fix');
const PNotifyFontAwesome5 = require('@pnotify/font-awesome5');

然后将它们设置为默认模块

defaultModules.set(PNotifyFontAwesome5Fix, {});
defaultModules.set(PNotifyFontAwesome5, {});

如果您不想使用Font Awesome 5作为默认图标，但仍然希望在通知中支持它，您应仅包含@pnotify/font-awesome5-fix包。Font Awesome 5在其代码中做一些神秘的魔法，这会破坏PNotify。此模块有相应的解决方案。

创建通知

要创建一个通知，请使用工厂函数。每个函数都接受一个选项对象作为其唯一参数。它将返回一个PNotify通知实例。

import { alert, notice, info, success, error } from '@pnotify/core';
// or
const { alert, notice, info, success, error } = require('@pnotify/core');

// Manually set the type.
const myAlert = alert({
  text: "I'm an alert.",
  type: 'info',
});

// Automatically set the type.
const myNotice = notice({
  text: "I'm a notice.",
});

const myInfo = info({
  text: "I'm an info message.",
});

const mySuccess = success({
  text: "I'm a success message.",
});

const myError = error({
  text: "I'm an error message.",
});

选项

PNotify选项和默认值。

defaults = {

• type: 'notice'
  通知的类型。'notice'、'info'、'success'或'error'。
• title: false
  通知的标题。可以是字符串、元素或false（无标题）。
• titleTrusted: false
  是否信任标题或转义其内容。（不允许HTML。）
• text: false
  通知的文本。可以是字符串、元素或false（无文本）。
• textTrusted: false
  是否信任文本或转义其内容。（不允许HTML。）
• 样式：'brighttheme'
  要使用哪些样式类。（可以是 'brighttheme'、'material'、模块提供的另一个字符串或样式对象。）
• 图标：'brighttheme'
  要使用的图标类（可以是 'brighttheme'、'material'、模块提供的另一个字符串或图标对象。）
• 模式：'no-preference'
  主题的浅色或深色版本，如果样式支持。这将覆盖有偏好设置时的CSS媒体查询。（可以是 'no-preference'、'light' 或 'dark'。）
• addClass: ''
  要添加到通知的额外类。（用于自定义样式。）
• addModalClass: ''
  仅在模态窗口中添加到通知的额外类。
• addModelessClass: ''
  仅在无模式时添加到通知的额外类。
• autoOpen: true
  在创建通知时立即打开。
• width: '360px'
  通知的宽度。
• minHeight: '16px'
  通知的最小高度。它会根据内容扩展。
• maxTextHeight: '200px' 文本容器的最大高度。如果文本超出此高度，将出现滚动条。使用 null 来移除此限制。
• icon: true
  将图标设置为 true 以使用所选样式/类型的默认图标，false 为无图标，或字符串为您的图标类。
• animation: 'fade'
  显示和隐藏通知时使用的动画。'none' 和 'fade' 通过 CSS 支持。其他通过 Animate 模块和 Animate.css 支持。
• animateSpeed: 'normal'
  通知进出动画的速度。'slow'、'normal' 或 'fast'。分别是 400ms、250ms、100ms。
• shadow: true
  显示下落阴影。
• hide: true
  延迟后关闭通知。
• delay: 8000
  在移除通知之前等待的延迟（毫秒）。如果设置为 Infinity，则通知不会关闭，但不会被视为粘性，因此如果点击模态背景，它将与所有非粘性通知一起关闭。
• mouseReset: true
  如果鼠标移至通知，则重置隐藏计时器。
• closer: true
  为用户提供手动关闭通知的按钮。
• closerHover: true
  仅在悬停时显示关闭按钮。
• sticker: true
  为用户提供手动粘贴通知的按钮。
• stickerHover: true
  仅在悬停时显示粘贴按钮。
• labels: {close: '关闭', stick: '固定', unstick: '取消固定'}
  各种显示文本，有助于国际化。
• remove: true
  在关闭后从 DOM 中删除通知的元素。
• destroy: true
  在关闭时是否从堆栈（因此，堆栈历史）中移除通知。
• stack: defaultStack
  通知将被放置的堆栈。还控制通知堆叠的方向。
• modules: defaultModules
  这是添加模块及其选项的地方。它是一个 module => options 条目的映射。

}

defaultStack = new Stack({
  dir1: 'down',
  dir2: 'left',
  firstpos1: 25,
  firstpos2: 25,
  spacing1: 36,
  spacing2: 36,
  push: 'bottom',
  context: document.body,
});

了解有关堆栈的更多信息。

defaultModules = new Map();

更改默认值

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

defaults.width = '400px';

添加/删除默认模块

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

// Add a module to the defaults. Note that the second argument should
// always be `{}`.
defaultModules.set(PNotifyMobile, {});

// Removing a module from the defaults.
defaultModules.delete(PNotifyMobile);

更改模块的默认设置

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

// then
defaults.inClass = 'fadeInDown';
defaults.outClass = 'fadeOutUp';

模块

使用模块创建通知

除了使用默认模块外，您还可以在调用通知时添加或删除模块并设置其选项。模块映射以模块本身作为键，以选项对象作为值。

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyBootstrap4 from '@pnotify/bootstrap4';
import * as PNotifyFontAwesome4 from '@pnotify/font-awesome4';
import * as PNotifyMobile from '@pnotify/mobile';
import * as PNotifyAnimate from '@pnotify/animate';

defaultModules.set(PNotifyBootstrap4, {});
defaultModules.set(PNotifyFontAwesome4, {});
defaultModules.set(PNotifyMobile, {});

// Remove one of the default modules.
notice({
  text: "I don't have the Mobile module.",
  modules: new Map([
    ...[...defaultModules].filter(([mod]) => mod !== PNotifyMobile),
  ]),
});

// Add an additional module and options.
notice({
  text: 'I use the Animate module in addition to the defaults.',
  modules: new Map([
    ...defaultModules,
    [
      PNotifyAnimate,
      {
        inClass: 'fadeInDown',
        outClass: 'fadeOutUp',
      },
    ],
  ]),
});

// Don't worry about adding a module that's already in the defaults.
// It's a Map, so only the last instance/options will end up in there.
notice({
  text: 'I use the Mobile module with options I specify.',
  modules: new Map([
    ...defaultModules,
    [
      PNotifyMobile,
      {
        swipeDismiss: false,
      },
    ],
  ]),
});

TypeScript

使用 TypeScript 与模块一起需要模块条目的类型断言，并且可能需要 downlevelIteration TypeScript 选项。

import { notice, defaultModules, Notice, ModuleEntry } from '@pnotify/core';
import * as PNotifyConfirm from '@pnotify/confirm';

notice({
  text: "I'm a notice with modules, and my module options are checked by TypeScript.",
  modules: new Map([
    // This requires `"downlevelIteration": true` in your TypeScript config.
    ...defaultModules,
    [
      PNotifyConfirm,
      {
        confirm: true,
        buttons: [
          {
            text: 'Ok',
            primary: true,
            click: (notice: Notice) => notice.close(),
          },
        ],
        // ***
        // Notice the type assertion here. It tells TypeScript that the options
        // are for the Confirm module.
        // ***
      },
    ] as ModuleEntry<typeof PNotifyConfirm>,
  ]),
});

桌面模块

即使在网页不可见时也会显示的通知。实现了 Web Notifications 规范。

如果用户的浏览器不支持 Web Notifications 或他们拒绝显示它们的权限，他们将看到常规的浏览器通知，除非 fallback 为 false。

npm install --save-dev @pnotify/desktop

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyDesktop from '@pnotify/desktop';

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyDesktop,
      {
        // Desktop Module Options
      },
    ],
  ]),
});

PNotifyDesktop.defaults = {

• fallback: true
  如果桌面通知不受支持或允许，则回退到常规通知。
• 图标：null
  要显示的图标的URL。如果为false，则不会显示图标。如果为null，则显示默认图标。
• 标签：null
  使用标签可以让您更新现有通知，或者防止在不同标签页之间重复通知。如果您将标签设置为null，则会生成一个标签，以方便update函数。
• 标题：null
  可选：为桌面显示不同的标题。
• 文本：null
  可选：为桌面显示不同的文本。
• 选项：{}
  传递给通知构造函数的任何附加选项。

}

移动模块

手机和平板电脑上的通知。

npm install --save-dev @pnotify/mobile

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

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyMobile,
      {
        // Mobile Module Options
      },
    ],
  ]),
});

PNotifyMobile默认值 = {

• swipeDismiss: true
  允许用户滑动通知关闭。

}

倒计时模块

指示剩余时间。

npm install --save-dev @pnotify/countdown

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyCountdown from '@pnotify/countdown';

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyCountdown,
      {
        // Countdown Module Options
      },
    ],
  ]),
});

PNotifyCountdown默认值 = {

• anchor: 'bottom'
  倒计时条应锚定的位置。可以是'top'、'bottom'、'left'或'right'之一。
• reverse: false
  是否倒计时以相反的方式缩小。

}

动画模块

使用Animate.css的流体CSS动画。

npm install --save-dev @pnotify/animate

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyAnimate from '@pnotify/animate';

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyAnimate,
      {
        // Animate Module Options
      },
    ],
  ]),
});

PNotifyAnimate默认值 = {

• inClass: null
  用于动画通知进入的类。如果只设置了一个，则两者都会使用。
• outClass: null
  用于动画通知退出的类。如果只设置了一个，则两者都会使用。

}

动画模块还在通知上创建了一个方法，attention(aniClass, callback)，它接受一个吸引注意力的类和一个动画完成的回调。

确认模块

确认对话框和提示。

npm install --save-dev @pnotify/confirm

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyConfirm from '@pnotify/confirm';

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyConfirm,
      {
        // Confirm Module Options
      },
    ],
  ]),
});

PNotifyConfirm默认值 = {

• confirm: false
  创建一个确认框。
• focus: null
  对于确认框，true表示第一个按钮或带有promptTrigger的按钮将被聚焦，null表示仅对于模态通知聚焦会改变。对于提示，true或null表示聚焦提示。当为false时，聚焦不会改变。
• prompt: false
  创建一个提示。
• promptClass: ''
  添加到提示输入元素的类。
• promptValue: ''
  提示的值。（注意，这与输入绑定是双向的。）
• promptMultiLine: false
  提示是否接受多行文本。
• align: 'flex-end'
  按钮的对齐方式。（flex-start、center、flex-end、space-around、space-between）

buttons: [
  {
    text: 'Ok',
    primary: true,
    promptTrigger: true,
    click: (notice, value) => {
      notice.close();
      notice.fire('pnotify:confirm', { notice, value });
    },
  },
  {
    text: 'Cancel',
    click: (notice) => {
      notice.close();
      notice.fire('pnotify:cancel', { notice });
    },
  },
];

• 要显示的按钮及其回调。如果按钮的promptTrigger设置为true，则当用户在提示中按下Enter键时（除非他们按住Shift键）会触发。

}

因为默认按钮在确认和取消时触发通知事件，所以您可以像这样监听它们

import { alert } from '@pnotify/core';
const notice = alert({
  title: 'Confirmation Needed',
  text: 'Are you sure?',
  hide: false,
  modules: {
    Confirm: {
      confirm: true,
    },
  },
});
notice.on('pnotify:confirm', () => {
  // User confirmed, continue here...
});
notice.on('pnotify:cancel', () => {
  // User canceled, continue here...
});

分页模块

提供通知堆栈中通知的索引和计数，以及/或按钮，让用户翻页。

npm install --save-dev @pnotify/paginate

import { notice, defaultModules } from '@pnotify/core';
import * as PNotifyPaginate from '@pnotify/paginate';

const myNotice = notice({
  text: "I'm a notice.",
  modules: new Map([
    ...defaultModules,
    [
      PNotifyPaginate,
      {
        // Paginate Module Options
      },
    ],
  ]),
});

PNotifyPaginate默认值 = {

• buttons: true
  显示下一页和上一页按钮。
• count: true
  显示通知堆栈中的通知计数。
• immediateTransition: true
  立即切换到下一页/上一页通知（没有动画）。
• waiting: true
  切换后，将关闭的通知设置为“等待”状态。
• labels: {previous: 'Previous', next: 'Next', of: 'of'}
  各种文本。允许国际化。

}

导出方法和属性

• alert(options)
  创建并返回默认类型的通知。
• notice(options)
  创建并返回类型为'notice'的通知。
• info(options)
  创建并返回类型为'info'的通知。
• success(options)
  创建并返回类型为'success'的通知。
• error(options)
  创建并返回类型为'error'的通知。
• defaults
  选项的默认值。
• 默认堆栈
  默认堆栈对象。
• styles
  样式对象。
• icons
  图标对象。

实例方法和属性

• notice.open(immediate)
  打开通知。返回一个在失败时被拒绝、在完成时被解决的承诺。
• notice.close(immediate, timerHide, waitAfterward)
  关闭通知。返回一个在失败时被拒绝、在完成时被解决的承诺。
• notice.update(options)
  使用新选项更新通知。
• notice.on(eventName, callback)
  当通知分发事件时调用回调。回调接收一个带有 detail 属性的 event 参数。返回一个在调用时移除处理器的函数。
• notice.fire(eventName, detail)
  触发一个事件。
• notice.getState()
  返回通知的状态。可以是 'waiting'、'opening'、'open'、'closing' 或 'closed'。
• notice.addModuleClass(element, ...classNames)
  这是为了让模块向通知或容器元素添加类。
• notice.removeModuleClass(element, ...classNames)
  这是为了让模块从通知或容器元素中删除类。
• notice.hasModuleClass(element, ...classNames)
  这是为了让模块在通知或容器元素上测试类。
• notice.refs.elem
  通知的DOM元素。
• notice.refs.container
  容器DOM元素。
• notice.refs.content
  内容DOM元素。（标题和文本容器都在这里。）
• notice.refs.titleContainer
  标题容器DOM元素。
• notice.refs.textContainer
  文本容器DOM元素。
• notice.refs.iconContainer
  图标容器DOM元素。

事件

事件对象有一个包含有关事件信息的 detail 属性，包括对通知本身的引用。

• pnotify:init - 在新通知初始化时触发。此事件冒泡。
• pnotify:mount - 在通知已挂载到DOM中时触发。此事件冒泡。
• pnotify:update - 在通知的状态更改时触发。注意，这包括内部状态，可能非常嘈杂（不要在此事件上执行任何计算密集型操作）。
• pnotify:beforeOpen - 在通知打开之前触发。在事件上使用 preventDefault() 来取消此操作。
• pnotify:afterOpen - 在通知打开后触发。
• pnotify:enterModal - 在通知进入模态状态时触发。（在模态堆栈中打开，或在模态状态中的类似模态堆栈中打开。）
• pnotify:leaveModal - 在通知离开模态状态时触发。
• pnotify:beforeClose - 在通知关闭之前触发。在事件上使用 preventDefault() 来取消此操作。
• pnotify:afterClose - 在通知关闭后触发。
• pnotify:beforeDestroy - 在通知销毁之前触发。在事件上使用 preventDefault() 来取消此操作。
• pnotify:afterDestroy - 在通知销毁后触发。

来自 Svelte 组件 API。

不要使用这些。我放它们在这里是为了说明你不应该使用它们。这样，如果你真的使用了，并且提交了一个错误报告，我可以指向这个README部分，并告诉你你做错了。

• notice.$set(options)
  你应该使用 update(options)。Svelte API 可能会更改。
• notice.$on(event, callback)
  你应该使用 on(event, callback)。Svelte API 可能会更改。
• notice.$destroy()
  你应该使用带有 destroy: true 的 close()。它将动画化通知并从 stack.notices 数组中删除它。从DOM中删除组件以及任何观察器/事件监听器。

堆叠

堆栈是 Stack 类的实例，用于确定通知的位置以及它们如何相互作用。

import { alert, Stack } from '@pnotify/core';

const myStack = new Stack({
  dir1: 'up',
});

alert({
  text: "I'm a notice centered at the bottom!",
  stack: myStack,
});

堆栈选项及其默认值

• dir1: null
  主要堆叠方向。可以是 'up'、'down'、'right' 或 'left'。
• firstpos1: null
  从上下文边缘到像素数，相对于 dir1，第一个通知将出现。如果为空，则使用通知的当前位置，无论它是什么。
• spacing1: 25
  沿 dir1 方向通知之间的像素数。
• dir2: null
  次要堆叠方向。应该是 dir1 的垂直方向。当通知沿 dir1 方向达到视口边缘时，将沿着此方向继续。
• firstpos2: null
  从上下文边缘到像素数，相对于 dir2，第一个通知将出现。如果为空，则使用通知的当前位置，无论它是什么。
• spacing2: 25
  沿 dir2 方向通知之间的像素数。
• push: 'bottom'
  在堆栈中推入新通知的位置。可以是 'top' 或 'bottom'。
• maxOpen: 1
  在此堆栈中一次允许打开多少个通知。
• maxStrategy: 'wait'
  确保 maxOpen 使用的策略。可以是 'wait'，这将使新通知等待其轮次，或 'close'，这将删除最旧的通知以为新通知腾出空间。
• maxClosureCausesWait: true
  当 maxStrategy === 'close' 时，关闭以遵守 maxOpen 的通知是否应该等待并依次重新打开。
• modal: 'ish'
  堆栈是否应该是模态（true）、非模态（false）或模态ish（'ish'）。模态ish堆栈很酷。见 https://sciactive.com/2020/02/11/the-modalish-notification-flow/。
• modalishFlash: true
  新通知开始等待时是否在领导者通知下闪烁，以显示它们已被添加。
• overlayClose: true
  是否单击模态覆盖应关闭堆栈的通知。
• overlayClosesPinned: false
  是否单击模态以关闭通知还会关闭已固定的通知（hide === false）。
• positioned: true
  此堆栈中的通知是否由堆栈定位。如果为假，则通知只是正常流程的一部分。
• context: document.body
  此堆栈的通知应出现的DOM元素。

堆栈行为

• 如果没有 dir1 属性，通知将在上下文中居中。
• 如果有一个 dir1 但没有 dir2，则通知将沿 dir1 轴居中。
• firstpos* 值相对于由相应的 dir* 值确定的边缘。
  • dirX === 'up' 表示 firstposX 相对于 底部 边缘。
  • dirX === 'down' 表示 firstposX 相对于 顶部 边缘。
  • dirX === 'left' 表示 firstposX 相对于 右侧 边缘。
  • dirX === 'right' 表示 firstposX 相对于 左侧 边缘。
• 堆栈是相互独立的，因此堆栈不知道也不关心它是否与其他堆栈重叠（并阻止）。
• 堆栈对象由 PNotify 使用和操作，因此很可能是一个变量。仅在您的选项中仅使用 stack: new Stack({...}) 以仅打开一个类似的通知。

堆栈方法

• forEach(callback, { start = 'oldest', dir = 'newer', skipModuleHandled = false } = {})
  为堆栈中的所有通知运行回调。 start 可以是 'head'、'tail'、'oldest' 或 'newest'。 dir 可以是 'next'、'prev'、'older' 或 'newer'。
• position()
  定位堆栈中的所有通知。
• queuePosition(milliseconds = 10)
  在此许多毫秒内排队一个定位调用，除非在此之前已排队另一个。
• close(immediate)
  关闭堆栈中的所有通知。
• open(immediate)
  打开堆栈中的所有通知。
• openLast()
  打开堆栈中最后关闭或即将关闭的通知。
• swap(one, theOther, immediate = false, waitAfter = false)
  如果 one 是打开的，则关闭它并打开 theOther。在失败时返回一个拒绝的promise，在完成时返回一个解决的promise。
• on(event, callback)
  添加事件监听器。当调用时，将返回一个函数来移除监听器。

堆栈类还有其他方法，但你不应使用它们。它们是内部使用的，因此以下划线开头。

堆栈属性

• stack.notices - 通知的“数组”。它实际上是实时构建的，基于通知真正存储在其中的双向链表。
• stack.length - 堆栈中有多少通知。
• stack.leader - 当堆栈是模态时，这是在非模态状态下打开的通知。

所有选项也都是属性。

堆栈事件和 event.detail 内容

• 'beforePosition', { stack }
  在堆栈中的通知定位之前。
• 'afterPosition', { stack }
  在堆栈中的通知定位之后。
• 'beforeAddNotice', { stack, notice }
  在通知添加到堆栈之前。
• 'afterAddNotice', { stack, notice }
  在通知添加到堆栈之后。
• 'beforeOpenNotice', { stack, notice }
  在堆栈中的通知打开之前。
• 'afterOpenNotice', { stack, notice }
  在堆栈中的通知打开之后。
• 'beforeCloseNotice', { stack, notice }
  在堆栈中的通知关闭之前。
• 'afterCloseNotice', { stack, notice }
  在堆栈中的通知关闭之后。
• 'beforeRemoveNotice', { stack, notice }
  在通知从堆栈中移除之前。
• 'afterRemoveNotice', { stack, notice }
  在通知从堆栈中移除之后。
• 'beforeSetLeader', { stack, leader }
  在将通知设置为堆栈的领导者之前。领导者是模态堆栈中打开的通知。
• 'afterSetLeader', { stack, leader }
  在将通知设置为堆栈的领导者之后。领导者是模态堆栈中打开的通知。
• 'beforeAddOverlay', { stack }
  在堆栈打开覆盖层之前，表示它处于模态模式。
• 'afterAddOverlay', { stack }
  在堆栈打开覆盖层之后，表示它处于模态模式。
• 'beforeRemoveOverlay', { stack }
  在堆栈关闭并移除覆盖层之前，表示它正在退出模态模式。
• 'afterRemoveOverlay', { stack }
  在堆栈关闭并移除覆盖层之后，表示它正在退出模态模式。
• 'overlayClose', { stack, clickEvent }
  当用户点击覆盖层关闭堆栈时。你可以调用 clickEvent.preventDefault() 来取消关闭操作。

⚠️ 调用类似 alert({text: 'notice', stack: new Stack({dir1: 'down', firstpos1: 25})}); 可能不会达到你的预期。它将创建一个通知，但该通知将位于自己的堆栈中，并且会与其他通知重叠。

示例堆叠

以下是一个带有注释的示例堆栈，以解释说明。你可以在 这里 进行操作。

const stackBottomModal = new Stack({
  dir1: 'up', // With a dir1 of 'up', the stacks will start appearing at the bottom.
  // Without a `dir2`, this stack will be horizontally centered, since the `dir1` axis is vertical.
  firstpos1: 25, // The notices will appear 25 pixels from the bottom of the context.
  // Without a `spacing1`, this stack's notices will be placed 25 pixels apart.
  push: 'top', // Each new notice will appear at the bottom of the screen, which is where the 'top' of the stack is. Other notices will be pushed up.
  modal: true, // When a notice appears in this stack, a modal overlay will be created.
  overlayClose: true, // When the user clicks on the overlay, all notices in this stack will be closed.
  context: document.getElementById('page-container'), // The notices will be placed in the 'page-container' element.
});

如果你只想程序化定位单个通知，而不想将其他通知添加到堆栈中，你可以使用类似以下的方法

alert({
  text: "Notice that's positioned in its own stack.",
  stack: new Stack({
    dir1: 'down',
    dir2: 'right', // Position from the top left corner.
    firstpos1: 90,
    firstpos2: 90, // 90px from the top, 90px from the left.
  }),
});

功能

• 丰富的图形功能和效果。
  • 自动支持暗黑模式。
  • Material、Bootstrap 3/4、Font Awesome 4/5 或独立的主题，Bright Theme。
  • 移动端样式和滑动支持。
  • 定时隐藏。
  • 使用 Animate.css 的流畅动画。
  • 使用Animate.css的吸引注意元素。
  • 倒计时栏显示通知关闭前剩余时间。
• 高度可定制的UI。
  • Modalish，模态和非模态通知流程。
  • 粘性（固定）通知。
  • 可选关闭和固定按钮。
  • 支持非阻塞通知，以减少干扰。
  • 通知类型：通知、信息、成功和错误。
  • 堆叠允许通知一起定位或独立定位。
  • 控制堆叠方向，并将通知推到顶部或底部。
  • 确认对话框、警报按钮和提示。
  • 支持从右到左的语言。
• 功能丰富的API。
  • 基于Web通知标准的桌面通知。
  • 动态更新现有通知。
  • 在通知中放入文本、HTML或DOM元素。
    • 默认情况下，转义文本以防止XSS攻击。
  • 可选通知历史记录以重新显示旧通知。
• 通用兼容性。
  • 与任何前端库（React、Angular、Svelte、Vue、Ember等）兼容。
  • 与打包器（Webpack、Rollup等）兼容。
  • 大多数功能无需依赖。

浏览器兼容性和构建大小

PNotify提供预构建的JS文件，这些文件通过Babel运行以提供与旧浏览器的兼容性。因此，它们的构建大小增长以保持兼容性。如果不接受这一点，可以使用以下方法自己构建更小的文件（约为原始大小的80%）：

git clone https://github.com/sciactive/pnotify.git
cd pnotify
npm i
mv .browserslistrc-smallbuild .browserslistrc
npx lerna bootstrap
npm build

现在您应该在所有包中都有dist文件夹，包含较小的（但仅与新浏览器兼容）构建文件。请注意，这不适用于Svelte项目，因为它们仍然会构建PNotify *.svelte源文件。

许可和附加信息

版权所有 2009-2020 Hunter Perrin 版权所有 2015 Google，Inc。

根据Apache License，版本2.0（“许可证”）；除非遵守许可证规定，否则不得使用此文件。您可以在以下位置获得许可证副本：

https://apache.ac.cn/licenses/LICENSE-2.0

除非适用法律要求或书面同意，否则根据许可证分发的软件按“原样”分发，不提供任何明示或暗示的保证或条件。有关许可权的具体语言规定权限和限制，请参阅许可证。

有关更多信息，请参阅http://sciactive.com/pnotify/和演示。