Label 标签

渲染与控件关联的可访问标签。基于 Radix Vue Label，支持通过 BrConfigProvider 进行全局主题配置。

基础用法

Accept terms and conditions

Example

表单关联

Label 组件通过 for 属性与表单控件关联。点击标签会自动聚焦对应的控件。

Email address

Example

必填指示器

使用 required 属性在标签旁显示必填指示器（红色星号）。

Username*

Example

禁用状态

使用 disabled 属性将标签设置为禁用状态，降低透明度并更改光标样式。

Unavailable option

Example

尺寸

使用 size 属性控制标签的大小。

Extra Small Label(10px)

Small Label(12px)

Default Label(14px)

Medium Label(14px)

Large Label(16px)

Extra Large Label(18px)

2X Large Label(20px)

Example

主题定制

全局配置 (BrConfigProvider)

你可以通过 BrConfigProvider 全局配置 Label 的基础样式，如字体颜色和圆角。

<script setup>
import { BrConfigProvider, BrLabel } from '@breezeui/vue'

const theme = {
  primary: '#16A34A', // 修改主色
  radius: 0.75, // 修改圆角
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrLabel>自定义主题标签</BrLabel>
  </BrConfigProvider>
</template>

局部覆盖 (TailwindCSS)

你可以通过 class 属性直接使用 TailwindCSS 类覆盖默认样式。

<template>
  <BrLabel class="text-blue-500 font-bold uppercase">
    自定义样式标签
  </BrLabel>
</template>

暗色模式

BrLabel 支持通过 BrConfigProvider 或 dark 类切换暗色模式。

<script setup>
import { ref } from 'vue'
import { BrConfigProvider, BrLabel } from '@breezeui/vue'

const isDark = ref(true)
const theme = {
  background: '#020817',
  foreground: '#F8FAFC',
}
</script>

<template>
  <div :class="{ dark: isDark }">
    <BrConfigProvider :theme="theme">
      <div class="bg-background text-foreground p-4">
        <BrLabel>暗色模式标签</BrLabel>
      </div>
    </BrConfigProvider>
  </div>
</template>

API

Props

属性名	类型	默认值	说明
as	string | Component	'label'	渲染的 HTML 标签或组件
for	string	-	关联表单控件的 ID
size	'sm' | 'default' | 'lg'	'default'	标签尺寸
align	'left' | 'center' | 'right'	'left'	文本对齐方式
required	boolean	false	是否显示必填指示器
disabled	boolean	false	是否禁用标签
class	string	-	自定义类名

Slots

插槽名	说明
default	标签内容