BreezeUI
  • 简体中文

    • Radio 单选框

    一组可检查的按钮（称为单选按钮），一次只能选中其中一个。基于 BrConfigProvider 进行全局主题配置。

    组件特性

    • 🎨 主题配置：基于 BrConfigProvider 实现全局主题配置，支持颜色、圆角、阴影等 tokens。
    • 📏 多种尺寸：支持 xs、sm、md（默认）、lg、xl、2xl 多种尺寸规格。
    • ❌ 禁用状态：支持 disabled 属性禁用单个选项或整组。
    • 📐 布局选项：支持 orientation 属性控制水平或垂直排列。
    • 🌗 暗黑模式：自动适配暗黑模式。
    • ♿️ 无障碍：内置 ARIA 属性，支持键盘导航。

    基础用法

    最基本的单选按钮用法，通常与 BrRadioGroup 一起使用。

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

const value = ref('option-1')
</script>

<template>
  <BrRadioGroup v-model="value">
    <BrRadio id="r1" value="option-1" label="Default" />
    <BrRadio id="r2" value="option-2" label="Comfortable" />
    <BrRadio id="r3" value="option-3" label="Compact" />
  </BrRadioGroup>
</template>

    禁用状态

    设置 disabled 属性以禁用单选按钮。

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

const value = ref('option-2')
</script>

<template>
  <BrRadioGroup v-model="value">
    <BrRadio id="d1" value="option-1" label="Option One" />
    <BrRadio id="d2" value="option-2" label="Option Two (Disabled)" disabled />
    <BrRadio id="d3" value="option-3" label="Option Three" />
  </BrRadioGroup>
</template>

    尺寸

    我们提供了一组默认尺寸。你可以通过 size 属性控制单选按钮的大小。支持 xs, sm, md (默认), lg, xl, 2xl。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup, BrLabel } from '@breezeui/vue'

const value = ref('default')
</script>

<template>
  <div class="space-y-6">
    <!-- Small Sizes -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-xs" value="xs" size="xs" label="Extra Small (xs)" />
          <BrRadio id="r-sm" value="sm" size="sm" label="Small (sm)" />
        </BrRadioGroup>
      </div>
    </div>

    <!-- Default/Medium Size -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
           <BrRadio id="r-def" value="default" size="default" label="Default" />
           <BrRadio id="r-md" value="md" size="md" label="Medium (md)" />
        </BrRadioGroup>
      </div>
    </div>

    <!-- Large Sizes -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-lg" value="lg" size="lg" label="Large (lg)" />
          <BrRadio id="r-xl" value="xl" size="xl" label="Extra Large (xl)" />
        </BrRadioGroup>
      </div>
    </div>
    
     <!-- Huge Size -->
    <div class="space-y-3">
      <div class="flex items-center space-x-2">
        <BrRadioGroup v-model="value" orientation="horizontal">
          <BrRadio id="r-2xl" value="2xl" size="2xl" label="2x Large (2xl)" />
        </BrRadioGroup>
      </div>
    </div>
  </div>
</template>

    水平布局

    设置 orientation="horizontal" 属性以水平排列单选组。

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

const value = ref('compact')
</script>

<template>
  <BrRadioGroup v-model="value" orientation="horizontal">
    <BrRadio id="h1" value="default" label="Default" />
    <BrRadio id="h2" value="comfortable" label="Comfortable" />
    <BrRadio id="h3" value="compact" label="Compact" />
  </BrRadioGroup>
</template>

    主题定制

    全局定制 (BrConfigProvider)

    你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量，以自定义颜色、圆角等。

    <script setup lang="ts">
import { ref } from 'vue'
import { BrRadio, BrRadioGroup, BrConfigProvider } from '@breezeui/vue'

const value = ref('light')

const theme = {
  primary: '262.1 83.3% 57.8%', // Violet
  radius: '0.75rem',
}
</script>

<template>
  <div class="space-y-4">
    <BrConfigProvider :theme="theme">
      <div class="p-4 border rounded-lg bg-card text-card-foreground shadow-sm">
        <h3 class="mb-4 text-sm font-medium leading-none">Custom Theme (Violet)</h3>
        <BrRadioGroup v-model="value">
          <BrRadio id="theme-light" value="light" label="Light Mode" />
          <BrRadio id="theme-dark" value="dark" label="Dark Mode" />
          <BrRadio id="theme-system" value="system" label="System" />
        </BrRadioGroup>
      </div>
    </BrConfigProvider>
  </div>
</template>

    局部定制 (TailwindCSS)

    你可以直接在组件上使用 TailwindCSS 工具类来覆盖样式。

    <template>
  <BrRadio class="border-red-500" label="Error State" />
</template>

    API

    BrRadio

    Props

    属性名类型默认值说明
    valuestring | number | boolean-必填。单选按钮的值
    disabledbooleanfalse是否禁用单选按钮
    labelstringundefined标签文本
    idstringundefined输入框 ID
    namestringundefined输入框名称
    requiredbooleanfalse是否必填
    errorbooleanfalse是否处于错误状态
    size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default''default'单选按钮的尺寸

    Emits

    事件名说明参数
    update:modelValue更新绑定值(value: string | number | boolean)
    change变更事件(value: string | number | boolean)

    Slots

    插槽名说明
    default标签内容

    BrRadioGroup

    Props

    属性名类型默认值说明
    modelValuestring | number | booleanundefined绑定值
    disabledbooleanfalse是否禁用整个组
    orientation'horizontal' | 'vertical''vertical'布局方向
    size'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default''default'组内所有单选按钮的尺寸
    namestringundefined所有单选按钮的 name 属性
    requiredbooleanfalse是否必填
    loopbooleantrue是否循环键盘导航

    Emits

    事件名说明参数
    update:modelValue更新绑定值(value: string | number | boolean)
    change变更事件(value: string | number | boolean)