Badge 徽标
Feedback
展示型
简介
Badge 组件是一个小巧且用途广泛的视觉元素，用于标记、分类或突出显示内容元数据。它通常用于展示状态（例如"成功"或"待定"）、标签或数字计数。
通过 Page Builder CMS，内容作者可以快速配置徽章变体、尺寸和配色方案，以完美契合其布局规范。
用法
您可以使用视觉样式、自定义颜色和响应式尺寸来自定义徽章的外观。
样式变体
该组件支持多种视觉展示样式，有助于建立视觉层级。
{
"type": "badge",
"text": "New Feature",
"variant": "solid",
"colorPalette": "blue"
}
Solid
Subtle
Surface
Outline
配色方案
从丰富的主题强调色中选择，以传达语义含义。
{
"type": "badge",
"text": "Error Detected",
"variant": "solid",
"colorPalette": "red"
}
Success
Error
Warning
Special
Draft
尺寸选项
将徽章从紧凑的元数据胶囊缩放到更大的标注标签。
{
"type": "badge",
"text": "Large Label",
"size": "lg",
"colorPalette": "blue",
"variant": "subtle"
}
Small
Medium
Large
Extra Large
属性
在 Page Builder 架构（content/pages/*.json）中添加 badge 区块时，可使用以下配置参数：
| Parameter | Type | Default | Description |
|---|---|---|---|
type | String | - | 区块标识符。必须设置为 "badge"。 |
text | String | - | 渲染在徽章内部的文本标签内容。 |
variant | Select | "subtle" | 视觉样式处理。选项："solid"、"subtle"、"surface"、"outline"。 |
colorPalette | Select | "green" | 语义主题颜色强调。选项："blue"、"green"、"red"、"purple"、"orange"、"amber"、"cyan"、"slate"、"gray"。 |
size | Select | "md" | 徽章的物理尺寸。选项："sm"、"md"、"lg"、"xl"、"2xl"。 |
class | String | - | 直接应用于徽章的自定义 CSS 类覆盖。 |