Switch 开关

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

基础用法

Airplane Mode

Example

禁用状态

设置 disabled 属性以禁用开关。

Example

加载状态

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

Example

带标签

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

Enable Notifications

Example

尺寸

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

xs

sm

md (default)

lg

xl

2xl

Example

自定义滑块内容

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

Use icons as thumb content

Use text as thumb content

Example

主题定制

全局定制 (BrConfigProvider)

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

ConfigProvider Theme

Emerald Primary

Tailwind Class Override

Blue Override

Example

局部定制 (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	自定义滑块内容