展示类 · Badge
徽章
用徽章来给用户提示。

代码演示

如何引入

基本用法

Badge 的基本类型为 count。如果传入 dot 则显示为小圆点,两者互斥,优先渲染小圆点。当传入是节点类型时,将直接渲染该节点。

设置显示数字最大值

可以通过设置 overflowCount 值设置显示数字的最大值,当实际数值超过该值时将以 ${overflowCount}+ 的格式显示。

设置徽标位置

可以通过设置 position 设置位置,支持:leftTopleftBottomrightTop(默认), rightBottom

设置徽标样式

可以通过设置 themetype 设置徽标的样式。其中 theme 支持三种形式:solid, light, inverted。默认形式为 solid
type 支持如下类型:primarysecondarytertiarywarningdanger。默认类型为 primary

独立使用

当 Badge 作为独立元素时可以单独使用。

API参考

属性说明类型默认值
children徽章的 baseReactNode
className外侧 classNamestring-
count展示的内容ReactNode
countClassName内容区域 classNamestring
dot不展示数字,显示小圆点booleanfalse
overflowCount最大的展示数字值number
position徽章位置,可选 leftTopleftBottomrightToprightBottomstringrightTop
countStyle徽章内容的样式, v2.59.1后生效CSSProperties
theme徽章主题,可选 solidlightinvertedstringsolid
type徽章类型,可选 primarysecondarytertiarydangerwarningsuccessstringprimary

文案规范

  • Badge内容若为英文时,首字母应大写

设计变量