SxCounterBadge (计数徽标)
- Implemented
专门用于展示数字计数的徽标，支持最大值溢出显示。对齐 Microsoft Fluent UI Blazor CounterBadge (v4.13.2) 的 API 结构，并说明 NextUI 当前实现状态。
使用场景
- 未读消息数
- 任务或提醒数量
- 图标角标提示
约束说明
Dot=true时不显示数字。Count <= 0时默认隐藏，除非ShowZero=true或Dot=true。
行为说明
Count > Max时显示Max+。
API
Parameters (参数)
| 状态 | 参数名 | 类型 | 默认值 | 描述 |
|---|---|---|---|---|
| Implemented | Count |
int |
0 |
当前显示的数值。 |
| Implemented | Max |
int |
99 |
允许显示的最大数值，超过后显示 Max+。 |
| Implemented | Dot |
bool |
false |
是否仅显示为一个红点（忽略数值）。 |
| Implemented | ShowZero |
bool |
false |
当数值为 0 时是否仍然显示。 |
| Implemented | Appearance |
BadgeAppearance |
Accent |
视觉风格。 |
| Implemented | ChildContent |
RenderFragment? |
null |
徽标包裹内容。 |
| Implemented | Id (继承) |
string? |
null |
组件的物理 Id。 |
| Implemented | Class (继承) |
string? |
null |
自定义 CSS 类名。 |
| Implemented | Style (继承) |
string? |
null |
自定义样式。 |
| Implemented | Title (继承) |
string? |
null |
HTML title 属性。 |
| Implemented | AdditionalAttributes (继承) |
IEnumerable<KeyValuePair<string, object>>? |
null |
捕获不匹配的 HTML 属性。 |
示例
<SxCounterBadge Count="12">
<SxIcon Name="bell" />
</SxCounterBadge>