无样式模式

使用您自己的样式为 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>

示例 #

这是一个使用传递属性使用 Tailwind CSS 设置按钮组件样式的示例。在开始之前，请前往按钮文档中的传递部分，以了解有关组件内部结构的更多信息。我们将使用根、标签和图标元素添加自定义样式。


<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配置的参考实现，以设置名为 Tailwind CSS 预设的整个 UI 套件的样式。此附加项目目前正在寻找社区贡献者来接管所有权，因为它需要 PrimeTek 大量的带宽来通过传递维护样式模式和无样式模式预设。

混合 #

设置 #

通过将主题选项设置为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 基于具有 IntelliSense 支持的@apply指令提供了整个 PrimeVue UI 套件的 Tailwind CSS 版本。请访问PrimeVue 的 Tailwind 版本，以获取文档、演示和其他资源。