介绍

用于分类或概括事物属性的标签。

引入

import Tag from 'sard-uniapp/components/tag/tag.vue'

代码演示

基础使用

通过 theme 属性设置标签颜色。

<template>
  <sar-tag theme="primary">primary</sar-tag>
  <sar-tag theme="secondary">secondary</sar-tag>
  <sar-tag theme="success">success</sar-tag>
  <sar-tag theme="info">info</sar-tag>
  <sar-tag theme="warning">warning</sar-tag>
  <sar-tag theme="danger">danger</sar-tag>
</template>

镂空

通过 plain 属性设置为空心样式。

<template>
  <sar-tag plain theme="primary">primary</sar-tag>
  <sar-tag plain theme="secondary">secondary</sar-tag>
  <sar-tag plain theme="success">success</sar-tag>
  <sar-tag plain theme="info">info</sar-tag>
  <sar-tag plain theme="warning">warning</sar-tag>
  <sar-tag plain theme="danger">danger</sar-tag>
</template>

圆角

通过 round 属性设置为圆角样式。

<template>
  <sar-tag theme="primary" round>标签</sar-tag>
</template>

标记样式（半圆角）

通过 mark 属性设置为标记样式(半圆角)。

<template>
  <sar-tag theme="primary" mark>标签</sar-tag>

  <sar-tag theme="primary" mark="left">标签 left</sar-tag>
  <sar-tag theme="primary" mark="right">标签 right</sar-tag>
</template>

尺寸

通过 size 属性调整标签大小。

<template>
  <sar-tag theme="primary" size="small">标签</sar-tag>
  <sar-tag theme="primary">标签</sar-tag>
  <sar-tag theme="primary" size="large">标签</sar-tag>
</template>

自定义样式

通过 color 和 textColor 属性设置标签颜色。

<template>
  <sar-tag color="var(--sar-red)">标签</sar-tag>
  <sar-tag color="var(--sar-gray-300)" text-color="var(--sar-red)">
    标签
  </sar-tag>
  <sar-tag plain color="var(--sar-red)">标签</sar-tag>
</template>

可关闭的

通过 closeable 属性添加关闭按钮，点击关闭按钮时会触发 close 事件。

vue lang="ts"

<template>
  <sar-tag theme="primary" closable @close="onClose">标签</sar-tag>
</template>

<script setup lang="ts">
import { toast } from 'sard-uniapp'

const onClose = () => {
  toast('关闭')
}
</script>

vue lang="js"

<template>
  <sar-tag theme="primary" closable @close="onClose">标签</sar-tag>
</template>

<script setup lang="js">
import { toast } from "sard-uniapp";
const onClose = () => {
  toast("\u5173\u95ED");
};
</script>

API

TagProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
theme	主题色	'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'	'primary'
round	圆角按标签	boolean	false
plain	镂空标签	boolean	false
mark	标记标签	boolean | 'left' | 'right'	false
size	标签尺寸	'small' | 'medium' | 'large'	'medium'
color	标签颜色	string	-
text-color	文本颜色	string	-
closable	是否可关闭	boolean	false

TagSlots

插槽	描述	属性
default	自定义默认内容	-

TagEmits

事件	描述	类型
click	点击标签时触发	(event: any) => void
close	点击关闭按钮时触发	(event: any) => void

主题定制

CSS 变量

page,
.sar-portal {
  --sar-tag-line-height: var(--sar-leading-tight);
  --sar-tag-color: var(--sar-white);

  --sar-tag-small-padding: 4rpx 4rpx;
  --sar-tag-small-font-size: var(--sar-text-xs);
  --sar-tag-small-border-radius: var(--sar-rounded-xs);

  --sar-tag-medium-padding: 4rpx 8rpx;
  --sar-tag-medium-font-size: var(--sar-text-sm);
  --sar-tag-medium-border-radius: var(--sar-rounded-sm);

  --sar-tag-large-padding: 4rpx 12rpx;
  --sar-tag-large-font-size: var(--sar-text-base);
  --sar-tag-large-border-radius: var(--sar-rounded);

  --sar-tag-close-margin-left: 8rpx;
}