無樣式模式

使用您自己的樣式設定 PrimeVue 的主題。

架構 #

無樣式 這個詞用於定義一種替代的樣式方法，而不是使用設計令牌的預設主題。PrimeVue 提供兩種使用您自己的 CSS 設定組件樣式的選項；混合模式和純模式。

在這兩種選項中，都不包含設計令牌的 CSS 變數和使用它們的 CSS 規則集。主要區別在於，混合模式會保留 DOM 中的選擇器，例如 p-select，而純模式則不會包含它們。無樣式的組件仍然需要在您這邊進行樣式設定，在下一節中，我們將介紹這兩種模式的樣式設定解決方案。

	混合	純
DOM 中的 p-* 選擇器
CSS 規則集
CSS 變數

比較 #

由於樣式化選項（例如樣式化、純和混合）的數量，可能會讓人感到困惑，不知道該選擇哪種樣式方法。我們製作了一個簡短的影片，討論每種方法的優缺點。

總而言之，樣式化模式是一個功能強大的 API，具有對 Figma 的一流支援，因此，當與使用 PrimeVue Figma UI 套件的 UI 設計師合作時，開發流程將會非常高效。當您不喜歡學習預設的主題 API，想要完全控制樣式，或需要 Tailwind CSS 作為應用程式中唯一的樣式設定庫時，無樣式模式會很有幫助。無樣式模式的缺點是它需要應用程式中維護的樣式。

純 #

設定 #

透過在 PrimeVue 安裝期間啟用 unstyled 選項，即可為整個套件啟用純模式。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { unstyled: true });

或者，即使在預設的樣式化模式下，仍然可以透過新增組件的 unstyled 屬性，將特定組件當作無樣式組件使用。


<Button label="Check" icon="pi pi-check" unstyled></Button>

範例 #

這是一個範例，使用 pass through 屬性，使用 Tailwind CSS 設定按鈕組件的樣式。在開始之前，請前往按鈕文件中的 pass through 部分，以深入瞭解組件的內部結構。我們將使用 root、label 和 icon 元素來新增自訂樣式。


<Button
    label="Search"
    icon="pi pi-search"
    unstyled
    pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
    pt:label="text-white font-bold text-lg"
    pt:icon="text-white text-xl"
/>

全域 #

可以在應用程式層級建立全域配置，以避免透過全域 pt 選項重複，以便可以從單一位置共用樣式。特定組件仍然可以使用其自己的 pt 屬性覆寫全域配置。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    unstyled: true,
    pt: {
        button: {
            root: 'bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2',
            label: 'text-white font-bold text-lg',
            icon: 'text-white text-xl'
        },
        panel: {
            header: 'bg-primary text-primary-contrast border-primary',
            content: 'border-primary text-lg text-primary-700',
            title: 'bg-primary text-primary-contrast text-xl',
            toggler: 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
        }
    }
});

Tailwind 預設集 #

Tailwind CSS 非常適合純模式，我們的團隊已啟動全域 pt 配置的參考實作，以設定整個 UI 套件的樣式，稱為 Tailwind CSS 預設集。這個附加專案目前正在尋找社群貢獻者來接管所有權，因為它需要 PrimeTek 大量頻寬來透過 pass-through 維護樣式化模式和無樣式模式預設集。

混合 #

設定 #

透過將 theme 選項設定為 none，即可為整個套件啟用混合模式。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { theme: 'none' });

範例 #

在混合模式下，不包含預設的 CSS 規則和變數，但是 CSS 選擇器會保留在 DOM 中，以便您可以使用它們來建立自己的規則。


.p-button {
    background: #a855f7;
    border: 0 none !important;
    color: white;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 24px;
}

.p-button:enabled:hover {
    background: #a855f7;
}

.p-button:enabled:active {
    background: #9333ea;
}

Tailwind 版本 #

PrimeTek 提供基於 @apply 指令並支援 IntelliSense 的整個 PrimeVue UI 套件的 Tailwind CSS 版本。請造訪 PrimeVue 的 Tailwind 版本，以取得文件、示範和其他資源。