Tag 标签

用于标记和选择。

基础用法

由 type 属性来选择 Tag 的类型。

标签一标签二标签三标签四标签五

<script setup>
import Tag from '@/vue/components/Tag/Tag.vue'
</script>
<template>
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <Tag type="primary">标签一</Tag>
    <Tag type="success">标签二</Tag>
    <Tag type="info">标签三</Tag>
    <Tag type="warning">标签四</Tag>
    <Tag type="danger">标签五</Tag>
  </div>
</template>

可关闭标签

设置 closable 属性可以定义一个标签是否可移除。

标签一标签二标签三标签四标签五

<script setup>
import Tag from '@/vue/components/Tag/Tag.vue'
</script>
<template>
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <Tag type="primary" closable>标签一</Tag>
    <Tag type="success" closable>标签二</Tag>
    <Tag type="warning" closable>标签三</Tag>
    <Tag type="danger" closable>标签四</Tag>
    <Tag type="info" closable>标签五</Tag>
  </div>
</template>

不同尺寸

Tag 组件提供三种尺寸，通过 size 属性来配置。

大标签默认标签小标签

<script setup>
import Tag from '@/vue/components/Tag/Tag.vue'
</script>
<template>
  <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
    <Tag type="primary" size="large">大标签</Tag>
    <Tag type="primary">默认标签</Tag>
    <Tag type="primary" size="small">小标签</Tag>
  </div>
</template>

主题

Tag 组件提供了三种主题：dark、light（默认）和 plain。

DarkDarkDarkDarkDark

LightLightLightLightLight

PlainPlainPlainPlainPlain

<script setup>
import Tag from '@/vue/components/Tag/Tag.vue'
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div style="display: flex; gap: 10px;">
      <Tag type="primary" effect="dark">Dark</Tag>
      <Tag type="success" effect="dark">Dark</Tag>
      <Tag type="warning" effect="dark">Dark</Tag>
      <Tag type="danger" effect="dark">Dark</Tag>
      <Tag type="info" effect="dark">Dark</Tag>
    </div>
    <div style="display: flex; gap: 10px;">
      <Tag type="primary" effect="light">Light</Tag>
      <Tag type="success" effect="light">Light</Tag>
      <Tag type="warning" effect="light">Light</Tag>
      <Tag type="danger" effect="light">Light</Tag>
      <Tag type="info" effect="light">Light</Tag>
    </div>
    <div style="display: flex; gap: 10px;">
      <Tag type="primary" effect="plain">Plain</Tag>
      <Tag type="success" effect="plain">Plain</Tag>
      <Tag type="warning" effect="plain">Plain</Tag>
      <Tag type="danger" effect="plain">Plain</Tag>
      <Tag type="info" effect="plain">Plain</Tag>
    </div>
  </div>
</template>

圆形标签

设置 round 属性可以使 Tag 变为圆形。

标签一标签二标签三标签四标签五

<script setup>
import Tag from '@/vue/components/Tag/Tag.vue'
</script>
<template>
  <div style="display: flex; gap: 10px; flex-wrap: wrap;">
    <Tag type="primary" round>标签一</Tag>
    <Tag type="success" round>标签二</Tag>
    <Tag type="warning" round>标签三</Tag>
    <Tag type="danger" round>标签四</Tag>
    <Tag type="info" round>标签五</Tag>
  </div>
</template>

React 用法

import { Tag } from '@bobocn/element/react'
import '@bobocn/element/style.css'

// 基础用法
function App() {
  return (
    <div>
      <Tag type="primary">标签一</Tag>
      <Tag type="success">标签二</Tag>
      <Tag type="warning">标签三</Tag>
      <Tag type="danger">标签四</Tag>
      <Tag type="info">标签五</Tag>
    </div>
  )
}

// 可关闭
<Tag type="primary" closable onClose={() => console.log('closed')}>
  可关闭标签
</Tag>

// 圆形 + Dark 主题
<Tag type="success" round effect="dark">圆形标签</Tag>

API

属性 (Attributes)

属性名	说明	类型	默认值
type	标签类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	'primary'
size	标签尺寸	'large' | 'default' | 'small'	'default'
effect	主题	'dark' | 'light' | 'plain'	'light'
closable	是否可关闭	boolean	false
round	是否圆形	boolean	false
color	自定义背景色	string	—

事件 (Events)

事件名	说明	回调参数
close	关闭时触发	—
click	点击时触发	—

插槽 (Slots)

插槽名	说明
default	标签内容