SxBadge (徽标)
用于突出显示关键信息、数值提醒或状态。对齐 Microsoft Fluent UI Blazor Badge (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
- 通知计数与状态提示
- 按钮或图标上的小型标记
- 列表中紧凑提示
约束说明
Content 为空时显示为圆点样式。DismissIcon 显示关闭按钮，但并不自动移除徽标，需要业务侧处理。
API
Parameters (参数)
| 状态 |
参数名 |
类型 |
默认值 |
描述 |
| Implemented |
Content |
string? |
null |
徽标文本内容。 |
| Implemented |
Show |
bool |
true |
是否显示徽标。 |
| Implemented |
Appearance |
BadgeAppearance |
Neutral |
视觉风格：Neutral, Accent, Lightweight, Danger, Success 等。 |
| Implemented |
Circular |
bool |
false |
是否呈现为圆形。 |
| Implemented |
BackgroundColor |
string? |
null |
覆盖背景颜色 (CSS)。 |
| Implemented |
Color |
string? |
null |
覆盖文字颜色 (CSS)。 |
| Implemented |
Fill |
string? |
null |
定义填充颜色变量。 |
| Implemented |
Width |
string? |
null |
物理宽度。 |
| Implemented |
Height |
string? |
null |
物理高度。 |
| Implemented |
DismissIcon |
string? |
null |
允许关闭时显示的图标。 |
| Implemented |
DismissTitle |
string? |
null |
关闭按钮的 Tooltip。 |
| Implemented |
ChildContent |
RenderFragment? |
null |
徽标承载内容（如按钮/图标）。 |
| Implemented |
Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented |
Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented |
Style (继承) |
string? |
null |
自定义样式。 |
| Implemented |
Title (继承) |
string? |
null |
HTML title 属性。 |
| Not Implemented |
TabIndex (继承) |
int? |
null |
TabIndex（未应用）。 |
| Not Implemented |
AccessKey (继承) |
string? |
null |
AccessKey（未应用）。 |
| Implemented |
Disabled (继承) |
bool |
false |
禁用状态（阻止交互）。 |
| Implemented |
Loading (继承) |
bool |
false |
加载状态（与 Disabled 等效）。 |
| Implemented |
AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
Events (事件)
| 状态 |
事件名 |
类型 |
描述 |
| Implemented |
OnClick |
EventCallback<MouseEventArgs> |
点击徽标时触发。 |
| Implemented |
OnDismissClick |
EventCallback<MouseEventArgs> |
点击关闭按钮时触发。 |
示例用法
<SxBadge Content="NEW" Appearance="BadgeAppearance.Accent">
<SxButton Appearance="ButtonAppearance.Outline">通知</SxButton>
</SxBadge>
参考设计 (References)
