iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

30 天擁有一套自己手刻的 React UI 元件庫 系列

雖然說市面上厲害且受歡迎的 React UI 元件庫很多,且工程師實務上也希望能遵守「不要重複造輪子」原則,但在學習的過程當中,找一些好的輪子並學著如何製造他,對於這個輪子也能夠有更深入的認識。

本次 30 天系列想挑戰解析並手刻 React UI 元件庫,包含元件介紹、解析市面上的 UI 元件庫、自己從無到有的元件設計思路與實踐,以及到目前為止自己手刻元件的經驗分享。適合的讀者設定在剛學會 React 但開發經驗還不足的朋友。

希望透過挑戰個題目,讓自己對於 React UI 元件有更深入的認識,也同時紀錄自己在這個階段的開發經驗與思維。

鐵人鍊成 | 共 30 篇文章 | 63 人訂閱 訂閱系列文 RSS系列文 團隊董事長清潔隊
DAY 21

【Day21】導航元件 - Drawer

元件介紹 Drawer 抽屜元件,由螢幕邊緣滑出的浮動面版,常見的應用是作為導航用途,例如 Navigation drawers。 參考設計 & 屬性分...

2021-10-04 ‧ 由 Taiming 分享
DAY 22

【Day22】導航元件 - Tabs

元件介紹 Tabs 是一個選項卡切換元件,能夠在同一層級的內容組別當中導航、切換。此元件由兩個部分構成,一個是讓使用者點擊的導覽頁籤 Tab,一個是對應的內容...

2021-10-05 ‧ 由 Taiming 分享
DAY 23

【Day23】導航元件 - Pagination

元件介紹 Pagination 是一個分頁元件,當頁面中一次要載入過多的資料時,載入及渲染將會花費更多的時間,因此,考慮分批載入資料的時候,需要分頁元件來幫助我...

2021-10-06 ‧ 由 Taiming 分享
DAY 24

【Day24】反饋元件 - Spin

元件介紹 Spin 是一個載入狀態元件,當頁面正在處理非同步行為,或需要讓用戶等待的作業時,用來顯示以緩解用戶等待的焦慮。 參考設計 & 屬性分析 一個...

2021-10-07 ‧ 由 Taiming 分享
DAY 25

【Day25】反饋元件 - Skeleton

元件介紹 Skeleton 是一個骨架載入元件(Skeleton Screen Loading),跟 Spin 不同的是,Skeleton 幫助我們在頁面載入完...

2021-10-08 ‧ 由 Taiming 分享
DAY 26

【Day26】反饋元件 - Progress bar

元件介紹 Progress bar 是能夠展示當前進度的進度條元件。當一個操作需要顯示目前百分比,或是需要較長時間等待運行的時候,能夠使用這樣的元件提示用戶目前...

2021-10-09 ‧ 由 Taiming 分享
DAY 27

【Day27】反饋元件 - Progress circle

元件介紹 Progress circle 跟上一篇 Progress bar 一樣是能夠展示當前進度的元件。只是在外觀上面以圓形替代長條形,好處是在寬度不夠的排...

2021-10-10 ‧ 由 Taiming 分享
DAY 28

【Day28】反饋元件 - Modal

元件介紹 Modal 元件為彈出相關元件提供了重要的基礎建設,如 Dialog、Popover、Drawer...等等。 參考設計 & 屬性分析 各家元...

2021-10-11 ‧ 由 Taiming 分享
DAY 29

【Day29】反饋元件 - Toast

元件介紹 Toast 可以提供使用者操作的反饋訊息。包含一般資訊、操作成功、操作失敗、警告訊息等。預設為在頂部置中顯示並自動消失,是一種不打斷用戶操作的輕量級提...

2021-10-12 ‧ 由 Taiming 分享
DAY 30

【Day30】挑戰回顧 & 鐵人練成心得分享

挑戰最後一日的題目真的讓我想了很久,倒底該放什麼元件來壓軸才好?要寫一個綜合演練,把前面的元件都拿出來大亂鬥一番,搞出一個看起來很厲害的應用嗎?還是說我應該老老...

2021-10-13 ‧ 由 Taiming 分享