鐵人檔案
component library 為前端開發解決了什麼問題？又有什麼缺點？
自製一套 component library 好像沒有想像中的那麼困難，但有必要嗎？
這 30 天會依序記錄自製前端元件的心得，並判斷這一切到底值不值得 (*°ω°*ฅ)*
因為 component library 提供的元件很少會直接符合設計稿的需求，外觀的客製化基本上不可避。 於是我開始好奇，比起閱讀官方文件來了解如何對元件進行...
需求故事：希望有一個容器元件來管理各級 breakpoint 下的 RWD 效果（置中內容、限制 max-width 以及根據 breakpoint 調整 pa...
做出一個固定在畫面上方的導覽列沒什麼難度，故本日目標是重現 MUI 的 Elevate App bar 與 Hide App bar 這兩種導覽列。 成品...
回收再利用昨天做好的 hook useScrollPercentage 來跟普通的 ProgressBar 元件進行融合召喚，你會得到一個顯示畫面捲動百分比的進...
想讓 hooks 能夠對應 window 以外的捲動對象，今天來做點加工處理。 成品 useElementIsScrollDown useElement...
其實就是把 margin 跟 padding 打包成元件的 props 方便使用者快速定義元件間距。簡單暴力。 成品 原始碼（可試玩） 開發思路 想還原 ma...
對付大量等距間隔元件的排版專武，簡單好寫，值得擁有。搭配昨天做好的醬汁 SpaceWrapper 更是讓滋味變得妙不可言。 成品 原始碼（可試玩） 開發思路...
在只使用原生 hr 元件的條件限制下，盡量還原出 MUI Divider 能做到的效果。 成品 展示 原始碼 開發思路 顏色 透過 props.o...
display: block object-fit: cover 還有 <figcaption /> 這些就是被選來製造好看 img 的必要（？）成...
來重現 MUI 的按鈕（包含波紋漣漪效果）吧。 不過因為實作動畫效果的原始碼比預期的長，故實心、外框與純文字按鈕的 CSS 實作內容放到明天來示範。 成品 展...
