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

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

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

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

アコーディオン
AccordionItem
AccordionToggle
AccordionContent

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

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

アコーディオンイベント

イベント	説明
<AccordionItem> イベント
accordionBeforeOpen	アコーディオンコンテンツが開くアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数は、呼び出されたときにアコーディオンが開くのを防ぐ`prevent`関数を受け取ります。
accordionOpen	アコーディオンコンテンツが開くアニメーションを開始するときにトリガーされるイベント。
accordionOpened	アコーディオンコンテンツが開くアニメーションを完了した後にトリガーされるイベント。
accordionBeforeClose	アコーディオンコンテンツが閉じるアニメーションを開始する直前にトリガーされるイベント。最初のハンドラー引数は、呼び出されたときにアコーディオンが閉じるのを防ぐ`prevent`関数を受け取ります。
accordionClose	アコーディオンコンテンツが閉じるアニメーションを開始するときにトリガーされるイベント。
accordionClosed	アコーディオンコンテンツが閉じるアニメーションを完了した後にトリガーされるイベント。

アコーディオンリスト

アコーディオンリストは独立したコンポーネントではなく、<List>、<ListItem>、および<AccordionContent>コンポーネントを使用した特定のケースです。

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

例

accordion.svelte

<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    Block,
    List,
    ListItem,
    AccordionContent,
  } from 'framework7-svelte';
</script>

<Page>
  <Navbar title="Accordion" />

  <BlockTitle>List View Accordion</BlockTitle>
  <List strong outlineIos dividersIos insetMd accordionList>
    <ListItem accordionItem title="Lorem Ipsum">
      <AccordionContent>
        <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>
        </Block>
      </AccordionContent>
    </ListItem>
    <ListItem accordionItem title="Nested List">
      <AccordionContent>
        <List>
          <ListItem title="Item 1" />
          <ListItem title="Item 2" />
          <ListItem title="Item 3" />
          <ListItem title="Item 4" />
        </List>
      </AccordionContent>
    </ListItem>
    <ListItem accordionItem title="Integer semper">
      <AccordionContent>
        <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>
        </Block>
      </AccordionContent>
    </ListItem>
  </List>

  <BlockTitle>Opposite Side</BlockTitle>
  <List strong outlineIos dividersIos insetMd accordionList accordionOpposite>
    <ListItem accordionItem title="Lorem Ipsum">
      <AccordionContent>
        <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>
        </Block>
      </AccordionContent>
    </ListItem>
    <ListItem accordionItem title="Nested List">
      <AccordionContent>
        <List>
          <ListItem title="Item 1" />
          <ListItem title="Item 2" />
          <ListItem title="Item 3" />
          <ListItem title="Item 4" />
        </List>
      </AccordionContent>
    </ListItem>
    <ListItem accordionItem title="Integer semper">
      <AccordionContent>
        <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>
        </Block>
      </AccordionContent>
    </ListItem>
  </List>
</Page>

このドキュメントを改善する

このページについて

アコーディオンコンポーネント
アコーディオンプロパティ
アコーディオンイベント
アコーディオンリスト
例