mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
2.2 KiB
2.2 KiB
| category | group | title | subtitle | description | cover | coverDark | demo | ||
|---|---|---|---|---|---|---|---|---|---|
| Components | 数据展示 | Tag | 标签 | 进行标记和分类的小标签。 | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_SBsSrKLg00AAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JPNAQYrVkYkAAAAAAAAAAAAADrJ8AQ/original |
|
何时使用
- 用于标记事物的属性和维度。
- 进行分类。
代码演示
基本
多彩标签
反色多彩标签
动态添加和删除
可选择标签
添加动画
图标按钮
预设状态的标签
无边框
深色背景中无边框
自定义关闭按钮
可拖拽标签
组件 Token
API
通用属性参考：通用属性
Tag
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|---|---|---|---|---|
| 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 | - |
Tag.CheckableTag
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |