---
title: Tag - 标签
path: /tag
nav:
  order: 1
  title: 桌面组件
  path: /design
group:
  order: 4
  title: 数据展示
  path: /dataShow
---

标签常用于标记、分类和选择。

## 基础标签

基础标签为默认的标签样式。适用于常规表单。

<code src="./demos/base.tsx" height="400px"/>

## 带图标的标签

在标签内嵌入图标。适用于用图标来辅助标签分类，或表达标签的属性。

<code src="./demos/icon.tsx" height="400px"/>

## 可删除和添加标签

可删除或添加的标签。添加标签可组合输入框组件使用。

<code src="./demos/close.tsx" height="400px"/>

## 可选择标签

标签有已选和未选两种状态，可以通过点击标签来切换。类似多选框的效果。

<code src="./demos/select.tsx" height="400px"/>

## 超长省略文本标签

通过 maxWidth 设置最大宽度，超出部分自动省略。

<code src="./demos/long.tsx" height="400px"/>

## 不同尺寸

<code src="./demos/size.tsx" height="400px"/>

## API

| 参数       | 说明                                                                               | 类型            | 默认值 |
| ---------- | ---------------------------------------------------------------------------------- | --------------- | ------ |
| size       | 尺寸大小：`small`, `middle`, `large`.                                              | String          | middle |
| type       | 类型：`primary`, `error`, `success`,`warning`. 如果设置了 props.color, 该属性失效. | String          |        |
| select     | 是否可以选中                                                                       | Boolean         | false  |
| isSelected | 是否被选中，与 select 配合使用                                                     | Boolean         | false  |
| disabled   | 是否禁用 Tag                                                                       | Boolean         | false  |
| maxWidth   | 文本内容的最大宽度，过长会省略。可填：'100px', '40%'等。                           | String          |        |
| isEdit     | tag 是否可编辑                                                                     | boolean         | false  |
| inputProps | 可编辑 tag 的 input 的 props                                                       | InputProps      | -      |
| onInput    | 可编辑 tag 的 input 回车后的回调                                                   | (value) => void | -      |
| border     | 是否有边框                                                                         | boolean         | true   |

Tag 的其他属性和 React 自带的 [tag](https://ant.design/components/tag-cn/#Tag) 一致。

## 注意

antd 的 `Tag.CheckableTag` 已经集成在 tag 里，用 `props.select` 和 `props.onClick` 即可。