[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle

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

react logo


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


內容

參數

1. value
2. themeColor
3. strokeColor – 漸層顏色
4. isClockwise – 順時或是逆時針旋轉
5. size – 預設框大小,基本值給 100


概念

1. 與 Progress Bar 目的相同,展示當前的載入進度
2. 中央的 Circle 可以用 SVG 來做
3. 當我們藉由改變父值的 div 大小時,其內部的 SVG 可以藉由抓取這個值的大小,動態改變。因此會需要用到 useRef(),  和 window.resize 的監聽器
4. 圓形的 StrokeWidth 可以視比例調整,書上是用 0.08。如果是 1 的話,那就完全沒有「環」的效果
5. 圓形的半徑 = ( size – StrokeWidth ) / 2


SVG – Scalable Vector Graphics

1. 必須定義可視區塊大小,也就是 width 和 height,以 pixel 為單位
2. 內建不少的圖形標籤,像是 <circle>
3. <circle> 需要有 cx, cy 和 r 三個值,分別代表圓心座標 x, 圓心座標 y 和 半徑
4. stroke 如同 css 的 border,可以用 css 指定顏色和寬度 (Stroke-width)
5. 藉由圓形時候的 stroke-dasharray <線段長度 間隔長度>,藉由改變線斷長度 & 間隔長度設為一個極大的值,那就可以展現 Progress Circle 的比例了。線段長度的範圍是 0 ~ 圓周長 px。 以半徑為 50 的圓來說,線段長度的最大值是 314.16 左右
6. 起始值為 3 點鐘方向,需要先旋轉 -90 度才能改從 12 點鐘方向開始
7. 逆時針的效果是藉由 css 的水平翻轉來達成

SVG 漸層顏色

格式為以下結構:

1. 你需要有 id 才能在 css 中引用這個值,所以傳入的 stroke 內容可以遍歷一個物件來生成 <stop offset stop-color> </stop>


程式碼

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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件
按讚加入粉絲團

延伸閱讀