Pixelium Design

中文

English

中文

English

Appearance

标签 Tag ​

一般用来展示一些东西的特性（不是指 bug）。

主题 ​

和按钮一样，标签有几种不同颜色的主题：'primary'（默认）、'success'、'warning'、'danger'、'info'、'sakura'。

Primary
Success
Warning
Danger
Info
Sakura
<template>
	<px-space>
		<px-tag>Primary</px-tag>
		<px-tag theme="success">Success</px-tag>
		<px-tag theme="warning">Warning</px-tag>
		<px-tag theme="danger">Danger</px-tag>
		<px-tag theme="info">Info</px-tag>
		<px-tag theme="sakura">Sakura</px-tag>
	</px-space>
</template>

标签变体 ​

标签也有几种不同的样式变体：'primary'（默认）、'plain'、'outline'。

Primary
Success
Warning
Danger
Info
Sakura
Primary
Success
Warning
Danger
Info
Sakura
Primary
Success
Warning
Danger
Info
Sakura
<template>
	<px-space direction="vertical">
		<px-space>
			<px-tag variant="plain">Primary</px-tag>
			<px-tag variant="plain" theme="success">Success</px-tag>
			<px-tag variant="plain" theme="warning">Warning</px-tag>
			<px-tag variant="plain" theme="danger">Danger</px-tag>
			<px-tag variant="plain" theme="info">Info</px-tag>
			<px-tag variant="plain" theme="sakura">Sakura</px-tag>
		</px-space>
		<px-space>
			<px-tag>Primary</px-tag>
			<px-tag theme="success">Success</px-tag>
			<px-tag theme="warning">Warning</px-tag>
			<px-tag theme="danger">Danger</px-tag>
			<px-tag theme="info">Info</px-tag>
			<px-tag theme="sakura">Sakura</px-tag>
		</px-space>
		<px-space>
			<px-tag variant="outline">Primary</px-tag>
			<px-tag variant="outline" theme="success">Success</px-tag>
			<px-tag variant="outline" theme="warning">Warning</px-tag>
			<px-tag variant="outline" theme="danger">Danger</px-tag>
			<px-tag variant="outline" theme="info">Info</px-tag>
			<px-tag variant="outline" theme="sakura">Sakura</px-tag>
		</px-space>
	</px-space>
</template>

标签尺寸 ​

标签是有大小变化的。

Small
Medium
Large
<template>
	<px-space>
		<px-tag size="small">Small</px-tag>
		<px-tag theme="danger">Medium</px-tag>
		<px-tag size="large" theme="sakura">Large</px-tag>
	</px-space>
</template>

圆角边框 ​

标签是长圆角的。

精力和技术力不太充足，自定义圆角还有需要优化的地方，但整体不影响使用。

Default
Round
[16, 8, 16, 4]
<template>
	<px-space>
		<px-tag>Default</px-tag>
		<px-tag theme="success" shape="round">Round</px-tag>
		<px-tag theme="warning" :border-radius="[16, 8, 20, 4]">[16, 8, 16, 4]</px-tag>
	</px-space>
</template>

关闭按钮 ​

标签的关闭按钮也是通的。

Primary
Success
Warning
Danger
Info
Sakura
<template>
	<px-space>
		<px-tag closable @close="closeHandler">Primary</px-tag>
		<px-tag closable @close="closeHandler" theme="success">Success</px-tag>
		<px-tag closable @close="closeHandler" theme="warning">Warning</px-tag>
		<px-tag closable @close="closeHandler" theme="danger">Danger</px-tag>
		<px-tag closable @close="closeHandler" theme="info">Info</px-tag>
		<px-tag closable @close="closeHandler" theme="sakura">Sakura</px-tag>
	</px-space>
</template>
<script setup lang="ts">
const closeHandler = () => {
	$message.info('Tag close')
}
</script>

禁用状态 ​

禁用状态的标签关闭按钮是不通的。

Primary
Success
Warning
Danger
Info
Sakura
<template>
	<px-space>
		<px-tag disabled closable @close="closeHandler">Primary</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="success">Success</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="warning">Warning</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="danger">Danger</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="info">Info</px-tag>
		<px-tag disabled closable @close="closeHandler" theme="sakura">Sakura</px-tag>
	</px-space>
</template>
<script setup lang="ts">
const closeHandler = () => {
	$message.info('Tag close')
}
</script>

自定义颜色 ​

自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)'字符串和 3、4、6、8位长度的十六位数字表示。

#409EFF
#FAE13C
#E956AE
#909399
<template>
	<px-space>
		<px-tag color="#409EFF">#409EFF</px-tag>
		<px-tag color="#FAE13C">#FAE13C</px-tag>
		<px-tag color="#E956AE">#E956AE</px-tag>
		<px-tag color="#909399">#909399</px-tag>
	</px-space>
</template>

API ​

TagProps ​

属性类型可选默认值描述版本
borderRadiusNumberOrPercentage | NumberOrPercentage[]是圆角半径，优先级高于 shape，与 CSS border-radius 行为一致；单值或长度为 1 的数组 → 四角同时生效；长度为 2 的数组 → [左上 & 右下, 右上 & 左下]；长度为 3 的数组 → [左上, 右上 & 左下, 右下]；长度为 4 的数组 → 按顺时针顺序依次作用于四角。0.0.2
shape'default' | 'round'是'default'标签形状。0.0.2
size'medium' | 'large' | 'small'是'medium'标签尺寸。0.0.2
disabledboolean是false是否禁用。0.0.2
variant'primary' | 'plain' | 'outline'是'primary'标签样式变体。0.0.2
theme'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'info'是'primary'标签主题。0.0.2
colorstring是自定义主色，内部基于此生成完整色板，该色板优先级高于 theme 提供的预设色版。支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。0.0.2
closableboolean是标签可关闭。0.0.2

TagEvents ​

事件参数描述版本
closee: MouseEvent关闭事件。0.0.2

TagSlots ​

插槽参数描述版本
default标签内容。0.0.2

NumberOrPercentage ​

ts
export type NumberOrPercentage = number | `${number}%`