@academy-ui/notification 中文文档教程

Question

Notification Controller

通知样式 UI 的 Web 组件实现。 灵感来自 Firebase 的通知样式。

Implementation

Using Locally

• npm install @academy-ui/notification --save
• Put a script tag similar to this <script src='node_modules/@academy-ui/notification/dist/notification-controller.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Using a CDN

• Put a script tag similar to this <script src='https://unpkg.com/@academy-ui/notification@1.0.3/dist/notification-controller.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

注意：对于所有实现，您需要在根 中包含 notification-controller >index.html 您的项目。

<notification-controller class="top-right"></notification-controller>

可用的样式放置类包括：

• top-left
• top-right
• top-center
• bottom-left
• bottom-right
• bottom-center

Usage

Success Messages

document.getElementsByTagName('notification-controller').item(0).success('This is a success alert.');

Error Messages

document.getElementsByTagName('notification-controller').item(0).error('This is an error alert.');

Warning Messages

document.getElementsByTagName('notification-controller').item(0).warning('This is a warning alert.');

Info Messages

document.getElementsByTagName('notification-controller').item(0).error('This is an info alert.');

注意：您可以传递完整的选项配置而不是字符串消息来控制其他属性，例如图标、持续时间、单独的通知动画等。