手風琴 React 元件

Accordion React 元件代表 Framework7 的 Accordion 元件。

Accordion 元件

包含下列元件

手風琴
AccordionItem
AccordionToggle
AccordionContent

Accordion 屬性

屬性	類型	預設值	說明
<AccordionItem> 屬性
opened	布林值		讓 Accordion 項目開啟

Accordion 事件

事件	說明
<AccordionItem> 事件
accordionBeforeOpen	Accordion 內容開始開啟動畫前會觸發事件。第一個處理函式引數接收 `prevent` 函式，呼叫時會阻止 Accordion 開啟。
accordionOpen	Accordion 內容開始開啟動畫時會觸發事件。
accordionOpened	Accordion 內容完成開啟動畫後會觸發事件。
accordionBeforeClose	Accordion 內容開始關閉動畫前會觸發事件。第一個處理函式引數接收 `prevent` 函式，呼叫時會阻止 Accordion 關閉。
accordionClose	Accordion 內容開始關閉動畫時會觸發事件。
accordionClosed	Accordion 內容完成關閉動畫後會觸發事件。

Accordion 清單

Accordion 清單並非獨立元件，而只是使用 <List>、<ListItem> 和 <AccordionContent> 元件的特殊情況。

在這種情況下，Accordion 事件會在 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>
);

改善此文件

在此頁面

Accordion 元件
Accordion 屬性
Accordion 事件
Accordion 清單
範例