實務上使用 PrimeVue 作為 Vue UI 元件庫開發,恰逢面臨更版,主要深入瞭解第四版的主要內容及與第三版的不同,並且記錄專案遷移的過程,期望藉由 30 天能更加掌握新版 PrimeVue。
PrimeVue 為一個基於 Vue 開發的 UI 元件庫,包含多樣豐富的 UI 元件,期望在開發上能達到高度複用,並且給予彈性提供開發者客製的空間;並提供主題...
本次使用 vite 來進行 PrimeVue 的說明,安裝步驟如下: 安裝 vite: npm create vite@latest 安裝 prim...
Styled Mode 根據 Design token(設計標籤)規劃三種層級:primitive(原始)、semantic(語意) 以及 component(...
官方文件中說明 Unstyled Mode 包含兩點說明,第一部分為設定 unstyled 為 true,此時所有的元件便不包含任何 CSS 樣式;第二部分為自...
無論在 Styled Mode 或是 Unstyled Mode,皆可自行安裝其他 CSS 通用類別的 Library 到專案中,本篇說明如何安裝及載入 tai...
Pass Through 為 PrimeVue 提供的 props 方法,目的是用來指定到 PrimeVue 元件裡的內層 DOM。 因此在 PrimeVue...
前述提及 Pass Through 的寫法及說明,並提供聲明式寫法可達到相同效果。 本篇說明 Pass Through 的其他相關功能: 全域設定 之前在 Un...
在全域設定中,除主題(theme)及設定外,也有幾個常用的可選設定(options)在此篇介紹 Ripple中文表示為「波紋」,即設定後會加上波紋的動畫,較...
在一般使用 PrimeVue 的元件,需要先進行 import 才可使用,包含全域的載入或各頁面分別載入。 以下為全域載入為例: // main.js impo...
在 Styled Mode 內有提及 Dark Mode 的說明,主要使用 darkModeSelector 屬性進行深色模式設定,若要進行深色模式的切換,須定...