# 徽标数 Badge

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/badge
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

一般出现在图标或文字的右上角。提供及时、重要的信息提示。

## 安装

```bash
npm install @arco-design/web-react@2.66.18
```

在入口引入 `@arco-design/web-react/dist/css/arco.css`，用 `ConfigProvider` 设置语言。React 19 项目还需在入口最先引入 `@arco-design/web-react/es/_util/react-19-adapter`，否则 Message、Modal 等命令式 API 无法渲染。

## 示例

- **基础用法**：基础的用法。只需指定 `count`，即可显示徽标。
- **独立使用**：`children` 为空时，将会独立展示徽标。
- **小红点**：设置 `dot`，即可只显示小红点而不显示数字。`count > 0` 时才显示。
- **文本内容**：设置 `text`，可设置自定义提示内容。
- **最大值**：设置 `maxCount`，可以限制最大显示的徽标数值，超过将会加 `+` 后缀。`maxCount` 默认为 `99`。
- **状态点**：设置 `status`，可以得到不同的状态点。`default - 默认` `processing - 进行中` `success - 成功` `warning - 提醒` `error - 错误`。
- **颜色**：我们提供多种预设色彩的徽标样式。如果预设值不能满足你的需求，`color` 字段也可以设置自定义色值。
- **动画效果**：`count` 改变时候存在动画效果。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

## API

### Badge

|参数名|描述|类型|默认值|
|---|---|---|---|
|dot|显示为小红点|boolean |`-`|
|maxCount|徽标最大显示数值，如果 count 超过这个数值会显示为 `${maxCount}+`|number |`99`|
|text|自定义提示内容|string |`-`|
|color|内置的一些颜色|\| 'red'\| 'orangered'\| 'orange'\| 'gold'\| 'lime'\| 'green'\| 'cyan'\| 'arcoblue'\| 'purple'\| 'pinkpurple'\| 'magenta'\| 'gray'\| string |`-`|
|status|徽标的状态类型|'default' \| 'processing' \| 'success' \| 'warning' \| 'error' |`-`|
|count|徽标显示的数字|number \| ReactNode |`0`|
|className|节点类名|string \| string[] |`-`|
|dotClassName|徽标的类名|string \| string[] |`-`|
|dotStyle|徽标的样式|CSSProperties |`-`|
|offset|设置徽标位置的偏移|[number, number] |`-`|
|style|节点样式|CSSProperties |`-`|

## 常见问题

1. 如何在 `dot=true` 时设置不显示小红点？
  可以设置`count=0`。`count > 0` 的时候才会展示徽标。

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt