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

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

---

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

---

內容

1. Badge 通常會針對最大展示值進行限制，以免造成版面紊亂或是破版
2. 當 Badge 的數字為 0 時，可以留個選擇性，讓使用者決定是否顯示
3. 傳入參數

1. placement – Badge 的相對位置
2. badgeContent – 圖示右上角的 Badge 內容，通常是一個數字
3. max – 顯示最大值
4. showZero – 是否顯示 0

children – 要顯示的內容，通常會是一個圖案 ( 像是郵件圖示 )

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] 程式必修課！離散數學與演算法 – 142
• [筆記] 程式必修課！離散數學與演算法 – 141
• [筆記] 程式必修課！離散數學與演算法 – 140
• [筆記] 程式必修課！離散數學與演算法 – 138
• [筆記] Nuxt2 + Buefy0.X + Axios 升級至 Nuxt4 + Buefy1.X + ofetch