# 标签 Tag

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/tag
- 资源: 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。

进行标记和分类的小标签。

## 何时使用

- 适用于标记事物的属性和维度。
- 进行分类。

## 示例

## Tag

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 标签色 | `'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| string` | `'default'` |
| fill | 填充模式 | `'solid' \| 'outline'` | `'solid'` |
| onClick | 标签点击事件 | `(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void` | - |
| round | 是否圆角 | `boolean` | `false` |

### CSS 变量

| 属性 | 说明 | 默认值 | 全局变量 |
| --- | --- | --- | --- |
| --background-color | 背景颜色 | 当 `fill=solid` 时，默认值为 `color` 属性对应的颜色；当 `fill=outline` 时，默认值为 `#ffffff` | - |
| --border-color | 边框颜色 | `color` 属性对应的颜色 | - |
| --border-radius | `round=false` 时的圆角大小 | `2px` | `--adm-tag-border-radius` |
| --text-color | 文字颜色 | 当 `fill=solid` 时，默认值为 `#ffffff`；当 `fill=outline` 时，默认值为 `color` 属性对应的颜色 | - |

---

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