スポンサースポンサーになる

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

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

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

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

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

プロパティタイプデフォルト説明
<f7-accordion-item> プロパティ
openedbooleanアコーディオンアイテムを開いた状態にします

アコーディオンイベント

イベント説明
<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>
このドキュメントを改善する
このページについて