logo
为了能更好地了解您的商业使用需求,请参与 Ant Design Blazor 商业应用调查,一起建设商业应用社区,为企业系统研发赋能!

Badge徽标数

Examples

简单的徽章展示,当 count0 时,默认不显示,但是可以使用 showZero 修改为显示。

expand code expand code

超过 overflowCount 的会显示为 ${overflowCount}+,默认的 overflowCount99

expand code expand code

设置状态点的位置偏移,格式为 [left, top],表示状态点距默认位置左侧、上方的偏移量。

expand code expand code

我们添加了多种预设色彩的徽标样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。

expand code expand code

使用缎带型的徽标。

expand code expand code

不包裹任何元素即是独立使用,可自定样式展现。

在右上角的 badge 则限定为红色。

expand code expand code

没有具体的数字。

expand code expand code

展示动态变化的效果。

expand code expand code

用于表示状态的小圆点。

expand code expand code

可以设置有数字徽标的大小。

expand code expand code

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 --
Avatar头像 Calendar日历
文档已更新,请点击 此处 更新。
A new version of this app is available. Click here to update.