折叠 Svelte 组件

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

手风琴组件

包含以下组件：

Accordion
AccordionItem
AccordionToggle
AccordionContent

手风琴属性

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

手风琴事件

事件	描述
<AccordionItem> 事件
accordionBeforeOpen	事件将在手风琴内容开始打开动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴打开。`prevent`accordionOpen
accordionOpen	事件将在手风琴内容开始打开动画时触发。
accordionOpened	事件将在手风琴内容完成打开动画后触发。
accordionBeforeClose	事件将在手风琴内容开始关闭动画之前触发。第一个处理器参数接收一个函数，调用时将阻止手风琴关闭。`prevent`accordionClose
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>

改进此文档

在本页上

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