今天要介紹的元件，個人覺得比較少見，但先前也有專案嚐試做過這樣的效果，所以也特別拉一篇文章出來跟大家分享。Collapse 在英文中有折疊的意思，較適合用在簡單的標題與內容呈現，可將標題放在要折合的地方，內容則放在被折合的區塊裡，讓頁面在視覺上較為簡潔分明。

https://ithelp.ithome.com.tw/upload/images/20221013/20140920OubiwCepQu.png
折合元件示意圖(註1：臺北市政府安心樂租網)

一、 最基本的使用方式：引用與呼叫它

  Collapse 是最外層，裡面包覆數個點選後可觸發折疊效果的 Panel 區塊 ，Panel 有面板的意思，其屬性中的 header 是標題，內部則用來顯示附屬內容的子層。使用上可以搭配迴圈 map 出每一個 panel 的 header 和內容，算是非常容易理解。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { Collapse } from 'antd';
const { Panel } = Collapse;

const App = () => (
  <div>
    <Collapse onChange={onChange}>
      <Panel header="折合標題 1" key="1">
        <p>折合區塊裡的內容</p>
      </Panel>
      <Panel header="折合標題 2" key="2">
        <p>折合區塊裡的內容</p>
      </Panel>
      <Panel header="折合標題 3" key="3">
        <p>折合區塊裡的內容</p>
      </Panel>
    </Collapse>
  <div/>
);

export default App;

二、ANTD 的 Collapse 可添加的屬性

  下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

屬性名稱 可以使用的值 說明
defaultActiveKey 字串 或 數字 預設要開啟面板的panel key值
expandIcon (panelProps) => ReactNode 用來自定義header左側那個折合的箭頭樣式。
expandIconPosition start 或 end 設定header那個折合的箭頭要位於最左側或最右側。
bordered true 或 false 若設定為false，可是「最外框」的框線隱藏，預設為 true。
ghost true 或 false 若設定為true，可使「所有」框線隱藏與背景透明，算是ANTD預設的一種樣式選擇。預設為false。
onChange () => {} 定義折合面板時要觸發的額外事件。例如用來call後端已毒刺數的api還滿好用的。

三、ANTD 的 Collapse.Panel 可添加的屬性

  因為面板的屬性很少，所以這邊就全部都介紹，也可以點此連結去看更多官方 api 文件。

屬性名稱 可以使用的值 說明
key 字串 或 數字 面板的唯一值。
header ReactNode 面板的標題。
showArrow true 或 false 設定是否顯示折合的箭頭。預設為true。
collapsible header 或 disabled 設定該面板是否可以被折合，若為header代表可以(預設)、disabled則為禁止折合，且鼠標移到該面板標題時會自動呈現禁止符號。
extra ReactNode 可用來在最右側額外添加需要的元素。

三、 今天的元件練習

  看完上面簡單的介紹後，若大家有興趣也可以到線上編輯器裡玩玩看唷！

註1：臺北市政府安心樂租網 常見問題