# Badge

徽标

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

## 使用场景

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

启用动画，则可以着重提醒。

## 案例演示

### Badge 基本使用

用于展示新消息数量

---demo
```js
import { Badge, Button } from 'amos-framework';

ReactDOM.render((
  <Badge count={12}>
    <Button size="sm">评论</Button>
  </Badge>
), _react_runner_);
```
---demoend

### Badge 设置最大数字

设置最大数字，超过该数字则采用 + 显示

---demo
```js
import { Badge, Button } from 'amos-framework';

ReactDOM.render((
  <Badge count={99} max={10}>
    <Button size="sm">点赞</Button>
  </Badge>
), _react_runner_);
```
---demoend

### Badge 自定义渲染 count

自定义渲染 `count`，当 `count > max` 时，显示 `...`

---demo
```js
import { Badge, Button, Icon } from 'amos-framework';

function renderCount(count, max){
  return count > max ? '...' : count;
}

function renderCount2(count, max){
  return count > max ? <Icon icon="clouduploado" /> : count;
}

ReactDOM.render((
  <div>
    <Badge count={99} max={10} renderCount={renderCount}>
      <Button size="sm">点赞</Button>
    </Badge>
    <Badge count={20} max={10} renderCount={renderCount2} />
  </div>
), _react_runner_);
```
---demoend

### Badge 单独使用

独立使用，没有child，可设置自定样式

---demo
```js
import { Badge } from 'amos-framework';

ReactDOM.render((
  <div>
    <Badge count={25} />
    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
    <Badge count={109} style={{ backgroundColor: '#87d068' }} />
  </div>
), _react_runner_);
```
---demoend

### Badge 小红点

以红点的形式标注需要关注的内容

---demo
```js
import { Badge, Icon } from 'amos-framework';

ReactDOM.render((
  <div>
    <Badge dot>数据查询</Badge>
    <Badge dot><Icon icon='message' /></Badge>
  </div>
), _react_runner_);
```
---demoend

### Badge 动态变化

展示动态变化的效果

---demo
```js
import { Badge, Button, Switch } from 'amos-framework';

let count = 0;

class Demo extends Component {

  constructor(props) {
    super(props);
    this.state = {
      count,
      show: true,
      enableAnimate: false
    };
  }

  addCount = () => {
    count += 1;
    this.setState({
      count
    });
  }

  delCount = () => {
    count -= 1;
    this.setState({
      count
    });
  }

  switchChange = (checked) => {
    this.setState({
      show: checked
    });
  }

  switchAnimChange = (checked) => {
    this.setState({
      enableAnimate: checked
    });
  }

  render() {
    return (
      <div>
        <div>
          <Button onClick={this.addCount}>增加</Button>
          <Button onClick={this.delCount}>减少</Button>
          是否采用小红点: <Switch defaultOn onChange={this.switchChange} onLabel="是" offLabel="否" />
          是否启用动画: <Switch onOff={this.state.enableAnimate} onChange={this.switchAnimChange} onLabel="是" offLabel="否" />
        </div>
        <Badge count={this.state.count} dot={this.state.show} enableAnimate={this.state.enableAnimate}>告警</Badge>
      </div>
    );
  }
}

ReactDOM.render(<Demo />, _react_runner_);
```
---demoend

### Badge 状态点

用于表示状态的小圆点

---demo
```js
import { Badge } from 'amos-framework';

ReactDOM.render((
  <div>
    <Badge status="success">Success</Badge>
    <br />
    <Badge status="error">Error</Badge>
    <br />
    <Badge status="default">Default</Badge>
    <br />
    <Badge status="processing">Processing</Badge>
    <br />
    <Badge status="warning">Warning</Badge>
  </div>
), _react_runner_);
```
---demoend

## props

| params | type | default | description |
|--------- |-------- |--------- |-------- |
| prefixCls | string | `amos-badge` | 样式前缀 |
| className | string | - | 自定义样式名 |
| children | ReactNode | - | 自定义内容 |
| style | Object | - | 默认设置计数圆点样式，设置 `status`，`style` 设置外层节点样式 |
| count | Number | - | 展示的数字 |
| max | Number | `99` | 最大值，超过最大值时，采用 `{max}+` |
| dot | Boolean | `false` | 采用小红点的方式显示 |
| enableAnimate | Boolean | `false` | 是否启用动画，当徽标数改变时，动画提醒（仅在 非 `dot` 非 `status`下起效） |
| status | string | - | 设置 Badge 为状态点,可选值为 `success,processing,default,error,warning` |
| renderCount | func: `(count, max) => ReactNode` | [default renderCount](#default-renderCount) | 自定义渲染 count |

### default renderCount

```js
function renderCount(count, max){
  return count > max ? `${max}+` : count;
}
```