装入器
<auro-loader> 是一个 HTML 自定义元素 用于插图动画加载器.
使用大小写
这个 <auro-loader> 在开发人员可能需要说明其用户等待时间的情况下,应当使用元素.
安装
$ npm i @aurodesignsystem/auro-loader
定义项目中的依赖性
确定每个项目中的依赖性 <auro-loader> 组件.
import "@aurodesignsystem/auro-loader";
使用 CDN 软件
在项目无法处理JS资产的情况下,有预处理后的资产可供使用. IE11等后遗症浏览器不再被支持.
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-loader@latest/+esm"></script>
基本示例
<auro-loader ringworm></auro-loader>
<auro-loader orbit></auro-loader>
<auro-loader pulse></auro-loader>
<auro-loader laser></auro-loader>
自定义版本管理组件注册
每个Auro组件有两个关键部分: 类 和自定义元素定义. 类定义了组件的行为,而自定义元素则以特定的名称注册,以便用于HTML.
当您安装您所描述的组件时 Install 页面中,该类会自动导入,组件会在全球注册.
然而,如果需要将同一组件的多个版本加载到一页上(例如,当两个工程依赖于不同的版本时),可以手动在自定义元素名下注册类来避免冲突.
您可以仅导入组件类并使用 register(name) 唯一名称的方法 :
// Import the class only
import { AuroLoader } from '@aurodesignsystem/auro-loader/class';
// Register with a custom name if desired
AuroLoader.register('custom-loader');
这将创建一个新的自定义元素 <custom-loader> 行为就像 <auro-loader>,允许两者在同一页上共存,而互不干涉.
<custom-loader ringworm></custom-loader>
<custom-loader orbit></custom-loader>
<custom-loader pulse></custom-loader>
<custom-loader laser></custom-loader>