• Badge 徽标数

    图标右上角的圆形徽标数字。

    何时使用

    一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数,通过醒目视觉形式吸引用户处理。

    代码演示

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

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

    用 a 标签进行包裹即可。

    用于表示状态的小圆点。

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

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

    没有具体的数字。

    展示动态变化的效果。

    API

    <Badge count={5}>
      <a href="#" className="head-example" />
    </Badge>
    
    <Badge count={5} />
    
    参数 说明 类型 默认值
    count 展示的数字,大于 overflowCount 时显示为 ${overflowCount}+,为 0 时隐藏 number|ReactNode
    dot 不展示数字,只有一个小红点 boolean false
    offset 设置状态点的位置偏移,格式为 [x, y] [number, number] -
    overflowCount 展示封顶的数字值 number 99
    showZero 当数值为 0 时,是否展示 Badge boolean false
    status 设置 Badge 为状态点 Enum{ ‘success’, ‘processing, ‘default’, ‘error’, ‘warning’ }
    text 在设置了 status 的前提下有效,设置状态点的文本 string