Tag 标签

基于 BrConfigProvider 实现全局主题配置，支持多状态/多样式变体的企业级标签组件。用于标记和选择。

组件特性

✅ 多状态：支持 default、primary、secondary、success、warning、danger、info 等多种状态。
🎨 多样式变体：支持 solid、soft、outline、subtle 四种视觉风格。
📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl 尺寸规格。
🔄 圆角样式：支持 rounded、rounded-sm、rounded-md、rounded-lg、rounded-xl、rounded-full 圆角样式。
🔵 加粗样式：支持 solid 变体的加粗版本。
✖️ 可关闭：支持 closable 属性添加关闭按钮。
📦 标签组：支持 BrTagGroup 组件管理一组标签。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

最基础的标签展示。

<script setup lang="ts">
import { BrTag } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-wrap gap-2">
    <BrTag>Default</BrTag>
    <BrTag status="primary">Primary</BrTag>
    <BrTag status="success">Success</BrTag>
    <BrTag status="warning">Warning</BrTag>
    <BrTag status="error">Error</BrTag>
    <BrTag status="info">Info</BrTag>
  </div>
</template>

样式变体

提供 solid（实色）、soft（柔和，默认）、outline（线框）三种变体。

<script setup lang="ts">
import { BrTag } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex gap-2">
      <BrTag variant="solid" status="primary">Solid</BrTag>
      <BrTag variant="solid" status="success">Solid</BrTag>
      <BrTag variant="solid" status="error">Solid</BrTag>
    </div>
    <div class="flex gap-2">
      <BrTag variant="soft" status="primary">Soft</BrTag>
      <BrTag variant="soft" status="success">Soft</BrTag>
      <BrTag variant="soft" status="error">Soft</BrTag>
    </div>
    <div class="flex gap-2">
      <BrTag variant="outline" status="primary">Outline</BrTag>
      <BrTag variant="outline" status="success">Outline</BrTag>
      <BrTag variant="outline" status="error">Outline</BrTag>
    </div>
  </div>
</template>

尺寸

支持多种尺寸配置。

<script setup lang="ts">
import { BrTag } from '@breezeui/vue'
</script>

<template>
  <div class="flex items-end gap-2">
    <BrTag size="xs">Extra Small</BrTag>
    <BrTag size="sm">Small</BrTag>
    <BrTag size="md">Medium</BrTag>
    <BrTag size="lg">Large</BrTag>
    <BrTag size="xl">Extra Large</BrTag>
    <BrTag size="2xl">2XL</BrTag>
  </div>
</template>

圆角

支持多种圆角配置。

<script setup lang="ts">
import { BrTag } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-2">
    <BrTag rounded="none">None</BrTag>
    <BrTag rounded="sm">Small</BrTag>
    <BrTag rounded="md">Medium</BrTag>
    <BrTag rounded="lg">Large</BrTag>
    <BrTag rounded="full">Full</BrTag>
  </div>
</template>

字体加粗

通过设置 bold 属性可以使标签字体加粗。

<script setup lang="ts">
import { BrTag } from '@breezeui/vue'
</script>

<template>
  <div class="flex gap-2">
    <BrTag>Normal</BrTag>
    <BrTag bold>Bold</BrTag>
    <BrTag status="primary" bold>Primary Bold</BrTag>
    <BrTag variant="solid" status="success" bold>Solid Bold</BrTag>
  </div>
</template>

可关闭标签

通过设置 closable 属性，标签会显示关闭按钮。点击关闭按钮会触发 close 事件。

<script setup lang="ts">
import { ref } from 'vue'
import { BrTag } from '@breezeui/vue'

const tags = ref([
  { id: 1, name: 'Tag 1', status: 'primary' },
  { id: 2, name: 'Tag 2', status: 'success' },
  { id: 3, name: 'Tag 3', status: 'warning' }
])

const handleClose = (tagToRemove: any) => {
  tags.value = tags.value.filter(tag => tag.id !== tagToRemove.id)
}
</script>

