アコーディオンVueコンポーネント

Accordion Vueコンポーネントは、Framework7のアコーディオンコンポーネントを表しています。

アコーディオンコンポーネント

以下のコンポーネントが含まれています。

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

アコーディオンのプロパティ

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

アコーディオンのイベント

Event	Description
<f7-accordion-item> events
accordion:beforeopen	イベントは、アコーディオンコンテンツが開くアニメーションを開始する直前にトリガーされます。ハンドラの第1引数には、呼ばれたときにアコーディオンが開かないようにするための `prevent` 関数が渡されます。
accordion:open	イベントは、アコーディオンコンテンツのオープニングアニメーションが始まるときに発生します。
accordion:opened	イベントは、アコーディオンコンテンツのオープニングアニメーションが完了した後に発生します。
accordion:beforeclose	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始する直前にトリガーされます。ハンドラの第1引数には、呼ばれたときにアコーディオンが閉じないようにするための `prevent` 関数が渡されます。
accordion:close	イベントは、アコーディオンコンテンツが閉じるアニメーションを開始するときにトリガーされます。
accordion:closed	イベントは、アコーディオンコンテンツが閉じるアニメーションを完了した後に発生します。

アコーディオンリスト

アコーディオンリストは独立したコンポーネントではなく、<f7-list>、<f7-list-item>、<f7-accordion-content>コンポーネントを使用した特殊なケースです。

この場合、アコーディオンイベントは f7-list-item で発生します。

Examples

<template>
<f7-page>
  <f7-navbar title="Accordion"></f7-navbar>
  <f7-block-title>List View Accordion</f7-block-title>
  <f7-list 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>Inset Accordion</f7-block-title>
  <f7-list accordion-list inset>
    <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 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-block-title>Custom Collapsible</f7-block-title>
  <f7-block inner accordion-list>
    <f7-accordion-item v-for="n in 3" :key="n">
      <f7-accordion-toggle
        ><b>Item {{ n }}</b></f7-accordion-toggle
      >
      <f7-accordion-content>Content {{ n }}</f7-accordion-content>
    </f7-accordion-item>
  </f7-block>
</f7-page>
</template>