# 徽标 Badge

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

在右上角展示数字、文字、小红点。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

在右上角展示数字、文字、小红点。

## 何时使用

适用于产品化的新消息、新功能、新服务等内容的提醒，通过醒目视觉形式吸引用户处理。

## 示例

## Badge

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bordered | 是否增加描边 | `boolean` | `false` |
| color | 徽标背景色，等效于设置 `--color` CSS 变量 | `string` | - |
| content | 徽标内容：如果传 `null` `undefined` `''` 或不传，则不显示徽标；如果传 `Badge.dot`，会显示小红点 | `React.ReactNode \| typeof Badge.dot` | - |
| wrapperClassName | `Badge` wrap 自定义类名 | `string` | - |
| wrapperStyle | `Badge` wrap 自定义样式 | `React.CSSProperties` | - |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --color | 徽标背景色 | `var(--adm-color-highlight)` | `--adm-badge-color` |
| --right | 相对于最右边，向左的偏移量 | `0` | - |
| --top | 相对于最上边，向下的偏移量 | `0` | - |

---

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