手风琴

<auro-accordion> 是一个 HTML 自定义元素 用于通过点击较小的触发元件来勾勒大内容部分的能见度.

使用大小写

这个 <auro-accordion> 在用户可能:

• 基于头条触发的隐藏/显示长子内容
• 只在内容长度过长而分散到特定经验时,才用于页面内容

安装

$ npm i @aurodesignsystem/auro-accordion

定义项目中的依赖性

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

import "@aurodesignsystem/auro-accordion";

使用 CDN 软件

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

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

基本示例

<auro-accordion>
  <span slot="trigger">Trigger</span>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </p>
  <p>
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </p>
  <p>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </p>
  <p>
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</auro-accordion>

自定义版本管理组件注册

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

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

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

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

// Import the class only
import { AuroAccordion, AuroAccordionGroup } from '@aurodesignsystem/auro-accordion/class';
​
// Register with a custom name if desired
AuroAccordion.register('custom-accordion');
AuroAccordionGroup.register('custom-accordion-group');

这将创建一个新的自定义元素 <custom-accordion> 财务报告和审定财务报表 <custom-accordion-group> 行为就像 <auro-accordion> 财务报告和审定财务报表 <auro-accordion-group>,允许两组组件在同一页上共存,而不会相互干扰.

<custom-accordion-group>
  <custom-accordion>
    <span slot="trigger">Trigger</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </custom-accordion>
  <custom-accordion>
    <span slot="trigger">Trigger</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </custom-accordion>
  <custom-accordion>
    <span slot="trigger">Trigger</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
    <p>
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </custom-accordion>
</custom-accordion-group>