使用Microsoft Fabric UI如何让toggle按钮页面加载时默认处于ON状态

你手动给label加is-selected类会被初始化逻辑清除，是因为Fabric UI的Toggle组件初始化时，会以关联的<input type="checkbox">的checked状态为基准自动同步label的类名，不会读取你预先写在label上的类，可通过以下两种方案实现默认开启效果：

方案1：原生HTML属性配置（最简单） #

直接给<input>标签添加原生checked属性即可，组件初始化时会自动识别这个状态，给对应label加上is-selected类：

<div class="ms-Toggle">
  <span class="ms-Toggle-description">Let apps use my location</span> 
  <!-- 新增checked属性 -->
  <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" checked />
  <label for="demo-toggle-3" class="ms-Toggle-field" tabindex="0">
    <span class="ms-Label ms-Label--off">Off</span> 
    <span class="ms-Label ms-Label--on">On</span> 
  </label>
</div>

无需修改原有JS初始化逻辑，修改后刷新页面即可看到toggle默认处于开启状态。

方案2：JS实例化时传参配置 #

如果需要通过JS动态控制默认状态，也可以在实例化Toggle组件时传入配置参数，指定默认选中：

var ToggleElements = document.querySelectorAll(".ms-Toggle");
for (var i = 0; i < ToggleElements.length; i++) {
  // 第二个参数传入配置，指定默认选中
  new fabric['Toggle'](ToggleElements[i], {
    checked: true
  });
}

该方式也不需要给label手动加is-selected类，组件会自动同步状态。

内容的提问来源于stack exchange，提问作者user16953756