Tag
标签

进行标记和分类的小标签。
使用import{ Tag }from"antd";

何时使用

  • 用于标记事物的属性和维度。
  • 进行分类。

代码演示

Tag 1LinkPrevent DefaultTag 2

基本标签的用法,可以通过设置 closeIcon 变为可关闭标签并自定义关闭按钮,设置为 true 时将使用默认关闭按钮。可关闭标签具有 onClose 事件。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
UnremovableTag 2Tag 3New Tag

用数组生成一组标签,可以动态添加和删除。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3
New Tag

使用 rc-tween-one 给标签增加添加或删除动画。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
successprocessingerrorwarningdefault
successprocessingerrorwarningwaitingstop

预设五种状态颜色,可以通过设置 colorsuccessprocessingerrordefaultwarning 来代表不同的状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3

使用 dnd kit 实现的可拖拽标签。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
magentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple
#f50#2db7f5#87d068#108ee9

我们添加了多种预设色彩的标签样式,用作不同场景使用。如果预设值不能满足你的需求,可以设置为具体的色值。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Categories:MoviesBooksMusicSports

可通过 CheckableTag 实现类似 Checkbox 的效果,点击切换选中效果。

该组件为完全受控组件,不支持非受控用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
TwitterYoutubeFacebookLinkedIn

当需要在 Tag 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Tag 内使用 Icon 组件。

如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Tag 1Tag 2Tag 3Tag 4
processingsuccesserrorwarningmagentaredvolcanoorangegoldlimegreencyanbluegeekbluepurple

无边框模式。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Tag

参数说明类型默认值版本
closeIcon自定义关闭按钮。5.7.0:设置为 nullfalse 时隐藏关闭按钮ReactNodefalse4.4.0
color标签色string-
icon设置图标ReactNode-
bordered是否有边框booleantrue5.4.0
onClose关闭时的回调(可通过 e.preventDefault() 来阻止默认行为)(e: React.MouseEvent<HTMLElement, MouseEvent>) => void-

Tag.CheckableTag

参数说明类型默认值
checked设置标签的选中状态booleanfalse
onChange点击标签时触发的回调(checked) => void-

主题变量(Design Token)

组件 Token如何定制?

Token 名称描述类型默认值
defaultBg默认背景色string#fafafa
defaultColor默认文字颜色stringrgba(0,0,0,0.88)

全局 Token如何定制?