Tag 标签

用于标记和分类。

基础用法

基础的标签用法, 可以通过type属性设置不同的标签类型。

<template>
  <div class="tag-demo">
    <px-tag type="primary">Primary</px-tag>
    <px-tag type="success">Success</px-tag>
    <px-tag type="warning">Warning</px-tag>
    <px-tag type="danger">Danger</px-tag>
    <px-tag type="info">Info</px-tag>
    <px-tag type="sakura">Sakura</px-tag>
    <px-tag>
      <px-icon icon="badge-check-solid" color="#ff6f5c" />
    </px-tag>
  </div>
</template>

<style scoped>
.tag-demo .px-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

可关闭标签

设置closable属性可以定义一个标签是否可关闭, 关闭时会触发close事件。

<template>
  <div class="tag-demo">
    <px-tag type="primary" closable @close="handleClose">Primary</px-tag>
    <px-tag type="success" closable @close="handleClose">Success</px-tag>
    <px-tag type="warning" closable @close="handleClose">Warning</px-tag>
    <px-tag type="danger" closable @close="handleClose">Danger</px-tag>
    <px-tag type="sakura" closable @close="handleClose">Sakura</px-tag>
  </div>
</template>

<script setup>
const handleClose = () => {
  console.log('Tag closed')
}
</script>

<style scoped>
.tag-demo .px-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

不同尺寸

Tag组件提供了三种不同尺寸, 用于不同场景。

<template>
  <div class="tag-demo">
    <div class="mb-10">
      <px-tag
        v-for="item in items"
        :key="item.type"
        :type="item.type"
        size="small"
        >Small</px-tag
      >
    </div>
    <div class="mb-10">
      <px-tag v-for="item in items" :key="item.type" :type="item.type"
        >Default</px-tag
      >
    </div>
    <div>
      <px-tag
        v-for="item in items"
        :key="item.type"
        :type="item.type"
        size="large"
        >Large</px-tag
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@mmt817/pixel-ui'

type Item = { type: TagProps['type'] }

const items = ref<Array<Item>>([
  { type: 'primary' },
  { type: 'success' },
  { type: 'info' },
  { type: 'warning' },
  { type: 'danger' },
  { type: 'sakura' }
])
</script>

<style scoped>
.tag-demo .px-tag {
  margin-right: 4px;
}
</style>

主题

Tag 组件提供了三种主题：light (亮色), dark (暗色), plain (描边)

通过设置 effect 属性来改变主题, 默认为 light。

<template>
  <div class="flex gap-2">
    <span class="w-80">Dark</span>
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="dark"
    >
      {{ item.label }}
    </px-tag>
  </div>
  <div class="flex gap-2 mt-10">
    <span class="w-80">Light</span>
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="light"
    >
      {{ item.label }}
    </px-tag>
  </div>
  <div class="flex gap-2 mt-10">
    <span class="w-80">Plain</span>
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      effect="plain"
    >
      {{ item.label }}
    </px-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@mmt817/pixel-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' },
  { type: 'sakura', label: 'Tag 6' }
])
</script>

圆角标签

Tag 提供了圆角边框, 通过设置 round, circle, chubby 属性来改变标签的形状, 默认为 false。

<template>
  <div class="flex gap-2 mb-20" v-for="effect in effects" :key="effect">
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      :effect="effect"
      round
    >
      {{ item.label }}
    </px-tag>
  </div>
  <div class="flex gap-2 mb-20" v-for="effect in effects" :key="effect">
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      :effect="effect"
      circle
    >
      {{ item.label }}
    </px-tag>
  </div>
  <div class="flex gap-2 mb-20" v-for="effect in effects" :key="effect">
    <px-tag
      v-for="item in items"
      :key="item.label"
      :type="item.type"
      :effect="effect"
      chubby
    >
      {{ item.label }}
    </px-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@mmt817/pixel-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'Tag 1' },
  { type: 'success', label: 'Tag 2' },
  { type: 'info', label: 'Tag 3' },
  { type: 'warning', label: 'Tag 4' },
  { type: 'danger', label: 'Tag 5' }
])

const effects = ref<Array<TagProps['effect']>>(['dark', 'light', 'plain'])
</script>

禁用状态

可以使用disabled属性来定义标签是否被禁用。

<template>
  <div class="tag-demo">
    <div class="mb-10">
      <px-tag
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        disabled
      >
        {{ item.label }}
      </px-tag>
    </div>
    <div class="mb-10">
      <px-tag
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        disabled
        effect="dark"
      >
        {{ item.label }}
      </px-tag>
    </div>
    <div class="mb-10">
      <px-tag
        v-for="item in items"
        :key="item.label"
        :type="item.type"
        disabled
        effect="dark"
        closable
      >
        {{ item.label }}
      </px-tag>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TagProps } from '@mmt817/pixel-ui'

type Item = { type: TagProps['type']; label: string }

const items = ref<Array<Item>>([
  { type: 'primary', label: 'primary' },
  { type: 'success', label: 'success' },
  { type: 'info', label: 'info' },
  { type: 'warning', label: 'warning' },
  { type: 'danger', label: 'danger' },
  { type: 'sakura', label: 'sakura' }
])
</script>

<style scoped>
.tag-demo .px-tag {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style>

自定义颜色

可以通过color属性设置标签的自定义颜色。

<template>
  <div class="tag-demo">
    <div class="mb-10">
      <px-tag color="#7B66FF">#7B66FF</px-tag>
      <px-tag color="#FF66D8">#FF66D8</px-tag>
      <px-tag color="#66BFFF">#66BFFF</px-tag>
      <px-tag color="#66FFAD" closable>#66FFAD</px-tag>
    </div>
    <div>
      <px-tag color="#7B66FF" effect="plain">#7B66FF</px-tag>
      <px-tag color="#FF66D8" effect="plain">#FF66D8</px-tag>
      <px-tag color="#66BFFF" effect="plain">#66BFFF</px-tag>
      <px-tag color="#66FFAD" effect="plain" closable>#66FFAD</px-tag>
    </div>
  </div>
</template>

<style scoped>
.tag-demo .px-tag {
  margin-right: 10px;
}
</style>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

Tag API

Props

Name	Description	Type	Default
size	Tag 的尺寸	`enum`	default
type	Tag 的类型	`enum`	primary
closable	是否可关闭	`boolean`	false
color	自定义颜色	`string`	-
effect	Tag 的主题	`enum`	filled
disabled	是否禁用	`boolean`	false
round	是否圆角	`boolean`	false
circle	是否圆型	`boolean`	false
chubby	更圆的圆角	`boolean`	false

Events

Name	Description	Type
close	Close event	`function`
click	Click event	`function`

Slots

Name	Description
default	默认插槽

Tag 标签 ​

基础用法 ​

可关闭标签 ​

不同尺寸 ​

主题 ​

圆角标签 ​

禁用状态 ​

自定义颜色 ​

API_Table插件测试 ​

​ Tag API

​ Props

​ Events

​ Slots