[筆記] 哎呀！不小心刻了一套 React UI 元件庫 14 – Card

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Card。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

1. 卡片樣式的形態非常多。建議可將卡片的內部的元素分區塊，以小塊積木的概念方便組合
2. 可能會出現的小區塊有：封面媒體(圖片)、卡片內容、卡片底部頁尾
3. 卡片大區塊的排版可以先行定義，像是 vertical, horizontal…等

---

參數

1. variant
2. cover – 這一塊以 ReactNode 的方式傳入，可以極大客製化的內容
3. footer – 這一塊以 ReactNode 的方式傳入，可以極大客製化的內容
4. children – Card Body 主要顯示的內容，你可以將此抽出一個區塊如 <Meta>，或是直接傳入內容

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/c5bb404a0448f0d67dcf1e0706279295272fc355

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 21
• [筆記] Vue3 實作類似 Checkbox 的 Radio 元件
• [筆記] 程式必修課！離散數學與演算法 – 16
• [筆記] 程式必修課！離散數學與演算法 – 15
• [筆記] FullCalendar V6 eventsSet 觸發邏輯