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

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

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

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

Accordion
AccordionItem
AccordionToggle
AccordionContent

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

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

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

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

アコーディオンリスト

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

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

Examples

import React from 'react';
import {
  Page,
  Navbar,
  BlockTitle,
  List,
  ListItem,
  AccordionContent,
  Block,
  AccordionItem,
  AccordionToggle,
} from 'framework7-react';

export default () => (
  
    
  <Page>
    <Navbar title="Accordion" />
    <BlockTitle>List View Accordion</BlockTitle>
    <List 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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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>Inset Accordion</BlockTitle>
    <List accordionList inset>
      <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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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 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>
            <ListItem title="Item 2"></ListItem>
            <ListItem title="Item 3"></ListItem>
            <ListItem title="Item 4"></ListItem>
          </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>Custom Collapsible</BlockTitle>
    <Block inner accordionList>
      {Array.from(Array(3).keys()).map((n) => (
        <AccordionItem key={n}>
          <AccordionToggle>
            <b>Item {n + 1}</b>
          </AccordionToggle>
          <AccordionContent>Content {n + 1}</AccordionContent>
        </AccordionItem>
      ))}
    </Block>
  </Page>
    
  
);