Collapse 折疊面板

把內容分段收合,讓長頁面可掃視。使用 Element Plus 的 el-collapse。

設計準則

• 用於次要、可跳過的內容(進階設定、FAQ);使用者必看的內容不要收合
• 預設展開最重要的一段,不要全部收起來讓頁面像目錄
• 標題要能獨立看懂(「發送條件」而不是「更多」)
• 手風琴模式(accordion,一次只開一段)用於段落彼此獨立的 FAQ;設定頁讓使用者自由多開

基本用法

loading

手風琴模式

loading

自訂面板標題

title slot 可以加圖標、狀態標籤;標題仍要維持一行、可獨立看懂:

loading

自訂圖示

icon slot 依展開狀態換圖示(＋/－ 適合 FAQ 的「展開看答案」語意);全站同一場景用同一套:

loading

圖示位置

expand-icon-position="left" 把箭頭移到左側,層級感較強、類似檔案樹;預設右側較安靜:

loading

Do / Don't

✅ Do	❌ Don't
次要內容才收合	必填設定藏在折疊裡
預設展開第一段	全部收合像目錄
標題獨立可懂	標題寫「更多」「其他」

給工程師

完整 API 見 Element Plus Collapse 文件。 本站規範優先於 EP 文件中的視覺建議。