鐵人檔案
我們來嘗試維護一套自己的 UI Library 吧！
也許你不一定認同我的看法，但我認為，身為一個優秀的前端工程師，即使沒有自己手刻一套 UI Library 的打算，也應該要了解每個元件應該怎麼實現，應該涵蓋哪些功能，有哪些細節是我們需要特別留意的。花點時間深入理解每個元件的運作原理，對於如何善用 UI Library 也會有更深刻的體悟。
Avatar 元件是一個很常見且簡單的元件，像是在電商平台、論壇、個人部落格或是 ERP 系統中經常會看到。它很簡單，所以初期在規劃網站時經常漏掉將它編入元件...
Badge 元件是一種簡單但功能強大的資料展示元件，通常以小圓形的形式出現，依附於其他 UI 元件上。Badge 元件主要用於通知提醒，顯示未讀訊息、通知數量...
Chip 是一種小巧且功能多樣的元件，經常應用於描述內容的關鍵字來標記、分類或組織資訊。除了顯示資料的功能外，也偶爾會被應用於選擇、過濾的 UI 功能上。 元...
分隔線（Divider）元件在 UI/UX 設計中扮是個重要的輔助角色，用於在視覺上區分不同的內容區域，增強版面結構的清晰度和可讀性。 在實際網頁開發中，大多...
進度條（Progress）是一個用於展示任務完成進度的元件。它廣泛應用於需要顯示工作、任務或操作完成度的地方，例如大型檔案上傳時，我們可以將上傳的進度回饋給使...
表格（Table）是一種專門用來展示結構化資料的元件，它可以幫助使用者以易於掃描的方式瀏覽資料，使他們能夠快速辨別資料中的模式並進行分析。 除了展示資料，表...
Tooltip 是一個用來顯示、說明目標元件相關訊息的元件，通常用於滑鼠停留於元件或透過鍵盤聚焦時顯示。像是在 LINE Design System 中提到，...
如果要希望在不換頁的前提上塞入更多畫面無法容納的資訊，Modal 經常會是網頁設計師的首選之一。如果要從 UI 樣式上細分，又可以延伸出像是對話框（Dialo...
對話框（Dialog）是一種常見的網頁元件，通常用來顯示重要的資訊或要求使用者進行某些操作。Dialog 在顯示時會暫停其他頁面內容的操作，強制使用者集中注意...
Toast 是一個提供使用者操作回饋的元件，通常會在幾秒鐘後自動消失。這類元件可以用來通知使用者新增或修改資料的成功或失敗，或者刪除訊息的成功或失敗。有時候還...
