赞助商成为赞助商

手风琴 React 组件

手风琴 React 组件表示 Framework7 的 手风琴 组件。

手风琴组件

包括以下组件

手风琴属性

属性类型默认描述
<AccordionItem> 属性
打开布尔使手风琴条目打开

手风琴事件

事件描述
<AccordionItem> 事件
手风琴将要打开此事件将在手风琴的内容开始其打开动画之前触发。第一个处理程序参数接收 prevent 函数，当调用时将阻止手风琴打开。
手风琴打开当手风琴开始其打开动画时将触发事件。
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>
);
改进此文档
在此页面