今天，我們正式開始建置專案，這是登山的第一步！ Well begun is half done.好的開始是成功的一半! 主要架構前端框架：Vue.js語言：TypeScriptUI 套件：Prim...
前言大家好，我是 阿米提斯 目前專職寫 Vue 前端工程師。 這次因為工作的關係，讓我有機會接觸到 PrimeVue UI套件，主要的任務是將專案中原本使用的 PrimeNG 元件庫 轉換成 Prim...
在一個專案當中，標單數入元件通常會有統一的外觀風格，讓整個系統看起來更一致、整齊。<AtomicFormField> 是用來渲染表單欄位的元件。它是 <input>、<...
Toast 是一個提供使用者操作回饋的元件，通常會在幾秒鐘後自動消失。這類元件可以用來通知使用者新增或修改資料的成功或失敗，或者刪除訊息的成功或失敗。有時候還會提供像是 UNDO 按鈕，讓使用者可以...
對話框（Dialog）是一種常見的網頁元件，通常用來顯示重要的資訊或要求使用者進行某些操作。Dialog 在顯示時會暫停其他頁面內容的操作，強制使用者集中注意力於 Dialog 的內容。Dialog...
如果要希望在不換頁的前提上塞入更多畫面無法容納的資訊，Modal 經常會是網頁設計師的首選之一。如果要從 UI 樣式上細分，又可以延伸出像是對話框（Dialog）、抽屜（Drawer）等不同變化以因...
Tooltip 是一個用來顯示、說明目標元件相關訊息的元件，通常用於滑鼠停留於元件或透過鍵盤聚焦時顯示。像是在 LINE Design System 中提到，他們會使用 Tooltip 顯示特定功能...
表格（Table）是一種專門用來展示結構化資料的元件，它可以幫助使用者以易於掃描的方式瀏覽資料，使他們能夠快速辨別資料中的模式並進行分析。 除了展示資料，表格元件還可以包含以下功能： 對應視覺...
進度條（Progress）是一個用於展示任務完成進度的元件。它廣泛應用於需要顯示工作、任務或操作完成度的地方，例如大型檔案上傳時，我們可以將上傳的進度回饋給使用者知道。這樣比起乾等，在感覺上給使用者...
分隔線（Divider）元件在 UI/UX 設計中扮演重要的輔助角色，用於在視覺上區分不同的內容區域，增強版面結構的清晰度和可讀性。 在實際網頁開發中，大多數時候我們會選用 CSS Class 來達...