Ant Design Blazor
Badge徽标数
图标右上角的圆形徽标数字。
何时使用
一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
Examples
简单的徽章展示，当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示。
超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99。
用 a 标签进行包裹即可。
设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量。
我们添加了多种预设色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
使用缎带型的徽标。
Badge API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Color | 属性自定义徽章状态点颜色。使用此参数将使徽章成为状态点。 | String | -- |
| PresetColor | 属性将徽章状态点设置为预设颜色。使用此参数将使徽章成为状态点。 | PresetColor? | -- |
| Count | 属性徽章中显示的号码 | Int32? | -- |
| CountTemplate | 属性代替计数显示的模板 | RenderFragment | -- |
| Dot | 属性是否显示点而不是计数 | Boolean | false |
| Offset | 属性设置徽章点的偏移量，如（左，上） | ValueTuple<Int32, Int32> | -- |
| OverflowCount | 属性显示的最大数量 | Int32 | 99 |
| ShowZero | 属性计数为零时是否显示徽章 | Boolean | false |
| Status | 属性将徽章点设置为状态颜色。使用此参数将使徽章成为状态点。 | String | -- |
| Text | 属性状态点旁边的显示文本 | String | -- |
| Title | 属性将鼠标悬停在徽章上时显示的文本。默认为 Count 的值 | String | -- |
| Size | 属性徽章尺寸 | String | -- |
| ChildContent | 属性包装这个项目。 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |
BadgeRibbon API#
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| Color | 属性自定义色带颜色 | String | -- |
| Text | 属性功能区的文本字符串。 | String | -- |
| TextTemplate | 属性功能区的文本内容。优先于 AntDesign.BadgeRibbon.Text |
RenderFragment | -- |
| Placement | 属性设置功能区的位置。 | String | end |
| ChildContent | 属性包装这个项目。 | RenderFragment | -- |
| Id | 属性组件 HTML 的 ID | String | Uniquely Generated ID |
| Class | 属性为 DOM 元素指定一个或多个类名。 | String | -- |
| Style | 属性指定 DOM 元素的内联样式。 | String | -- |
| RefBack | 属性一个 ForwardRef 实例。您可以使用 AntDesign.ForwardRef.Current 获取对内部 DOM 的引用。 |
ForwardRef | -- |