Switch 开关

允许用户在选中和未选中之间切换的控件。

组件特性

🔄 切换控制：允许用户在选中和未选中状态之间切换。
📏 多种尺寸：支持 sm、md、lg 尺寸规格。
⏳ 加载状态：支持 loading 属性显示加载动画。
❌ 禁用状态：支持 disabled 属性。
📝 状态文本：支持通过 checked-text 和 unchecked-text 属性自定义状态文本。
🎨 自定义滑块：通过 thumb 插槽支持自定义滑块内容。
🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

基础用法

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

const checked = ref(false)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch id="airplane-mode" v-model:checked="checked" />
    <label for="airplane-mode" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
      Airplane Mode
    </label>
  </div>
</template>

禁用状态

设置 disabled 属性以禁用开关。

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

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch disabled />
    <BrSwitch disabled checked />
  </div>
</template>

加载状态

设置 loading 属性以显示加载状态。加载时开关处于禁用状态。

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

const checked = ref(true)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch v-model:checked="checked" :loading="true" />
  </div>
</template>

带标签

使用 BrLabel 将标签与开关关联。

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

const checked = ref(false)
</script>

<template>
  <div class="flex items-center space-x-2">
    <BrSwitch id="notifications" v-model:checked="checked" />
    <BrLabel html-for="notifications">Enable Notifications</BrLabel>
  </div>
</template>

尺寸

使用 size 属性来控制开关的大小。

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

const checked = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="xs" />
      <span class="text-sm">xs</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="sm" />
      <span class="text-sm">sm</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="md" />
      <span class="text-sm">md (default)</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="lg" />
      <span class="text-sm">lg</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="xl" />
      <span class="text-sm">xl</span>
    </div>
    <div class="flex items-center gap-4">
      <BrSwitch v-model:checked="checked" size="2xl" />
      <span class="text-sm">2xl</span>
    </div>
  </div>
</template>

自定义滑块内容

你可以使用 thumb 插槽自定义滑块内的内容，例如添加图标或文本。

<script setup lang="ts">
import { ref } from 'vue'
import { BrSwitch } from '@breezeui/vue'
import { Check, X } from 'lucide-vue-next'

const checked1 = ref(false)
const checked2 = ref(true)
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center space-x-2">
      <BrSwitch id="icon-switch" v-model:checked="checked1">
        <template #thumb>
          <Check v-if="checked1" class="w-3 h-3 text-primary" />
          <X v-else class="w-3 h-3 text-muted-foreground" />
        </template>
      </BrSwitch>
      <label for="icon-switch" class="text-sm font-medium leading-none">
        Use icons as thumb content
      </label>
    </div>

    <div class="flex items-center space-x-2">
      <BrSwitch id="text-switch" v-model:checked="checked2">
        <template #thumb>
          <span class="text-[10px] font-bold">{{ checked2 ? 'ON' : 'OFF' }}</span>
        </template>
      </BrSwitch>
      <label for="text-switch" class="text-sm font-medium leading-none">
        Use text as thumb content
      </label>
    </div>
  </div>
</template>

主题定制

全局定制 (BrConfigProvider)

你可以通过 BrConfigProvider 的 theme 属性覆盖默认 CSS 变量。

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

const checked1 = ref(true)
const checked2 = ref(true)

const customTheme = {
  primary: '#10b981', // emerald-500
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <!-- Global Theme Config -->
    <div class="space-y-2">
      <h4 class="text-sm font-medium">ConfigProvider Theme</h4>
      <BrConfigProvider :theme="customTheme">
        <div class="flex items-center space-x-2">
          <BrSwitch v-model:checked="checked1" />
          <span class="text-sm text-muted-foreground">Emerald Primary</span>
        </div>
      </BrConfigProvider>
    </div>

    <!-- Local Style Override -->
    <div class="space-y-2">
      <h4 class="text-sm font-medium">Tailwind Class Override</h4>
      <div class="flex items-center space-x-2">
        <BrSwitch 
          v-model:checked="checked2"
          class="data-[state=checked]:bg-blue-600" 
        />
        <span class="text-sm text-muted-foreground">Blue Override</span>
      </div>
    </div>
  </div>
</template>

局部定制 (TailwindCSS)

你可以直接使用 TailwindCSS 工具类覆盖样式。

<template>
  <BrSwitch class="data-[state=checked]:bg-indigo-500" />
</template>

API

Props

属性名	类型	默认值	说明
modelValue	`boolean`	`false`	开关的选中状态
defaultChecked	`boolean`	`false`	使用非受控模式时的默认选中状态
disabled	`boolean`	`false`	是否禁用开关
loading	`boolean`	`false`	是否显示加载状态
size	`'sm' \| 'md' \| 'lg'`	`'md'`	开关的尺寸
name	`string`	-	开关的名称
id	`string`	-	开关的 id
required	`boolean`	`false`	是否必填
value	`string`	`'on'`	开关的值
checkedText	`string`	-	选中时显示的文本
uncheckedText	`string`	-	未选中时显示的文本
error	`boolean`	`false`	是否有验证错误

Emits

事件名	说明	参数
update:modelValue	当选中状态改变时触发	`(value: boolean)`
update:checked	当选中状态改变时触发 (Radix 兼容)	`(value: boolean)`

Slots

插槽名	说明
thumb	自定义滑块内容

#Switch 开关

#组件特性

#基础用法

#禁用状态

#加载状态

#带标签

#尺寸

#自定义滑块内容

#主题定制

#全局定制 (BrConfigProvider)

#局部定制 (TailwindCSS)

#API

#Props

#Emits

#Slots