Badge 徽标数

使用场景:在有新消息,讯息时,或者是app/插件/功能模块可以更新,升级时使用这个组件。

基本用法

徽章依托的内容 可以是图标,文字,也可以没有。图标有大图标和小图标两种;通过 Badge 的 count 属性 显示有多少条信息,count 为 0 时隐藏; overflowCount 设置超过这个值,显示 overflowCount 的值;Badge 可以没有 children,独立使用。

小图标


大图标


链接


这是一个链接

大数字


99+199+

独立使用

01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678999+hot

APIs

Badge

参数说明类型默认值
children徽章依托的内容ReactNode-
count展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时默认隐藏Number/String0
showZero当count为0时,是否显示countBooleanfalse
content自定义节点内容ReactNode-
overflowCount展示的封顶的数字Number/String99
dot不展示数字,只展示一个小红点Booleanfalse

Demo

动态徽章

特殊场景下需要展示动态效果。

动态


012345678901234567890123456789



定制徽章

使用 content 属性定义显示的内容。

hot