Accordion Vue Component

Accordion Vue component represents Framework7's Accordion component.

Accordion Components

There are following components included:

f7-accordion
f7-accordion-item
f7-accordion-toggle
f7-accordion-content

Accordion Properties

Prop	Type	Default	Description
<f7-accordion-item> properties
opened	boolean		Makes accordion item opened

Accordion Events

Event	Description
<f7-accordion-item> events
accordion:beforeopen	Event will be triggered right before accordion content starts its opening animation. First handler argument receives `prevent` function that will prevent accordion from opening when called.
accordion:open	Event will be triggered when accordion content starts its opening animation.
accordion:opened	Event will be triggered after accordion content completes its opening animation.
accordion:beforeclose	Event will be triggered right before accordion content starts its closing animation. First handler argument receives `prevent` function that will prevent accordion from closing when called.
accordion:close	Event will be triggered when accordion content starts its closing animation.
accordion:closed	Event will be triggered after accordion content completes its closing animation.

Accordion List

Accordion List is not a separate component, but just a particular case of using <f7-list>, <f7-list-item> and <f7-accordion-content> components.

In this case accordion events will be fired on f7-list-item.

Examples

accordion.vue

<template>
  <f7-page>
    <f7-navbar title="Accordion" back-link></f7-navbar>

    <f7-block-title>List View Accordion</f7-block-title>
    <f7-list strong dividers-ios inset 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 dividers-ios inset 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>

Improve this Doc

On this page

Accordion Components
Accordion Properties
Accordion Events
Accordion List
Examples