Radio checked

默认

扩展边框

扩展背景

扩展圆角

圆点

扩展边框

扩展背景

扩展圆角

<div class="yo-list"> <label class="item item-active"> <span class="mark flex">Yo</span> <div class="yo-checked"> <input type="radio" name="project" checked /> <span class="type"></span> </div> </label> <label class="item item-active"> <span class="mark flex">Mobile</span> <div class="yo-checked"> <input type="radio" name="project" /> <span class="type"></span> </div> </label> </div>

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

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

全局扩展方式:

@include yo-checked( $name: test, $bordercolor: #4a87ee, $radius: 50% );

使用方法:

<div class="yo-checked yo-checked-test"> <input type="radio" name="project" /> <span class="type"></span> </div>

Checkbox checked

默认

扩展边框

扩展背景

扩展圆角

圆点

扩展边框

扩展背景

扩展圆角

<div class="yo-list"> <label class="item item-active"> <span class="mark flex">Yo</span> <div class="yo-checked"> <input type="radio" name="project" checked /> <span class="type"></span> </div> </label> <label class="item item-active"> <span class="mark flex">Mobile</span> <div class="yo-checked"> <input type="radio" name="project" /> <span class="type"></span> </div> </label> </div>

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

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

全局扩展方式:

@include yo-checked( $name: test, $bordercolor: #4a87ee, $radius: 50% );

使用方法:

<div class="yo-checked yo-checked-test"> <input type="checkbox" name="project" /> <span class="type"></span> </div>
@include yo-checked(
    $name:default, //{String} 定义名称
    $content:default, //{String} 选中时的标记内容
    $size:default, //{Length} 元件大小
    $font-size:default, //{Length} 定义标记大小
    $border-width:default, //{Length} 边框厚度
    $bordercolor:default, //{Color} 定义边框色
    $bgcolor:default, //{Color} 定义背景色
    $color:default, //{Color} 定义标记色
    $on-bordercolor:default, //{Color} 定义激活时边框色
    $on-bgcolor:default, //{Color} 定义激活时背景色
    $on-color:default, //{Color} 定义激活时标记色
    $radius:default //{Length} 定义圆角大小
)