Tag 标签

通常用来展示一些属性

引用

import { regist, Tag, CloseIcon } from "litos-ui";

regist(Tag);
regist(CloseIcon); // 需要 closable 引入

演示

基础用法

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

type 属性，可以传递一个自定义的值，然后在 css 中定义 .l-tag--xx 就能实现自定义的样式。

.l-tag--blue {
  --l-tag-color: #4998f6;
  --l-tag-background: #e8f5ff;
  --l-tag-border-color: #4998f6;
}

可移除

通过 closeable 属性来实现可移除的标签，然后监听 close 事件。

需要引入 CloseIcon 组件

过渡效果

如果想给标签添加显示或移除时的过渡效果，通过 ph-utils/transition 实现, 具体使用参考 transition。

这里使用的是内置的过渡名称，需要手动引入 litos-ui/styles/transition.css 文件 也可以通过传递 css 属性实现过渡, 例如: transition(target, [["opacity", "0", "0.3s"]], "enter")

API

Tag Attibutes

参数	说明	类型	默认值
type	类型	string	primary, 可选值有: primary, success, info, warning, error
color	标签颜色	string	-
closeable	是否可移除	boolean	false

Tag Slots

名称	说明
default	内容

Tag Events

事件名	说明	回调参数
click	点击按钮时触发	(event: Event)
close	移除标签时触发	(event: CustomEvent)

Tag Methods

方法名	说明	类型
-	-	-

Tag CSS Variables

变量名	说明	默认值
--l-tag-height	标签高度	22px
--l-tag-border-color	标签边框颜色	#dedede
--l-tag-background	标签背景色	#fff
--l-tag-color	标签字体颜色	#333