# Badge 徽标

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/badge/freepass)
- 平台：PC
- 维护者：陈佳敏

## 代码演示

### 基础用法

通用数字显示, 支持通过overflowCount配置数字最大限制，通过size配置尺寸

```jsx
import { Component } from 'react';
import { Badge, constants, Icon } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;

class BadgeDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <Badge className={`${prefixCls}-item`} count={5} showBorder>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} count={0} showBorder showZero>
          <div className={`${prefixCls}-item-children`} />
        </Badge>

        <h3>封顶数字</h3>
        <Badge className={`${prefixCls}-item`} count={99} showBorder>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} count={100} showBorder>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} count={1000} showBorder overflowCount={999}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>

        <h3>不同尺寸</h3>
        <Badge className={`${prefixCls}-item`} count={5} showBorder>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} count={5} showBorder size="small">
          <div className={`${prefixCls}-item-children`} />
        </Badge>

        <h3>自定义</h3>
        <Badge className={`${prefixCls}-item`} count={<Icon name="Icon-Speechless" size="sm" />}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>

        <h3>独立使用(不配children)</h3>
        <Badge className={`${prefixCls}-item`} count={5}>
        </Badge>
        <Badge className={`${prefixCls}-item`} count={0} showZero>
        </Badge>
        <Badge className={`${prefixCls}-item`} count={100} showBorder>
        </Badge>
        <Badge className={`${prefixCls}-item`} count={1000} overflowCount={999}>
        </Badge>
      </div>
    )
  }
}

export default BadgeDemo;
```

### 小红点

配置dot参数为true

```jsx
import { Component } from 'react';
import { Badge, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;

class BadgeDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <Badge className={`${prefixCls}-item`} dot>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} dot showBorder>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} dot>
          文本标记
        </Badge>
      </div>
    )
  }
}

export default BadgeDemo;
```

### 多彩徽标

组件添加了多种预设状态或色彩的徽标样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值

```jsx
import { Component } from 'react';
import { Badge, BadgeStatusType, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;

const statusList: BadgeStatusType[] = [
  'primary',
  'success',
  'error',
  'warning',
  'disabled'
]

const colors = [
  'pink',
  'red',
  'yellow',
  'orange',
  'cyan',
  'green',
  'blue',
  'purple',
  'geekblue',
  'magenta',
  'volcano',
  'gold',
  'lime',
];

class BadgeDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <h3>组件内置状态</h3>
        {statusList.map((status: BadgeStatusType) => (
          <Badge key={status} className={`${prefixCls}-color`} dot status={status} text={status} />
          ))
        }

        <h3>组件内置彩色</h3>
        {colors.map((color) => (
          <Badge key={color} className={`${prefixCls}-color`} dot color={color} text={color} />
        ))
        }

        <h3>自定义颜色</h3>
        <Badge className={`${prefixCls}-color`} dot color={"#f50"} text={"#f50"} />
      </div>
    )
  }
}

export default BadgeDemo;
```

### 自定义位置偏移

设置状态点的位置偏移，格式为 [left, top]，表示状态点距默认位置左侧、上方的偏移量

```jsx
import { Component } from 'react';
import { Badge, constants } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;

class BadgeDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        <Badge className={`${prefixCls}-item`} dot offset={[0, '100%']}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} dot offset={['100%', 0]}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} dot offset={['100%', '100%']}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
        <Badge className={`${prefixCls}-item`} count={5} offset={[10, -10]}>
          <div className={`${prefixCls}-item-children`} />
        </Badge>
      </div>
    )
  }
}

export default BadgeDemo;
```

### 缎带徽标

可以和多彩徽标一样配置不同的状态和色彩

```jsx
import { Component } from 'react';
import { Badge, constants, BadgeStatusType } from '@weapp/ui';

const prefixCls = `${constants.uiPcClsPrefix}-demo-badge`;

const status: BadgeStatusType[] = [
  'primary',
  'error'
];

const colors = [
  'pink',
  'red',
];

class BadgeDemo extends Component {
  render() {
    return (
      <div className={prefixCls}>
        {status.map(status => (
          <Badge key={status} ribbon text="缎带徽标" status={status}>
          <div className={`${prefixCls}-block`} />
        </Badge>
        ))}
        {colors.map(color => (
          <Badge key={color} ribbon text="缎带徽标" color={color}>
            <div className={`${prefixCls}-block`} />
          </Badge>
        ))}
      </div>
    )
  }
}

export default BadgeDemo;
```

## API

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| count | 展示的数字 | React.ReactNode | 否 | - |
| showZero | count数量为0的count | boolean | 否 | false |
| overflowCount | count最大限制 | number | 否 | - |
| dot | 是否为小红点效果 | boolean | 否 | false |
| showBorder | 是否展示白色边框，`dot`和`count`效果使用 | boolean | 否 | false |
| ribbon | 是否显示为缎带效果 | boolean | 否 | false |
| status | 徽标状态，`dot`和`count`效果使用 | 'success' \| 'primary' \| 'error' \| 'warning' \| 'disabled' | 否 | - |
| color | 徽标颜色，`dot`和`ribbon`效果使用 | 'blue' \| 'purple' \| 'cyan' \| 'green' \| 'magenta' \| 'pink' \| 'red' \| 'orange' \| 'yellow' \| 'volcano' \| 'geekblue' \| 'lime' \| 'gold' \| 自定义颜色 | 否 | - |
| text | 徽标内文本，`count`和`ribbon`效果使用 | React.ReactNode | 否 | - |
| size | 徽标尺寸, 仅`count`效果使用 | 'default' \| 'small' | 否 | 'default' |
| offset | 徽标位置偏移量[top, right]，`dot`和`count`效果使用 | [ number \| string, number \| string ] | 否 | - |
| title | 设置鼠标放在状态点上时显示的文字 | string | 否 | - |
| children | 包裹在徽标内的组件 | React.ReactNode | 否 | - |
