Switch

  • 常规:
  • list item
  • list item
  • 禁用:
  • list item
  • list item
  • 扩展:
  • list item
  • list item
  • list item
  • list item
  • list item
  • list item
<label class="yo-switch"> <input type="checkbox" /> <div class="track"> <span class="handle"></span> </div> </label>

假设你想要其他颜色,那么你可以这样扩展:

命名及颜色按照各自团队内部的FE/UI规范即可

全局扩展方式:

@include yo-switch( $name: test, $checked-bordercolor: #4a87ee, $checked-bgcolor: #4a87ee );

使用方法:

<label class="yo-switch yo-switch-test"> <input type="checkbox" /> <div class="track"> <span class="handle"></span> </div> </label>

局部扩展方式(关键字参数):

.xxx{ @include yo-switch( $name: test, $checked-bordercolor: #4a87ee, $checked-bgcolor: #4a87ee ); }

使用方法:

<div class="xxx"> <label class="yo-switch yo-switch-test"> <input type="checkbox" /> <div class="track"> <span class="handle"></span> </div> </label> </div>
@include yo-switch(
    $name:default, //{String} switch名称
    $checked-bordercolor:default, //{Color} 定义switch激活边框色
    $checked-bgcolor:default, //{Color} 定义switch激活背景色
    $bordercolor:default, //{Color} 定义switch边框色
    $bgcolor:default, //{Color} 定义switch背景色
    $ball-color:default //{Color} 定义switch滑块色
)