主题

主题使用说明。

说明

在 Pure Ui 中有一些组件支持设置主题，例如 pure-button 组件，可以设置内置主题，也可以设置扩展主题。

内置主题

Pure Ui 默认提供了一组内置主题：

primary：主要，用于主要操作按钮、链接等。
success：成功，用于表示成功操作或状态。
warning：警告，用于表示警告或错误情况。
danger：危险，用于表示危险操作或状态。
info：信息，用于表示一般信息或提示。

通过将 theme 属性的值设置为主题名称，即可使用内置主题，例如：

vue

<template>
	<pure-button theme="primary" text="主要按钮"></pure-button>
	<pure-button theme="success" text="成功按钮"></pure-button>
	<pure-button theme="warning" text="警告按钮"></pure-button>
	<pure-button theme="danger" text="危险按钮"></pure-button>
	<pure-button theme="info" text="信息按钮"></pure-button>
</template>

扩展主题

如果内置主题不能满足需求，也可以自定义主题。自定义主题的方式有两种：

遵循内置主题的命名方式命名扩展主题，格式为 --pure-theme-<theme-name>，例如 --pure-theme-haha、--pure-theme-hoho。

使用此种方式扩展的主题，也可以直接通过将 theme 属性的值设置为主题名称来使用，例如：

vue

<template>
	<pure-button theme="haha" text="扩展主题"></pure-button>
	<pure-button theme="hoho" text="扩展主题"></pure-button>
</template>

<style scoped>
page {
	/* 按照内置主题的命名格式扩展主题 */
	--pure-theme-haha: #ff0000;
	--pure-theme-hoho: #00ff00;
}
</style>

完全自定义主题名称，例如 --my-custom-theme-haha、--my-custom-theme-hoho。

使用此种方式扩展的主题，需要在组件中通过 theme 属性指定主题变量的完整名称，例如：

vue

<template>
	<pure-button theme="--my-custom-theme-haha" text="扩展主题"></pure-button>
	<pure-button theme="--my-custom-theme-hoho" text="扩展主题"></pure-button>
</template>

<style scoped>
page {
	/* 不按照内置主题的命名格式扩展主题 */
	--my-custom-theme-haha: #ff0000;
	--my-custom-theme-hoho: #00ff00;
}
</style>

主题 ​

说明 ​

内置主题 ​

扩展主题 ​

主题

说明

内置主题

扩展主题