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

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

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

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

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

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

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

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

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

アコーディオンリスト

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

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

例

accordion.jsx
import React from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  Block,
  List,
  ListItem,
  AccordionContent,
} from 'framework7-react';

export default () => (
  <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>
);
このドキュメントを改善する
このページについて