角标 Badge

一个用于显示计数、状态或提醒的小角标，附加到其他元素上（如按钮或图标）。

基础用法

将 Badge 附加到其他元素上以显示小角标。

8

<template>
	<px-space>
		<px-badge value="8">
			<px-button>Inbox</px-button>
			<template #icon>
				<IconEnvelope></IconEnvelope>
			</template>
		</px-badge>
	</px-space>
</template>

<script setup lang="ts">
import { IconEnvelope } from '@pixelium/web-vue/icon-hn/es'
</script>

最大值

max 设置角标的最大值，超过时以 ${max}+ 展示。

5

99+

```vue
<template>
	<px-space>
		<px-badge value="5">
			<px-avatar></px-avatar>
		</px-badge>
		<px-badge :value="120" :max="99">
			<px-avatar></px-avatar>
		</px-badge>
	</px-space>
</template>

```

点模式

通过设置 dot 为 true 只显示小圆点。

<template>
	<px-space>
		<px-badge dot>
			<px-button>Messages</px-button>
		</px-badge>
		<px-badge dot>
			<IconBell :size="24"></IconBell>
		</px-badge>
	</px-space>
</template>
<script setup lang="ts">
import { IconBell } from '@pixelium/web-vue/icon-hn/es'
</script>

主题

Badge 支持主题：'primary'、'sakura'、'success'、'warning'、'danger'、'notice'。

1

1

4

5

1

4

<template>
	<px-space>
		<px-badge value="1" theme="primary">
			<px-button>Primary</px-button>
		</px-badge>
		<px-badge value="1" theme="notice">
			<px-button theme="notice">Notice</px-button>
		</px-badge>
		<px-badge value="4" theme="success">
			<px-button theme="success">Success</px-button>
		</px-badge>
		<px-badge value="5" theme="warning">
			<px-button theme="warning">Warning</px-button>
		</px-badge>
		<px-badge value="1" theme="danger">
			<px-button theme="danger">Danger</px-button>
		</px-badge>
		<px-badge value="4" theme="sakura">
			<px-button theme="sakura">Sakura</px-button>
		</px-badge>
		<px-badge theme="sakura" dot>
			<px-button theme="sakura">Dot</px-button>
		</px-badge>
	</px-space>
</template>

角标偏移

通过 offset 调整角标位置。支持数字、数组 [x: number, y: number] 或对象 { x: number, y: number }。

?

!

<template>
	<px-space>
		<px-badge value="?" :offset="[-36, 0]" theme="warning">
			<px-button theme="warning" shape="circle">?</px-button>
		</px-badge>
		<px-badge value="!" theme="success">
			<px-button theme="success" shape="square">!</px-button>
		</px-badge>
	</px-space>
</template>

自定义颜色

通过 color 设置角标背景色；通过 borderColor 设置角标边框颜色。

99

<template>
	<px-badge value="99" color="#6b7280" borderColor="#441">
		<px-button>Custom</px-button>
	</px-badge>
</template>

显示和隐藏

通过 visible 属性控制角标显示与否。

5

<template>
	<px-space>
		<px-badge :visible="show" value="5">
			<px-button theme="info">Toggle</px-button>
		</px-badge>
		<px-button @click="show = !show">Toggle Badge</px-button>
	</px-space>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>

内容插槽

当 dot 为 false 时，可使用 content 插槽自定义角标内容。

HOT

* HOT

<template>
	<px-space>
		<px-badge :value="value">
			<px-button theme="info">Default</px-button>
		</px-badge>

		<px-badge :value="value">
			<template #content>
				<span>* {{ value }}</span>
			</template>
			<px-button theme="info">Custom</px-button>
		</px-badge>
	</px-space>
</template>

<script setup>
import { ref } from 'vue'
const value = ref('HOT')
</script>

API

BadgeProps

属性	类型	可选	默认值	描述	版本
value	number | string	是	''	角标显示的数值或字符串。	0.1.0
max	number	是		数值上限，超出显示为 ${max}+。	0.1.0
dot	boolean	是	false	是否以小圆点显示。	0.1.0
theme	'primary' | 'sakura' | 'success' | 'warning' | 'danger' | 'notice'	是	'danger'	角标的主题。	0.1.0
visible	boolean	是	true	是否可见。	0.1.0
offset	number | [number, number] | { x?: number; y?: number }	是	0	角标标记的偏移。	0.1.0
color	string	是		自定义背景色，支持类似 CSS 的 'rgb(r, g, b)' 和 'rgba(r, g, b, a)' 字符串和 3、4、6、8 位长度的十六位数字表示。	0.1.0
borderColor	string	是		自定义边框颜色。	0.1.0
contentProps	RestAttrs	是		透传给角标内容容器 DOM 的额外属性。	0.1.0
pollSizeChange	boolean	是	false	开启轮询组件尺寸变化，可能会影响性能，常用于被容器元素影响尺寸，进而 canvas 绘制异常的情况。	0.1.0

BadgeSlots

插槽	参数	描述	版本
default		包裹的附着元素插槽。	0.1.0
content	value: string | string	角标内容插槽（在 dot 为 false 时生效）。	0.1.0