📜  Framework7手风琴

📅  最后修改于: 2021-01-02 05:51:58             🧑  作者: Mango

Framework7手风琴/可折叠

Framework7 Accordion是图形控件元素,显示为堆叠的项目列表。您可以展开或折叠手风琴以显示与该手风琴关联的内容。

手风琴布局

查看手风琴布局的外观:

...
...
...
...
...
...
...

可折叠布局

当使用单个单独的可折叠元素时,您需要省略可折叠列表包装元素。

查看可折叠布局的结构:


    
...
...
...
...

手风琴列表视图

如果要设置手风琴列表视图,请使用“ item-link”元素而不是“ accordion-toggle”。

Framework7中用于手风琴的类

以下是Framework7中用于手风琴的类的列表:

Index Class Description
1) accordion-list It is a class which contains a group of accordion items list. It is optional.
2) accordion-item It is a required class for single accordion item.
3) accordion-item-toggle It is a required class used to expand accordion item content.
4) accordion-item-content It is a required class used for hidden accordion item content.
5) accordion-item-expanded It is a single expanded accordion item.

适用于手风琴的JavaScript API

JavaScript API是用于以编程方式打开和关闭手风琴的方法。有3种JavaScript API方法:

  • myApp.accordionOpen(item):用于打开手风琴。
  • myApp.accordionClose(item):用于关闭手风琴。
  • myApp.accordionToggle(item):用于切换手风琴。

手风琴活动

在Framework7中为“手风琴”列出了4个事件:

Index Event Description
1) open This event is fired when you open an animation.
2) opened This event is fired when the opening of an animation is completed.
3) close This event is fired when you close an animation.
4) closed This event is fired when the closing of an animation is completed.



   
      
      
      
      Accordion
      
      
   
   
      

输出: