手风琴 Svelte 组件

手风琴 Svelte 组件代表 Framework7 的手风琴组件。

手风琴组件

包含以下组件：

手风琴
AccordionItem
AccordionToggle
AccordionContent

手风琴属性

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

手风琴事件

事件	描述
<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>

改进此文档

在本页

手风琴组件
手风琴属性
手风琴事件
手风琴列表
示例