土司

这个 <auro-toast> 元素为 a HTML 自定义元素 为了向访客发出无侵扰性的吐司(或推)通知.

这个 <auro-toaster> 包装元素是一个 HTML 自定义元素 在屏幕下方使用 <auro-toast> 键.

使用大小写

这个 <auro-toast> 使用实例包括:

• 发送错误按下通知
• 发送成功的推动通知
• 发送任何类型的推动通知

安装

$ npm i @aurodesignsystem/auro-toast

定义项目中的依赖性

确定每个项目中的依赖性 <auro-toast> 组件.

import "@aurodesignsystem/auro-toast";

使用 CDN 软件

在项目无法处理JS资产的情况下,有预处理后的资产可供使用. IE11等后遗症浏览器不再被支持.

<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>

基本示例

<auro-button id="basicToastBtn">
  Show default notification
</auro-button>
<!--
NOTE: The manually added style is NOT necessary for use,
Demo purposes ONLY!
-->
<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
  Default notification with no error type.
</auro-toast>

自定义版本管理组件注册

每个Auro组件有两个关键部分: 类 和自定义元素定义. 类定义了组件的行为,而自定义元素则以特定的名称注册,以便用于HTML.

当您安装您所描述的组件时 Install 页面中,该类会自动导入,组件会在全球注册.

然而,如果需要将同一组件的多个版本加载到一页上(例如,当两个工程依赖于不同的版本时),可以手动在自定义元素名下注册类来避免冲突.

您可以仅导入组件类并使用 register(name) 唯一名称的方法 :

// Import the class only
import { AuroToast } from '@aurodesignsystem/auro-toast/class';
// Register with a custom name if desired
AuroToast.register('custom-toast');

这将创建一个新的自定义元素 <custom-toast> 行为就像 <auro-toast>,允许两者在同一页上共存,而互不干涉.

<auro-button id="customToastBtn">
  Show default notification
</auro-button>
<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
  Default notification with no error type.
</custom-toast>