标签 Tag
进行标记和分类的小标签。
安装
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 属性对应的颜色 | - |