iT邦幫忙

2022 iThome 鐵人賽

DAY 28
1
自我挑戰組

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

Day28:Ant Design 裡的 Collapse

  • 分享至 

  • xImage
  •  

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

https://ithelp.ithome.com.tw/upload/images/20221013/20140920OubiwCepQu.png
折合元件示意圖(註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 可用來在最右側額外添加需要的元素。

三、 今天的元件練習

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

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


上一篇
Day27:Ant Design 裡的 Steps
下一篇
Day29:Ant Design 裡的 Calendar
系列文
那些年我用 Ant Design 做過的網頁元件30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言