赞助商成为赞助商

Accordion Vue 组件

Accordion Vue 组件表示 Framework7 的 Accordion 组件。

Accordion 组件

包括以下组件

Accordion 属性

属性类型默认值描述
<f7-accordion-item> 属性
opened布尔值使手风琴项打开

Accordion 事件

事件描述
<f7-accordion-item> 事件
accordion:beforeopen此事件将在手风琴内容开始其打开动画之前触发。第一个处理程序参数接收 prevent 函数，当调用时将防止手风琴打开。
accordion:open手风琴内容开始其打开动画时将触发此事件。
accordion:opened当手风琴内容完成其打开动画后，将触发事件。
accordion:beforeclose当手风琴内容在其开始关闭动画之前，将触发事件。第一个处理程序参数接收一个prevent函数，当调用该函数时，将阻止手风琴关闭。
accordion:close当手风琴内容开始其关闭动画时，将触发事件。
accordion:closed当手风琴内容完成其关闭动画后，将触发事件。

手风琴列表

手风琴列表不是一个单独的组件，而只是使用 <f7-list>、<f7-list-item> 和 <f7-accordion-content> 组件的一种特殊情况。

在这种情况下，手风琴事件将在 f7-list-item 上触发。

示例

accordion.vue
<template>
  <f7-page>
    <f7-navbar title="Accordion"></f7-navbar>

    <f7-block-title>List View Accordion</f7-block-title>
    <f7-list strong outline-ios dividers-ios inset-md accordion-list>
      <f7-list-item accordion-item title="Lorem Ipsum">
        <f7-accordion-content>
          <f7-block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </f7-block>
        </f7-accordion-content>
      </f7-list-item>
      <f7-list-item accordion-item title="Nested List">
        <f7-accordion-content>
          <f7-list>
            <f7-list-item title="Item 1"></f7-list-item>
            <f7-list-item title="Item 2"></f7-list-item>
            <f7-list-item title="Item 3"></f7-list-item>
            <f7-list-item title="Item 4"></f7-list-item>
          </f7-list>
        </f7-accordion-content>
      </f7-list-item>
      <f7-list-item accordion-item title="Integer semper">
        <f7-accordion-content>
          <f7-block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </f7-block>
        </f7-accordion-content>
      </f7-list-item>
    </f7-list>

    <f7-block-title>Opposite Side</f7-block-title>
    <f7-list strong outline-ios dividers-ios inset-md accordion-list accordion-opposite>
      <f7-list-item accordion-item title="Lorem Ipsum">
        <f7-accordion-content>
          <f7-block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </f7-block>
        </f7-accordion-content>
      </f7-list-item>
      <f7-list-item accordion-item title="Nested List">
        <f7-accordion-content>
          <f7-list>
            <f7-list-item title="Item 1"></f7-list-item>
            <f7-list-item title="Item 2"></f7-list-item>
            <f7-list-item title="Item 3"></f7-list-item>
            <f7-list-item title="Item 4"></f7-list-item>
          </f7-list>
        </f7-accordion-content>
      </f7-list-item>
      <f7-list-item accordion-item title="Integer semper">
        <f7-accordion-content>
          <f7-block>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec
              commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper
              arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel
              congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget
              ipsum.
            </p>
          </f7-block>
        </f7-accordion-content>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7BlockTitle,
  f7Block,
  f7AccordionContent,
  f7List,
  f7ListItem,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7BlockTitle,
    f7Block,
    f7AccordionContent,
    f7List,
    f7ListItem,
  },
};
</script>
改进此文档
在此页面