Badge 徽标数

开发指南

何时使用

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

无障碍

可通过添加如下class,使内容仅能被读屏软件读取,但不会展示到页面上 <span className="next-sr-only">unread messages</span>

012345678901234567890123456789unread messages012345678901234567890123456789

基本

简单的徽章展示。

99+199+

大数字

超过 overflow 的数值,会显示\${overflow}+,overflow 默认值为99

讨嫌的小红点

没有具体的数字。

unread messages012345678901234567890123456789unread messages012345678901234567890123456789

动态

展示动态变化的效果,默认显示,可用 noTransition 属性取消掉。

hot

自定义徽标内容

通过 content 属性可以自定义徽标的内容,自定义内容不包含任何色彩样式,完全由使用者自己定义。

01234567890123456789012345678901234567890123456789012345678901234567890123456789012345678999+hot

独立使用

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

API

Badge

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