Badge 徽标数

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

何时使用

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

API

<Badge count="5">
  <a href="#" className="head-example"></a>
</Badge>

参数	说明	类型	可选值	默认值
count	展示的数字，大于 99 时显示为 99+	Number
dot	不展示数字，只有一个小红点	boolean		false

组件演示

var Badge = antd.Badge;

React.render(
  <Badge count="5">
    <a href="#" className="head-example"></a>
  </Badge>
, document.getElementById('components-badge-demo-basic'));

.ant-badge {
  margin-right: 16px;
}
.head-example {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  background: #eee;
  display: inline-block;
}

基本

简单的徽章展示。

var Badge = antd.Badge;

React.render(
  <a href="#">
    <Badge count="5">
      <span className="head-example"></span>
    </Badge>
  </a>
, document.getElementById('components-badge-demo-link'));

可点击

用 a 标签进行包裹即可。

var Badge = antd.Badge;

React.render(<div>
  <Badge count="99">
    <a href="#" className="head-example"></a>
  </Badge>
  <Badge count="200">
    <a href="#" className="head-example"></a>
  </Badge>
</div>, document.getElementById('components-badge-demo-99plus'));

大数字

超过 99 的会显示为 99+。

var Badge = antd.Badge;

React.render(<div>
  <Badge dot={true}>
    <i className="anticon anticon-notification"></i>
  </Badge>
  <Badge dot={true}>
    <a href="#">一个链接</a>
  </Badge>
</div>, document.getElementById('components-badge-demo-dot'));

讨嫌的小红点

没有具体的数字。