代码演示

如何引入

import { Tag, TagGroup } from '@kousum/semi-ui-vue';

基本用法

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

尺寸

默认定义了两种尺寸：大、小（默认）。

形状

默认定义了两种形状：square（默认）、circle。

配置图标

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

颜色

标签支持默认色板的 16 种颜色和白色，包括：amber、 blue、 cyan、 green、 grey、 indigo、 light-blue、 light-green、 lime、 orange、 pink、 purple、 red、 teal、 violet、 yellow、 white，也可以通过 style 来自定义颜色样式。

样式类型

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

头像标签

设置 avatarSrc 可以生成头像标签。结合 avatarShape 可以调整头像标签的形状，支持 square 和 circle。

不可见的

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

TagGroup 使用

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

如果 TagGroup 中的标签可删除，用户需要在 onTagClose 中处理传递给 TagGroup 的 tagList。

API 参考

Tag

属性	说明	类型	默认值	版本
avatarShape	头像 Tag 形状，可选 square 和 circle	string	square	1.6.0
avatarSrc	头像的资源地址	string	-	1.6.0
className	类名	string
closable	标签是否可以关闭	boolean	false
color	标签的颜色，可选 amber、 blue、 cyan、 green、 grey、 indigo、 light-blue、 light-green、 lime、 orange、 pink、 purple、 red、 teal、 violet、 yellow、 white	string	grey
prefixIcon	前缀图标	ReactNode		2.44.0
suffixIcon	后缀图标	ReactNode		2.44.0
shape	标签的形状，可选 square、 circle	string	square	2.20.0
size	标签的尺寸，可选 small、 large	string	small
style	样式	CSSProperties
type	标签的样式类型，可选 ghost、 solid、 light	string	light
visible	标签是否可见	boolean	true
tagKey	React 需要的 key，作为每个标签的唯一标识，不允许重复	string	number
onClick	单击标签时的回调函数	(e: MouseEvent) => void	无
onClose	关闭标签时的回调函数	(tagChildren: ReactNode, e: MouseEvent, tagKey: string | number ) => void	无	e 于 v1.18 版本提供, tagKey 于 v2.18.0 提供

TagGroup

属性	说明	类型	默认值	版本
avatarShape	头像 Tag 形状，可选 square 和 circle	string	square	1.6.0
className	类名	string
maxTagCount	最大数量限制，超出后显示为 +N	number
popoverProps	popover 的配置属性，可以控制 direction, zIndex, trigger 等，具体参考 Popover	PopoverProps	{}
showPopover	hover 到 +N 时，是否通过 Popover 显示剩余内容	boolean	false
size	标签的尺寸，可选 small、 large	string	small
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 失焦

文案规范

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

设计变量