开发指南
何时使用
在有新消息、讯息时,或者是app/插件/功能模块可以更新、升级时使用这个组件。
无障碍
可通过添加如下class,使内容仅能被读屏软件读取,但不会展示到页面上
<span className="next-sr-only">unread messages</span>
在有新消息、讯息时,或者是app/插件/功能模块可以更新、升级时使用这个组件。
可通过添加如下class,使内容仅能被读屏软件读取,但不会展示到页面上
<span className="next-sr-only">unread messages</span>
简单的徽章展示。
超过 overflow 的数值,会显示\${overflow}+
,overflow 默认值为99
。
没有具体的数字。
展示动态变化的效果,默认显示,可用 noTransition 属性取消掉。
通过 content
属性可以自定义徽标的内容,自定义内容不包含任何色彩样式,完全由使用者自己定义。
不包裹任何元素即独立使用,可自定样式展示。
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
children | 徽章依托的内容 | ReactNode | - |
count | 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时默认隐藏 | Number/String | 0 |
showZero | 当count为0时,是否显示count | Boolean | false |
content | 自定义节点内容 | ReactNode | - |
overflowCount | 展示的封顶的数字 | Number/String | 99 |
dot | 不展示数字,只展示一个小红点 | Boolean | false |
noTransition | 数字切换时不显示动画 | Boolean | false |