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

代码演示

如何引入

基本用法

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

尺寸

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

颜色

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

样式类型

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

头像标签

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

不可见的

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

TagGroup使用

在 TagGroup 内通过 tagList 传入 tags 配置,并且设置 maxTagCount 属性, 超出数量限制后,会显示为 +N
通过设置 showPopover 属性,来控制 hover 到 +N Tag 时,是否通过 Popover 显示剩余内容

API参考

Tag

属性说明类型默认值版本
avatarShape头像 Tag 形状,可选 squarecirclestringsquare1.6.0
avatarSrc头像的资源地址string-1.6.0
className类名string
closable标签是否可以关闭booleanfalse
color标签的颜色,可选 amberbluecyangreengreyindigolight-bluelight-greenlimeorangepinkpurpleredtealvioletyellowwhitestringgrey
size标签的尺寸,可选 smalllargestringsmall
style样式CSSProperties
type标签的样式类型,可选 ghostsolidlightstringlight
visible标签是否可见booleantrue
onClick单击标签时的回调函数(e: MouseEvent) => void
onClose关闭标签时的回调函数(tagChildren: ReactNode, e: MouseEvent) => voide于v1.18版本提供

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)[]

Accessibility

ARIA

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

键盘和焦点

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

设计变量

© 2021 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED