展示类 · Tag
标签
标签是图形化标记界面上的元素的组件,达到快速识别、分组的目的。

代码演示

如何引入

基本用法

基本标签用法,将内容使用 <Tag> 标签包裹即可。
可以通过添加 closable 属性将其变为可关闭标签,此时点击 x 关闭会触发 onClose 事件,在 onClose 中阻止默认事件可以使其点击后依然显示不隐藏

尺寸

默认定义了两种尺寸:大、小(默认)。

形状

默认定义了两种形状:square(默认)、circle

配置图标

v2.44 后支持通过配置 prefixIcon、suffixIcon, 可以在 children 内容前后添加 Icon 图标

颜色

标签支持默认色板的 16 种颜色和白色,包括:amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowwhite,也可以通过 style 来自定义颜色样式。

样式类型

标签支持三种样式类型,包括浅色底色 light,白色底色 ghost,深色底色 solid;默认值为 light。通过 type 配置

头像标签

设置 avatarSrc 可以生成头像标签。结合 avatarShape 可以调整头像标签的形状,支持 squarecircle

不可见的

通过 visible 属性控制标签是否可见。

TagGroup 使用

在 TagGroup 内通过 tagList 传入 tags 配置,并且设置 maxTagCount 属性, 超出数量限制后,会显示为 +N
通过设置 showPopover 属性,来控制 hover 到 +N Tag 时,是否通过 Popover 显示剩余内容
如果 TagGroup 中的标签可删除,用户需要在 onTagClose 中处理传递给 TagGroup 的 tagList

API参考

Tag

属性说明类型默认值版本
avatarShape头像 Tag 形状,可选 squarecirclestringsquare1.6.0
avatarSrc头像的资源地址string-1.6.0
className类名string
closable标签是否可以关闭booleanfalse
color标签的颜色,可选 amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowwhitestringgrey
prefixIcon前缀图标ReactNode2.44.0
suffixIcon后缀图标ReactNode2.44.0
shape标签的形状,可选 squarecirclestringsquare2.20.0
size标签的尺寸,可选 smalllargestringsmall
style样式CSSProperties
type标签的样式类型,可选 ghostsolidlightstringlight
visible标签是否可见booleantrue
tagKeyReact 需要的 key,作为每个标签的唯一标识,不允许重复stringnumber
onClick单击标签时的回调函数(e: MouseEvent) => void
onClose关闭标签时的回调函数(tagChildren: ReactNode, e: MouseEvent, tagKey: string | number ) => voide 于 v1.18 版本提供, tagKey 于 v2.18.0 提供

TagGroup

属性说明类型默认值版本
avatarShape头像 Tag 形状,可选 squarecirclestringsquare1.6.0
className类名string
maxTagCount最大数量限制,超出后显示为 +Nnumber
popoverPropspopover 的配置属性,可以控制 direction, zIndex, trigger 等,具体参考 PopoverPopoverProps{}
showPopoverhover 到 +N 时,是否通过 Popover 显示剩余内容booleanfalse
size标签的尺寸,可选 smalllargestringsmall
style样式CSSProperties
tagList标签组(TagProps)[]
onTagClose删除TagGroup中的Tag时候的回调函数(tagChildren: ReactNode, e: MouseEvent, tagKey: string | number ) => void-2.18.0

Accessibility

ARIA

  • aria-label 用于表示 Tag 的作用,对于可删除或者可点击的 Tag ,我们推荐使用此属性

键盘和焦点

  • 如果当前 Tag 可交互,那么这个 Tag 可被聚焦到。如:
    • 使用了 onClick 属性时,键盘用户可以通过 Enter 键激活此 Tag
    • closable 属性为 true 时,键盘用户可以通过 Delete 键删除此 Tag
    • Tag 被聚焦时,键盘用户可以通过 Esc 键使当前聚焦 Tag 失焦

文案规范

  • 由于空间有限,标签文本应尽可能简短
  • 避免换行
  • 使用句子大小写;

设计变量