Tag

代码演示

如何引入

import { Tag, TagGroup, SplitTagGroup } from '@chenzy-design/svelte';

基本用法

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

尺寸

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

形状

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

配置图标

支持通过配置 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 来自定义颜色样式。

AI 风格 - 多彩标签

设置 colorful 为 true 即可获得多彩的标签。注意: 多彩标签的字重和非多彩标签字重不同。

多彩标签可通过 gradient 区分是否为渐变色。

样式类型

标签支持三种样式类型，包括浅色底色 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。

SplitTagGroup 组合标签

使用 SplitTagGroup 可以将多个标签组合成一个整体，首尾标签会有圆角，中间标签圆角为 0，形成连续的视觉效果。

API 参考

Tag

属性	说明	类型	默认值
avatarShape	头像 Tag 形状，可选 square 和 circle	string	square
avatarSrc	头像的资源地址	string	-
class	类名	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
colorful	多彩标签	boolean	false
gradient	是否为渐变色，需在 colorful 为 true 时生效	boolean	false
prefixIcon	前缀图标	Snippet	-
suffixIcon	后缀图标	Snippet	-
shape	标签的形状，可选 square、 circle	string	square
size	标签的尺寸，可选 small、 default、 large	string	default
style	样式	string	-
type	标签的样式类型，可选 ghost、 solid、 light	string	light
visible	标签是否可见	boolean	true
tagKey	作为每个标签的唯一标识，不允许重复	string | number	-
aria-label	无障碍标签，对可删除或可点击的标签推荐配置	string	-
onClick	单击标签时的回调函数	(e: MouseEvent) => void	-
onClose	关闭标签时的回调函数	(tagChildren, e: MouseEvent, tagKey) => void	-

TagGroup

属性	说明	类型	默认值
avatarShape	头像 Tag 形状，可选 square 和 circle	string	square
class	类名	string	-
maxTagCount	最大数量限制，超出后显示为 +N	number	-
popoverProps	popover 的配置属性，可以控制 direction、zIndex、trigger 等，具体参考 Popover	PopoverProps	{}
showPopover	hover 到 +N 时，是否通过 Popover 显示剩余内容	boolean	false
size	标签的尺寸，可选 small、 default、 large	string	default
style	样式	string	-
tagList	标签组	TagProps[]	[]
onTagClose	删除 TagGroup 中的 Tag 时候的回调函数	(tagChildren, e: MouseEvent, tagKey) => void	-

SplitTagGroup

属性	说明	类型	默认值
class	类名	string	-
style	样式	string	-
children	标签组	Snippet	-
aria-label	无障碍标签	string	-

Accessibility

ARIA

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

键盘和焦点

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

文案规范

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

设计变量

color

font

height

radius

spacing

width

变量	默认值	用法
--cd-tag-avatar-bg	var(--cd-color-bg-4)	头像标签背景色（Semi $color-tag_avatar-bg-default）
--cd-tag-avatar-border	var(--cd-color-border)	头像标签描边色（Semi $color-tag_avatar-border-default）
--cd-tag-avatar-square-img-bg	var(--cd-color-default)	方形头像图片背景色（Semi $color-tag_avatar_square_img-bg-default = var(--semi-color-default)）
--cd-tag-avatar-text	var(--cd-color-text-0)	头像标签文字色（Semi $color-tag_avatar-text-default）
--cd-tag-close-icon-active	var(--cd-color-text-0)	关闭按钮按下颜色（Semi $color-tag_close-icon-active）
--cd-tag-close-icon-default	var(--cd-color-text-2)	可删除标签删除按钮颜色（Semi $color-tag_close-icon-default）
--cd-tag-close-icon-hover	var(--cd-color-text-1)	关闭按钮悬浮颜色（Semi $color-tag_close-icon-hover）
--cd-tag-colorful-ghost-bg	var(--cd-color-white)	AI Tag 白色底背景（Semi $color-tag_colorful_ghost-bg）
--cd-tag-colorful-ghost-border	var(--cd-color-ai-general)	AI Tag 白色底描边（Semi $color-tag_colorful_ghost-border）
--cd-tag-colorful-ghost-text	var(--cd-color-ai-purple)	AI Tag 白色底字色（Semi $color-tag_colorful_ghost-text）

显示第 1 条-第 10 条，共 22 条

• 1
• 2
• 3