<template>
  <div class="flex gap-2">
    <BrTag 
      v-for="tag in tags" 
      :key="tag.id"
      closable 
      :status="tag.status as any" 
      @close="handleClose(tag)"
    >
      {{ tag.name }}
    </BrTag>
    <span v-if="tags.length === 0" class="text-sm text-muted-foreground cursor-pointer hover:text-primary" @click="tags = [{ id: 1, name: 'Tag 1', status: 'primary' }, { id: 2, name: 'Tag 2', status: 'success' }, { id: 3, name: 'Tag 3', status: 'warning' }]">Reset</span>
  </div>
</template>

标签组与溢出省略

使用 BrTagGroup 可以方便地管理一组标签，支持统一间距和最大显示数量。

<script setup lang="ts">
import { BrTag, BrTagGroup } from '@breezeui/vue'
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- Basic Tag Group -->
    <BrTagGroup gap="md">
      <BrTag>Vue</BrTag>
      <BrTag>React</BrTag>
      <BrTag>Angular</BrTag>
      <BrTag>Svelte</BrTag>
    </BrTagGroup>
    
    <!-- Overflow Ellipsis -->
    <BrTagGroup :max="3" :wrap="false" class="w-[280px]">
      <BrTag>Apple</BrTag>
      <BrTag>Banana</BrTag>
      <BrTag>Orange</BrTag>
      <BrTag>Mango</BrTag>
      <BrTag>Peach</BrTag>
    </BrTagGroup>
  </div>
</template>

全局主题定制

你可以通过 BrConfigProvider 全局配置 Tag 的默认表现，或使用 TailwindCSS 局部覆盖。

<script setup lang="ts">
import { BrTag, BrTagGroup, BrConfigProvider } from '@breezeui/vue'
</script>

<template>
  <BrConfigProvider>
    <div class="p-4 bg-background">
      <BrTagGroup gap="sm">
        <BrTag status="primary">Primary</BrTag>
        <BrTag status="success">Success</BrTag>
        <!-- Local override border radius and background color -->
        <BrTag class="rounded-none bg-blue-500 text-white">Custom</BrTag>
      </BrTagGroup>
    </div>
  </BrConfigProvider>
</template>

API

BrTag Props

属性	说明	类型	默认值
`status`	标签状态	`'default' \| 'primary' \| 'success' \| 'error' \| 'warning' \| 'info'`	`'default'`
`variant`	变体样式	`'solid' \| 'outline' \| 'soft'`	`'soft'`
`size`	尺寸大小，支持受 ConfigProvider 全局控制	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`
`rounded`	圆角大小	`'none' \| 'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`
`bold`	是否字体加粗	`boolean`	`false`
`closable`	是否可关闭，启用后会显示关闭图标	`boolean`	`false`
`disabled`	是否禁用	`boolean`	`false`
`as`	渲染为指定的标签	`string`	`'div'`

BrTag Events

事件名	说明	回调参数
`click`	点击标签时触发	`(event: MouseEvent) => void`
`close`	点击关闭按钮时触发	`(event: MouseEvent) => void`

BrTag Slots

插槽名	说明
`default`	自定义标签内容
`icon`	前置图标插槽
`closeIcon`	自定义关闭图标插槽

BrTagGroup Props

属性	说明	类型	默认值
`gap`	标签组间距	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'sm'`
`wrap`	是否允许换行	`boolean`	`true`
`max`	最大显示数量，超出时显示 `+N`	`number`	`-`

BrTagClose Props

属性	说明	类型	默认值
`class`	自定义类名	`any`	`-`

#Tag 标签

#组件特性

#基础用法

#样式变体

#尺寸

#圆角

#字体加粗

#可关闭标签

#标签组与溢出省略

#全局主题定制

#API

#BrTag Props

#BrTag Events

#BrTag Slots

#BrTagGroup Props

#BrTagClose Props