Switch

Switch component with multiple styles including icons and labels

案例展示

开关在实际场景中的使用示例

基础开关

设置开关

Notification Settings

Receive email alerts for important updates

Receive instant push messages

Receive SMS alerts (may incur charges)

表单中的开关

Privacy Settings

深色模式切换

状态

开关的不同状态

Off
On
Disabled Off
Disabled On

自定义尺寸

通过 className 可以调整开关大小

Small
Default
Large

特殊形态

不同风格的开关变体

深浅模式切换

带背景动画

图标滑块

图标开关

音量

WiFi

通知

可见性

锁定

带标签开关

ON / OFF

Yes / No

On / Off

方形开关 (Zine Mark 风格)

默认

选中

复选框风格

Accept Terms of Service
Subscribe to Newsletter

颜色指示开关

红/绿

选中状态

蓝/灰

应用场景

特殊形态开关在实际场景中的使用

设置面板

System Settings

Appearance
Push Notifications
Sound Effects
Auto Sync

权限控制面板

Access Permissions

Read
Write
Delete
Share