贊助商成為贊助商

手風琴 Svelte 元件

手風琴 Svelte 元件代表 Framework7 的 手風琴 元件。

手風琴元件

包含下列元件

手風琴屬性

屬性類型預設值說明
<AccordionItem> 屬性
開啟布林值開啟手風琴項目

手風琴事件

事件說明
<AccordionItem> 事件
手風琴開啟前手風琴內容開始開啟動畫前將觸發事件。第一個處理函數引數會收到 prevent 函數，當呼叫時會防止手風琴開啟。
手風琴開啟手風琴內容開始開啟動畫時將觸發事件。
手風琴已開啟手風琴內容完成開啟動畫後將觸發事件。
手風琴關閉前手風琴內容開始關閉動畫前將觸發事件。第一個處理函數引數會收到 prevent 函數，當呼叫時會防止手風琴關閉。
手風琴關閉手風琴內容開始關閉動畫時將觸發事件。
手風琴已關閉手風琴內容完成關閉動畫後將觸發事件。

手風琴清單

手風琴清單不是獨立的元件，只是使用 <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>
改善此文件
在此頁面