Accordion - 图1

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

PropTypeDefaultDescription
<f7-accordion-item> properties
openedbooleanMakes accordion item opened

Accordion Events

EventDescription
<f7-accordion-item> events
accordion:beforeopenEvent 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:openEvent will be triggered when accordion content starts its opening animation.
accordion:openedEvent will be triggered after accordion content completes its opening animation.
accordion:beforecloseEvent 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:closeEvent will be triggered when accordion content starts its closing animation.
accordion:closedEvent 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

  1. <f7-block-title>List View Accordion</f7-block-title>
  2. <f7-list accordion-list>
  3.   <f7-list-item accordion-item title="Lorem Ipsum">
  4.     <f7-accordion-content>
  5.       <f7-block>
  6.         <p>
  7.           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.
  8.         </p>
  9.       </f7-block>
  10.     </f7-accordion-content>
  11.   </f7-list-item>
  12.   <f7-list-item accordion-item title="Nested List">
  13.     <f7-accordion-content>
  14.       <f7-list>
  15.         <f7-list-item title="Item 1"></f7-list-item>
  16.         <f7-list-item title="Item 2"></f7-list-item>
  17.         <f7-list-item title="Item 3"></f7-list-item>
  18.         <f7-list-item title="Item 4"></f7-list-item>
  19.       </f7-list>
  20.     </f7-accordion-content>
  21.   </f7-list-item>
  22.   <f7-list-item accordion-item title="Integer semper">
  23.     <f7-accordion-content>
  24.       <f7-block>
  25.         <p>
  26.           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.
  27.         </p>
  28.       </f7-block>
  29.     </f7-accordion-content>
  30.   </f7-list-item>
  31. </f7-list>
  33. <f7-block-title>Inset Accordion</f7-block-title>
  34. <f7-list accordion-list inset>
  35.   <f7-list-item accordion-item title="Lorem Ipsum">
  36.     <f7-accordion-content>
  37.       <f7-block>
  38.         <p>
  39.           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.
  40.         </p>
  41.       </f7-block>
  42.     </f7-accordion-content>
  43.   </f7-list-item>
  44.   <f7-list-item accordion-item title="Nested List">
  45.     <f7-accordion-content>
  46.       <f7-list>
  47.         <f7-list-item title="Item 1"></f7-list-item>
  48.         <f7-list-item title="Item 2"></f7-list-item>
  49.         <f7-list-item title="Item 3"></f7-list-item>
  50.         <f7-list-item title="Item 4"></f7-list-item>
  51.       </f7-list>
  52.     </f7-accordion-content>
  53.   </f7-list-item>
  54.   <f7-list-item accordion-item title="Integer semper">
  55.     <f7-accordion-content>
  56.       <f7-block>
  57.         <p>
  58.           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.
  59.         </p>
  60.       </f7-block>
  61.     </f7-accordion-content>
  62.   </f7-list-item>
  63. </f7-list>
  65. <f7-block-title>Opposite Side</f7-block-title>
  66. <f7-list accordion-list accordion-opposite>
  67.   <f7-list-item accordion-item title="Lorem Ipsum">
  68.     <f7-accordion-content>
  69.       <f7-block>
  70.         <p>
  71.           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.
  72.         </p>
  73.       </f7-block>
  74.     </f7-accordion-content>
  75.   </f7-list-item>
  76.   <f7-list-item accordion-item title="Nested List">
  77.     <f7-accordion-content>
  78.       <f7-list>
  79.         <f7-list-item title="Item 1"></f7-list-item>
  80.         <f7-list-item title="Item 2"></f7-list-item>
  81.         <f7-list-item title="Item 3"></f7-list-item>
  82.         <f7-list-item title="Item 4"></f7-list-item>
  83.       </f7-list>
  84.     </f7-accordion-content>
  85.   </f7-list-item>
  86.   <f7-list-item accordion-item title="Integer semper">
  87.     <f7-accordion-content>
  88.       <f7-block>
  89.         <p>
  90.           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.
  91.         </p>
  92.       </f7-block>
  93.     </f7-accordion-content>
  94.   </f7-list-item>
  95. </f7-list>
  97. <f7-block-title>Custom Collapsible</f7-block-title>
  98. <f7-block inner accordion-list>
  99.   <f7-accordion-item v-for="n in 3" :key="n">
  100.     <f7-accordion-toggle><b>Item {{n}}</b></f7-accordion-toggle>
  101.     <f7-accordion-content>Content {{n}}</f7-accordion-content>
  102.   </f7-accordion-item>
  103. </f7-block>

← App

Action Sheet / Actions →