Accordion

介紹使用 Accordion 手風琴元件

Accordion 通常中文會翻譯成「手風琴」效果，在畫面上的呈現就好像是演奏手風琴時，手部拉開再合攏的效果。Accordion 經常應用在例如常見問答的頁面，因內文太豐富，所以先利用標題吸引使用者點擊展開閱讀，避免網頁內容太長導致使用者失去耐性以及不好跳躍閱讀。

常見的另一個名詞為 Collapse。

基本使用

<bpa-accordion>
  <bpa-accordion-item>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

預設展開內容

<bpa-accordion>
  <bpa-accordion-item open>
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item open>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

客製化標題

<bpa-accordion>
  <bpa-accordion-item title="Custom title text">
    Content 1
  </bpa-accordion-item>
  <bpa-accordion-item>
    <template v-slot:title>
      <mark>Custom title Html</mark>
    </template>
    Content 2
  </bpa-accordion-item>
</bpa-accordion>

屬性

Name	Value	Type	Default	Required	Note
id		String	random
title	{ text } or template	String
open		Boolean	false		展開 bpa-accordion-item

Demo