Tag标签
Tag
标签
进行标记和分类的小标签。
使用import { Tag } from "antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
基本标签的用法，可以通过设置 closeIcon 变为可关闭标签并自定义关闭按钮，设置为 true 时将使用默认关闭按钮。可关闭标签具有 onClose 事件。
用数组生成一组标签，可以动态添加和删除。
使用 rc-tween-one 给标签增加添加或删除动画。
预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。
使用 dnd kit 实现的可拖拽标签。
我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。
该组件为完全受控组件，不支持非受控用法。
当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
无边框模式。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| closeIcon | 自定义关闭按钮。5.7.0：设置为 null 或 false 时隐藏关闭按钮 | ReactNode | false | 4.4.0 |
| color | 标签色 | string | - | |
| icon | 设置图标 | ReactNode | - | |
| bordered | 是否有边框 | boolean | true | 5.4.0 |
| onClose | 关闭时的回调（可通过 e.preventDefault() 来阻止默认行为） | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |
| Token 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| defaultBg | 默认背景色 | string | #fafafa |
| defaultColor | 默认文字颜色 | string | rgba(0,0,0,0.88) |
