绘图器

这个 <auro-drawer> 要素是一个侵入性的互动要素,而不是被动的。 在有要求时,该要素最好被使用,使用户了解所显示的内容,将重点从主要内容转移到抽屉内容上.

该元素还支持一种模式(阻塞)状态,用户必须同该元素的内容互动才能继续. 不允许被动辞退内容. 此状态的用户必须添加一个触发器,让用户超越此内容.

使用大小写

这个 auro-drawer 在用户可能:

• 在做别的事或回去之前 被催促采取行动
• 提示查看内容并选择关闭

安装

$ npm i @aurodesignsystem/auro-drawer

定义项目中的依赖性

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

import "@aurodesignsystem/auro-drawer";

使用 CDN 软件

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

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

基本示例

<div>
  <auro-button id="openBasic">Open default drawer</auro-button>
</div>
<auro-drawer id="defaultDrawer">
  <span slot="header">Default Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button secondary id="closeBasic">Close</auro-button>
  </div>
</auro-drawer>

自定义版本管理组件注册

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

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

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

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

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

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

<div>
  <auro-button id="openCustom">Open custom drawer</auro-button>
</div>
<custom-drawer id="customDrawer">
  <span slot="header">Custom Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button secondary id="closeCustom">Close</auro-button>
  </div>
</custom-drawer>