Tag标签
Tag
标签
进行标记和分类的小标签。
使用import{ Tag }from"antd"; |
- 组件总览
- 通用
- 布局
- 导航
- 数据录入
- 数据展示
- 反馈
- 其他
基本标签的用法，可以通过设置 closeIcon 变为可关闭标签并自定义关闭按钮，设置为 true 时将使用默认关闭按钮。可关闭标签具有 onClose 事件。
内部反色标签
可通过 CheckableTag 实现类似 Checkbox 的效果，点击切换选中效果。
该组件为完全受控组件，不支持非受控用法。
当需要在 Tag 内嵌入 Icon 时，可以设置 icon 属性，或者直接在 Tag 内使用 Icon 组件。
如果想控制 Icon 具体的位置，只能直接使用 Icon 组件，而非 icon 属性。
无边框模式。
可用 closeIcon 自定义关闭按钮。
Component Token Debug.
我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
用数组生成一组标签，可以动态添加和删除。
使用 rc-tween-one 给标签增加添加或删除动画。
预设五种状态颜色，可以通过设置 color 为 success、 processing、error、default、warning 来代表不同的状态。
深色背景中的无边框模式。
使用 dnd kit 实现的可拖拽标签。
通用属性参考：通用属性
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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) |
