徽标

HTML 自定义元素,用于提醒注意额外的界面信息.

建议的使用和版本控制

每个Auro组件有两个重要部分. 这个 类 和自定义元素。 该类被导出,然后用作定义Web组件的一部分. 当导入此组件时, 如 安装 区域中,该类别被导入 auro-badge 自定义元素自动定义.

为了防止与正在装入组件的其他情况发生版本冲突,建议使用我们 AuroBadge.register('name') 方法并用一个独特的名称通过.

import { AuroBadge } from '@aurodesignsystem/auro-badge';
AuroBadge.register('custom-badge');

这将创建一个新的自定义元素,您可以在您的 HTML 中使用,该元素的功能与 auro-badge 键.

使用大小写

这个 auro-badge 使用实例包括:

• 提醒注意界面特定领域的补充资料
• 向具体行动或状态的使用者提供咨询意见

安装

$ npm i @aurodesignsystem/auro-badge

定义项目中的依赖性

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

import "@aurodesignsystem/auro-badge";

使用 CDN 软件

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

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

基本示例

<auro-badge>Nonstop</auro-badge>

自定义版本管理组件注册

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

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

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

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

// Import the class only
import { AuroBadge } from '@aurodesignsystem/auro-badge/class';

// Register with a custom name if desired
AuroBadge.register('custom-badge');

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

<custom-badge variant="warning">Salutations World!</custom-badge>