Switch 开关

开关切换组件，用于表示开关两种状态之间的切换。

基础用法

<div class="sa-switch" data-switch></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

默认选中

通过 data-checked="true" 设置开关默认选中状态。

<div class="sa-switch" data-switch data-checked="true"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

禁用状态

通过 data-disabled="true" 设置开关为禁用状态。

<div class="sa-switch" data-switch data-checked="true" data-disabled="true"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

带标签的开关

通过 data-labels 配置开关两端的标签文本，格式为 JSON 字符串 ["关闭状态文本", "开启状态文本"]。

<div class="sa-switch" data-switch data-labels='["关闭", "开启"]'></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

不同尺寸

通过 data-size 配置开关的尺寸。

<!-- 大尺寸 -->
<div class="sa-switch" data-switch data-size="large"></div>

<!-- 默认尺寸 -->
<div class="sa-switch" data-switch data-size="default"></div>

<!-- 小尺寸 -->
<div class="sa-switch" data-switch data-size="small"></div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

API

构造函数参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
options	配置选项	SaSwitchOptions	{}

配置选项

参数	说明	类型	可选值	默认值
checked	是否选中	boolean	-	false
disabled	是否禁用	boolean	-	false
labels	标签文本数组	Array<string>	-	null
size	开关尺寸	string	large / default / small	default
onChange	状态变化回调	function(checked: boolean)	-	-

方法

方法名	说明	参数	返回值
setChecked	设置选中状态	checked: boolean	void
setDisabled	设置禁用状态	disabled: boolean	void
toggle	切换状态	-	void
getChecked	获取当前状态	-	boolean
destroy	销毁实例	-	void

自动初始化属性

属性	说明	类型	默认值
class="sa-switch"	启用自动初始化	-	-
data-switch	启用自动初始化标记	boolean	-
data-checked	是否选中	boolean	false
data-disabled	是否禁用	boolean	false
data-labels	标签文本数组（JSON 字符串）	string	-
data-size	开关尺寸	string	default

示例代码

手动创建实例

const sw = new SaSwitch('#my-switch', {
  checked: false,
  labels: ['关闭', '开启'],
  onChange: (checked) => {
    console.log('开关状态:', checked);
  }
});

// 设置状态
sw.setChecked(true);

// 切换状态
sw.toggle();

// 获取状态
const isChecked = sw.getChecked();

自动初始化

<div class="sa-switch" 
     data-switch 
     data-checked="false"
     data-labels='["关闭", "开启"]'>
</div>

<script>
  SA.init('body');
</script>

加载 SanoUI 组件中...

实际使用场景

场景 1：功能开关

在设置页面中使用开关控制功能启用/禁用。

<div style="max-width: 500px;">
  <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #eee;">
    <div>
      <div style="font-weight: 500;">邮件通知</div>
      <div style="font-size: 0.875rem; color: #999; margin-top: 0.25rem;">接收系统邮件通知</div>
    </div>
    <div class="sa-switch" id="email-notify" data-switch data-checked="true"></div>
  </div>
  
  <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid #eee;">
    <div>
      <div style="font-weight: 500;">短信通知</div>
      <div style="font-size: 0.875rem; color: #999; margin-top: 0.25rem;">接收短信通知</div>
    </div>
    <div class="sa-switch" id="sms-notify" data-switch></div>
  </div>
  
  <div style="display: flex; justify-content: space-between; align-items: center; padding: 1rem;">
    <div>
      <div style="font-weight: 500;">推送通知</div>
      <div style="font-size: 0.875rem; color: #999; margin-top: 0.25rem;">接收推送通知</div>
    </div>
    <div class="sa-switch" id="push-notify" data-switch data-checked="true"></div>
  </div>
</div>

<script>
  SA.init('body');
  
  // 监听开关变化
  document.getElementById('email-notify').addEventListener('change', (e) => {
    console.log('邮件通知:', e.target.checked);
  });
</script>

加载 SanoUI 组件中...