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

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

react logo


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


內容

概念

1. 可以是單純色塊
2. 若要加上動畫的話,簡易的話就是 opacity 改變而成的閃爍,或是光暈移動 (用漸層光暈移動,然後超過用 overflow: hidden 隱藏)
3. Skeleton 本身就如同不同形式的基本積木,你可以在外部將其包裝、排列、調整大小尺寸


程式碼

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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Toast 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容1. Toast 是
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Modal 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容需要引入 P
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Bar 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數isLoading
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數pag
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數themeColor – 主題配色
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。[ Repo ]:https://github.com/andy922200/practice-
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。[ Repo ]:https://github.com/andy922
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 19 – Dropdown
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Dropdown 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容由於 Drop
按讚加入粉絲團

延伸閱讀