お好みのCSSライブラリでPrimeVueをスタイリングします。
スタイルなしモードには2つの解決策があります。最初の部分は、コンポーネント固有のスタイルクラスをDOMから削除することです。「unstyled」設定が有効になっている場合、コンポーネントはCSSセレクターを含まず、コア機能は引き続き使用できます。たとえば、デフォルトのスタイル付きモードでは、セレクトコンポーネントはルート要素に`.p-select`スタイルクラスを追加し、対応するスタイルのCSSを含みます。スタイルなしの設定では、このスタイルクラスはルート要素に追加されず、CSSはページに含まれません。
2番目の部分はカスタムスタイリングです。コンポーネントはスタイルなしで透過的に表示されます。パススループロップ機能が重要です。これは、スタイルなしモードでテーマを作成するためのグローバル設定もサポートしています。実際、今後のTailwindテーマは基本的にカスタム`pt`設定です。
PrimeVueのインストール時に`unstyled`を`true`に設定することで、スイート全体でスタイルなしモードを有効にできます。
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>
Tailwind CSSを使用したスタイルを提供するサンプルを以下に示します。始める前に、パススルーセクションボタンのドキュメントを参照して、コンポーネントの内部について詳しく学びましょう。`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, {
pt: {
button: {
root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-4 rounded border-0 flex gap-2' },
label: 'text-white font-bold text-xl', // OR { class: 'text-white font-bold text-xl' }
icon: 'text-white text-2xl'
},
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 CSSはスタイルなしモードに最適です。クラス最高の統合については、専用のTailwind CSSドキュメントをご覧ください。