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
Demo
