主题

主题组件。
快速设置元素主题。

基础使用

通过 theme 属性设置主题。

<template>
	<pure-theme theme="primary">主题</pure-theme>
	<pure-theme theme="success">主题</pure-theme>
	<pure-theme theme="warning">主题</pure-theme>
	<pure-theme theme="danger">主题</pure-theme>
	<pure-theme theme="info">主题</pure-theme>
</template>

幽灵样式

通过 ghost 属性设置幽灵样式。

<template>
	<pure-theme
		ghost
		theme="primary"
		>主题</pure-theme
	>
	<pure-theme
		ghost
		theme="success"
		>主题</pure-theme
	>
	<pure-theme
		ghost
		theme="warning"
		>主题</pure-theme
	>
	<pure-theme
		ghost
		theme="danger"
		>主题</pure-theme
	>
	<pure-theme
		ghost
		theme="info"
		>主题</pure-theme
	>
</template>

镂空样式

通过 plain 属性设置镂空样式。

<template>
	<pure-theme
		plain
		theme="primary"
		>主题</pure-theme
	>
	<pure-theme
		plain
		theme="success"
		>主题</pure-theme
	>
	<pure-theme
		plain
		theme="warning"
		>主题</pure-theme
	>
	<pure-theme
		plain
		theme="danger"
		>主题</pure-theme
	>
	<pure-theme
		plain
		theme="info"
		>主题</pure-theme
	>
</template>

背景透明度

通过 bgOpacity 属性设置背景透明度。

<template>
	<pure-theme
		theme="primary"
		bgOpacity="0.1"
		>主题</pure-theme
	>
	<pure-theme
		theme="success"
		bgOpacity="0.2"
		>主题</pure-theme
	>
	<pure-theme
		theme="warning"
		bgOpacity="0.3"
		>主题</pure-theme
	>
	<pure-theme
		theme="danger"
		bgOpacity="0.4"
		>主题</pure-theme
	>
	<pure-theme
		theme="info"
		bgOpacity="0.5"
		>主题</pure-theme
	>
</template>

属性

名称	类型	默认值	说明
theme	String		主题
ghost	Boolean	false	幽灵样式
plain	Boolean	false	镂空样式
bgOpacity	[String, Number]		背景透明度，范围 0 到 1

插槽

名称	参数	说明
#default		默认，组件内容

样式变量

名称	说明
--pure-theme-background-opacity	背景透明度
--pure-theme-border	边框样式
--pure-theme-border-width	边框宽度
--pure-theme-border-style	边框类型
--pure-theme-border-color	边框颜色