鐵人檔案
component library 為前端開發解決了什麼問題？又有什麼缺點？
自製一套 component library 好像沒有想像中的那麼困難，但有必要嗎？
這 30 天會依序記錄自製前端元件的心得，並判斷這一切到底值不值得 (*°ω°*ฅ)*
為昨天做好的 ButtonBase 補上一些樣式設定，再透過 props.variant 控制按鈕外型，以及 props.{start | end}Icon 來...
為了讓開發更加方便，在本次鐵人賽中會使用套件 @svgr/webpack 來搭配 create-react-app 操作 .svg 檔案。 優點是同一個 .sv...
看了看 MUI 的 Upload button 是使用 props.component 來提示元件應渲染成 HTMLLabelElement，今天就來實踐他 (...
來條列一下對話框元件的需求吧： 行為邏輯：使用者通常會透過點擊一個按鈕來開啟對話框；另外，使用者點擊對話框背景、或是按下鍵盤上的 esc 鍵時，要能關閉對話框...
來幫昨天做好的骨架補上一些 CSS 樣式與動畫效果。 進一步組合 position: absolute 與 transform: translate(...)...
用途：將元件掛載到指定節點。除了昨天的 Dialog 家族外，接下來的 Toast 與 ToolTip 也都有使用到這個元件。 理由：在無法保證親代元件是否會有...
以為「當滑鼠移動到 Toast 元件上時要暫停倒數」會很複雜，實際上的解決方式卻異常簡單。 成品 原始碼展示 開發思路 倒數進度條 首先透過 props.cou...
成品 原始碼展示 開發思路 如果希望畫面上有複數個 Toast 同時存在，最大的問題便是如何調整每一個 Toast 元件在畫面上的位置。在截稿前想的到的方式是：...
成品 原始碼展示 開發思路 原理十分簡單：透過資料的 id 來控制顯示內容，再根據被點擊的標籤的順序（index）來計算標籤下方提示線的顯示位置。 先來看看 T...
原理：「點擊 AccordionTitle 部位後，顯示下方的 AccordionBody 內容」。 不過為了還原 MUI Accordion 的結構，實作時使...
