Badge

Example
基本
封顶数字
讨嫌的小红点
自定义图标、颜色等
独立使用
徽标可点击
内容动态变化
无障碍支持
API

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

何时使用 #

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
在有新消息、讯息时，或者是 app/插件/功能模块可以更新、升级时使用这个组件。

无障碍键盘操作指南 #

Badge组件本身不涉及键盘操作，若可点击也应当是Badge与其children整体可聚焦点击；
无障碍配置方式参见#无障碍支持。

代码演示 #

基本 #

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

封顶数字 #

超过overflowCount的数值，会显示${overflowCount}+，overflowCount默认值为99。

讨嫌的小红点 #

没有具体的数字，仅展示小红点。

自定义图标、颜色等 #

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

独立使用 #

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

徽标可点击 #

用<a>标签包裹组件，实现徽标本身可点击。

内容动态变化 #

展示徽标内容动态变化的效果。

import React from 'react';
import ReactDOM from 'react-dom';
import { Badge, Button, Icon } from '@alifd/next';
const ButtonGroup = Button.Group;
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      show: true,
    };
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
    this.onClick = this.onClick.bind(this);
  }
  increase() {
    const count = this.state.count + 1;
    this.setState({ count });
  }
  decrease() {
    let count = this.state.count - 1;
    if (count < 0) {
      count = 0;
    }
    this.setState({ count });
  }
  onClick() {
    this.setState({
      show: !this.state.show,
    });
  }
  render() {
    return (
      <div>
        <div className="change-count">
          <Badge count={this.state.count}>
            <a href="#" className="head-example">
              <span className="next-sr-only">unread messages</span>
            </a>
          </Badge>
          <Badge count={this.state.count} showZero>
            <a href="#" className="head-example">
              <span className="next-sr-only">unread messages</span>
            </a>
          </Badge>
          <ButtonGroup>
            <Button aria-label="add" onClick={this.increase}>
              <Icon type="add" />
            </Button>
            <Button aria-label="minus" onClick={this.decrease}>
              <Icon type="minus" />
            </Button>
          </ButtonGroup>
        </div>
        <div>
          <Badge dot={this.state.show}>
            <a href="#" className="head-example" />
          </Badge>
          <Button onClick={this.onClick}>Toggle Display</Button>
        </div>
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

无障碍支持 #

可通过给内容添加className="next-sr-only"，使内容仅能被读屏软件读取，但不会展示到页面上。

API #

Badge #

参数	说明	类型	默认值
children	徽章依托的内容	React.ReactNode	-
count	展示的数字，大于 overflowCount 时显示为 overflowCount+，为 0 时隐藏	number \| string	0
content	自定义节点内容	React.ReactNode	-
overflowCount	展示的封顶的数字	number \| string	99
dot	不展示数字，只展示一个小红点	boolean	false
showZero	当 count 为 0 时，默认不显示，但是可以使用 showZero 修改为显示	boolean	false