当前位置:主页 > JavsScript库 > 菜单 / 导航 >

平滑嵌套的手风琴组件 - Vanilla-Accordions
栏目分类:菜单 / 导航   发布日期:2021-08-19   浏览次数:

一个小巧、简单、快速的原生 JavaScript 库,用于使用自定义元素创建平滑、嵌套的手风琴 Web 组件。

使用:

1. 将 Vanilla-Accordions 导入到您的文档中。

<link rel=”stylesheet” href=”build/accordion.min.css” />
<script src=”./build/AccordionElement.min.js” type=”module”></script>

2 <accordion-element />、在页面中添加组件,在data-title属性中定义折叠标题。而已。

<accordion-element data-title="Basic Accordion - Click Me!">
  <h2>A Basic Accordion</h2>
</accordion-element>

3.确定是否在页面加载时打开手风琴。

<accordion-element data-title="Basic Accordion - Click Me!" data-open>
  <h2>A Basic Accordion</h2>
</accordion-element>

4. 要创建一个手风琴组,只需将所有 <accordion-element />组件放入<accordion-fan />

<accordion-fan>
  <accordion-element data-title="Accordion One">
    <h2>Accordion 1</h2>
  </accordion-element>
  <accordion-element data-title="Accordion Two">
    <h2>Accordion 2</h2>
  </accordion-element>
  <accordion-element data-title="Accordion Three">
    <h2>Accordion 3</h2>
  </accordion-element>
</accordion-fan>

5. 使用data-group属性对您的手风琴进行分组。对嵌套的手风琴很有用。

<accordion-element data-title="Nested Accordions Here">
  <accordion-element data-group="nested" data-title="Nested Accordion 1">
    <p>Nested Accordion 1</p>
  </accordion-element>
  <accordion-element data-group="nested" data-title="Nested Accordion 2">
    <p>Nested Accordion 2</p>
  </accordion-element>
  <accordion-element data-group="nested" data-title="Nested Accordion 3">
    <p>Nested Accordion 3</p>
  </accordion-element>
</accordion-element>


官方网站:https://github.com/ploiu/Vanilla-JS-Accordions

相关热词: Vanilla-Acco手风琴

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库