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

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

---

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

---

內容

概念

1. 進度條的組成可分為 <Trail> 和 <Track> 兩個元素。<Trail> 為底；<Track> 則是實際上顏色變化、動畫…等發生的地方
2. 數值雖可以跳脫 0 ~ 100 % 的範圍，但 <Track> 必須限制下來，以免圖案怪怪的
3. <Track> 留下清晰的 class 名稱，讓自定義的顏色樣式(像是漸層)可以傳入
4. 光暈移動動畫可以用偽元素 :before 製作，超出的話用 overflow:hidden 藏起來

---

程式碼

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

---

相關文章

按讚加入粉絲團

延伸閱讀

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