• 常规:
  • 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>

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

@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>
@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滑块色
)