近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。
[ Repo ]:https://github.com/andy922200/practice-storybook-react
內容
參數
isLoading – 是否載入中
indicator – 自定義符號
children – 自定義內容 (當作一個帶有等待狀態的容器)
概念
它是一個載入狀態元件,緩解使用者等待的焦慮。一般而言會可以自定義符號,或是當做一個容器,讓它有載入狀態。
載入的旋轉效果,由外部傳入的 Spinner 內容自行定義為佳,這樣擴充性比較好
程式碼
相關文章
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈 [筆記] 哎呀!不小心刻了一套 React UI 元件庫 30 – 佈署發佈](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
★全文分享★ [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
![[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select](https://smlpoints.com/wp-content/uploads/notes-react-hooks-ch1-ch2-1.jpeg)
近期為了熟悉元件 Component 的客製化,便
