Badge 徽标

显示一个徽标，或看起来像徽标的组件。

变体

SBadge({ text: 'Badge' })
SBadge({ text: 'Secondary', variant: 'secondary' })
SBadge({ text: 'Destructive', variant: 'destructive' })
SBadge({ text: 'Outline', variant: 'outline' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

状态色

success | warning | info，实心或柔和（着色）样式。

SBadge({ text: 'Success', variant: 'success' })
SBadge({ text: 'Warning', variant: 'warning' })
SBadge({ text: 'Info', variant: 'info' })
// soft: tinted background, coloured text
SBadge({ text: 'Default', soft: true })
SBadge({ text: 'Success', variant: 'success', soft: true })
SBadge({ text: 'Warning', variant: 'warning', soft: true })
SBadge({ text: 'Info', variant: 'info', soft: true })
SBadge({ text: 'Destructive', variant: 'destructive', soft: true })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

带图标

前置 / 后置 lucide 图标，或在插槽中放任意内容。

SBadge({ text: 'Verified', variant: 'secondary', icon: 'circle-check' })
SBadge({ text: '8', variant: 'destructive' })
SBadge({ text: 'Link', variant: 'outline', iconRight: 'arrow-right' })
SBadge({ variant: 'outline' }) {
  SSpinner({ sizing: 12 })
  Text('Syncing').fontSize(12)
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

尺寸与形状

sizing：'sm' | 'default' | 'lg'；pill：全圆角。

SBadge({ text: 'Small', sizing: 'sm' })
SBadge({ text: 'Default' })
SBadge({ text: 'Large', sizing: 'lg' })
SBadge({ text: 'Pill', pill: true, variant: 'secondary' })
SBadge({ text: 'Large pill', pill: true, sizing: 'lg', variant: 'outline', icon: 'star' })

网页近似预览，真机效果以 HarmonyOS 渲染为准。

圆点与计数

状态圆点、纯圆点，以及带上限的通知计数。

SBadge({ text: 'Online', variant: 'success', soft: true, dot: true, pill: true })
SBadge({ text: 'Away', variant: 'warning', soft: true, dot: true, pill: true })
SBadge({ text: 'Offline', variant: 'outline', dot: true, dotColor: theme.colors.mutedForeground, pill: true })
SBadge({ dot: true, variant: 'destructive' })      // bare 8vp dot
SBadge({ count: 8, variant: 'destructive' })
SBadge({ count: 128, variant: 'destructive' })      // "99+"
SBadge({ count: 1200, max: 999 })                   // "999+"
// over an icon
Stack({ alignContent: Alignment.TopEnd }) {
  SIcon({ name: 'bell', sizing: 24 })
  SBadge({ count: 3, variant: 'destructive', sizing: 'sm' }).translate({ x: 8, y: -6 })
}

网页近似预览，真机效果以 HarmonyOS 渲染为准。

可移除

removable 会添加一个 ×，点击触发 onRemove（适合标签、筛选条件）。

@Local tags: string[] = ['react', 'vue', 'svelte', 'arkts'];

ForEach(this.tags, (t: string) => {
  SBadge({ text: t, variant: 'secondary', removable: true,
    onRemove: () => this.tags = this.tags.filter((x: string) => x !== t) })
}, (t: string) => t)

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SBadge

shadcn-vue 的 Badge：inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-xs font-medium。

变体：default | secondary | destructive | outline | success | warning | info，每种都可以加上 soft（带色调）。sizing 取 sm | default | lg；pill（圆角 rounded-full）；dot（前导状态点——没有文字时则为单独的 8vp 圆点）；removable（尾部 ×，触发 onRemove）；count / max 用于通知数字（如「99+」；为 0 时隐藏，除非设置了 showZero）。

属性	类型	默认值	说明
text	ResourceStr | undefined	undefined
variant	BadgeVariant BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'info'	'default'
soft	boolean	false	带色调的背景配彩色文字，而不是实心填充。
sizing	BadgeSize BadgeSize = 'sm' | 'default' | 'lg'	'default'
pill	boolean	false	完全圆角（rounded-full）。计数徽标始终为胶囊形。
dot	boolean	false	前导状态点；没有文字或计数时，徽标就只是这个圆点。
dotColor	ResourceColor | undefined	undefined	覆盖圆点的颜色。
icon	string | undefined	undefined	前导 lucide 图标名称。
iconRight	string | undefined	undefined	尾部 lucide 图标名称。
count	number | undefined	undefined	数字徽标（优先于 text）。
max	number	99	超过 max 时显示为「max+」。0 表示不设上限。
showZero	boolean	false	计数徽标为 0 时仍然显示。
removable	boolean	false	尾部的 ×，点击触发 onRemove（用于标签、筛选器）。
modifier	AttributeModifier<RowAttribute>	new SparkNoopModifier<RowAttribute>()
tokens	BadgeTokens	{}	实例级令牌覆盖（实例 → 主题 --badge-* → 配方），参见 {@link BadgeTokens}。

事件	类型	默认值	说明
onRemove	() => void	() => { }

插槽: 子组件（尾随闭包）