Tag 标签

使用

import { KTag } from "@ksware/ksw-ux";

用于标记和选择。

基础用法

由 type 属性来选择 tag 的类型。 也可以通过 color 属性来自定义背景色。

可移除标签

设置 closable 属性可以定义一个标签是否可移除。 它接受一个 Boolean。 默认的标签移除时会附带渐变动画。 如果不想使用，可以设置 disable-transitions 属性，它接受一个 Boolean，true 为关闭。 当 Tag 被移除时会触发 close 事件。

动态编辑标签

动态编辑标签可以通过点击标签关闭按钮后触发的 close 事件来实现。

不同尺寸

Tag 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

使用 size 属性来设置额外尺寸, 可选值包括 large, default 或 small.

圆形标签

Tag 可以向按钮组件一样变为完全圆形。

可选中的标签

有时候因为业务需求，我们可能会需要用到类似复选框的标签，但是按钮式的复选框的样式又不满足需求，此时我们就可以用到 check-tag组件。

check-tag 的基础使用方法，check-tag 提供的 API 非常简单。

自定义颜色标签

color 可以自定义标签的颜色，可以是十六进制颜色值，也可以是 CSS 颜色名。

标签主题

effect 属性可以设置标签的主题，目前提供了 light 、 dark 和 plain 三种主题，默认为 dark，支持与 color 属性一起使用。

点型标签

point 属性可以设置标签的形状为点型。

API

Props

参数名	描述	类型	默认值
type	标签类型	enum	-
text	悬浮窗提示文字	string	-
closeable	是否可关闭	boolean	false
disable-transitions	是否禁用渐变动画	boolean	false
hit	是否有边框描边	boolean	false
color	标签背景颜色	string	-
size	标签大小	enum	'base'
point	是否使用圆点标签	boolean	false
round	是否使用圆角标签	boolean	false
show-overflow	文字溢出时是否显示省略号	boolean	false
text-color	标签文字颜色	string	-
effect 1.2.0	标签主题	enum	'dark'
max-width 1.2.3	标签最大宽度	number | string	-

Slots

插槽名	描述	参数
default	默认插槽，用于放置标签内容	-