Day28：Ant Design 裡的 Collapse

2022 iThome 鐵人賽

DAY 28

自我挑戰組

那些年我用 Ant Design 做過的網頁元件系列第 28 篇

14th鐵人賽

Annie

2022-10-13 23:58:24

810 瀏覽

分享至

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


折合元件示意圖(註1：臺北市政府安心樂租網)

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

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

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	可用來在最右側額外添加需要的元素。