• 某些情况需要用到开/关两种状态的触发元素实现用户场景，需要用到开关组件；
    在 .switch 叠加 .checked 将开关切换为打开样式。
  • 和 checkbox 的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。
  • 开关组件有固定的 Dom 结构，详细请参考代码示范。
实例
            
<span class="switch">
  <span class="switch-inner"></span>
</span>
  • BrickPlus 允许开关组件能够使用色彩辨别状态以外的方法去辨识开关激活与否，如在 .switch 层引用 .with-icon 或者 .with-text 工具类，使开关带有状态识的图标或者文字。
实例
典型开关
带有图标的开关 .with-icon
带有文字的开关 .with-text
            
<span class="switch with-icon / text">
  <span class="switch-inner"></span>
</span>

不可用状态

  • 在 .switch 叠加 .disabled 将开关切换为不可用样式。
实例>
关闭后不可用 开启后不可用
典型开关
带有图标的开关
带有文字的开关 
            
<span class="switch disabled">
  <span class="switch-inner"></span>
</span>
  • BrickPlus 暂时提供四种种开关尺寸以适应不同的UI设计，其中三种非典型尺寸需要通过在 .switch 这一层引用 .size-s / l / xl 工具类，改变开关的尺寸样式。
  • .size-s 类并不支持和 .with-text / icon 类一起使用，如要更改的开关的辨识方法，可以给开关加载 tooltips 工具。
实例
小码尺寸 .size-s
默认尺寸
大码尺寸 .size-l
加大码尺寸 .size-xl
            
<span class="switch size-s / l / xl">
  <span class="switch-inner"></span>
</span>