过量

这个 <auro-popover> 元素附着在另一个元素上并显示在悬浮上。 它使用 波普尔.js (英语) 库来定位自己相对于触发元素的位置,并支持诸如 top 财务报告和审定财务报表 bottom。 。 。 .

使用大小写

这个 auro-popover 在用户可能:

• 与一项内容互动,以澄清提供的内容
• 为图标图像提供定义
• 当需要帮助文本时

安装

$ npm i @aurodesignsystem/auro-popover

定义项目中的依赖性

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

import "@aurodesignsystem/auro-popover";

使用 CDN 软件

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

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

基本示例

<auro-popover>
  Top popover content!
  <auro-button slot="trigger">Popover Test</auro-button>
</auro-popover>

自定义版本管理组件注册

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

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

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

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

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

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

<!-- The slot=trigger attribute is bound directly to the auro-button element  -->
<custom-popover>
  Top popover content!
  <auro-button slot="trigger">Popover Test</auro-button>
</custom-popover>
<!-- Using the placement=bottom attribute -->
<custom-popover placement="bottom">
  Popover content!
  <auro-button slot="trigger">Popover Test</auro-button>
</custom-popover>