鐵人檔案
我們來嘗試維護一套自己的 UI Library 吧！
也許你不一定認同我的看法，但我認為，身為一個優秀的前端工程師，即使沒有自己手刻一套 UI Library 的打算，也應該要了解每個元件應該怎麼實現，應該涵蓋哪些功能，有哪些細節是我們需要特別留意的。花點時間深入理解每個元件的運作原理，對於如何善用 UI Library 也會有更深刻的體悟。
身為前端工程師，元件管理是不論選用哪一個前端框架的開發人員都需要面臨的挑戰。能不能妥善規劃與管理元件，很大程度上決定了專案未來的走向。好的元件規劃可以讓開發更...
連結（Link）在網站開發中是不可或缺的存在。為了讓我們更好的實現 SPA（Single Page Application）網站，我們通常會使用 Vue Ro...
按鈕在網頁中是最常見的元件之一，這個元件通常在使用者點擊後會觸發程式上的操作，可能是關閉或打開 Modal，也可能是送出表單，又或是刪除某些重要資料等等。 在...
麵包屑導覽列（Breadcrumb）是一種常見的導航元件，其名稱源自格林童話《糖果屋》，故事中兩兄妹用麵包屑標記回家的路徑。在網站中，麵包屑導覽列起到了類似的...
在 ERP 系統的列表頁面或部落格文章的總覽頁面，如果我們想要一次顯示大量資料，不僅會耗費大量的網路傳輸流量，也會使瀏覽器渲染畫面變得緩慢費時。為了解決這個問...
頁籤（Tabs）是一個很常見的 UI 元件，它可以讓使用者在內容上有關聯但屬於不同類別的資料或畫面之間切換。例如，我們可以用它來切換「娛樂」、「科技」、「股市...
彈出視窗（Popover，浮動視窗）通常隨著使用者的互動而顯示，它浮動於互動元素的周圍，主要用來提供附加資訊或操作，而不會改變頁面佈局。 <Atomic...
Dropdown 是一個用於顯示和選擇選項的 UI 元件，通常由一個觸發按鈕或文字組成，當使用者點擊該按鈕或文字時，會展開一個選單列表，列出多個選項供使用者選...
在專案中，你會如何設定 Scrollbar 的樣式呢？ 當我們想要自定義網頁的 Scrollbar 時，最常見的方式之一就是用 CSS 改寫原生的 Scrol...
看這個元件的名稱不難發現，它的靈感來自手風琴（Accordion）這個樂器。在網頁裡面，Accordion 算是一個常見的設計。它是一個垂直堆疊的標題列表，當...
