Radio checked

默认

扩展边框

扩展背景

扩展圆角

对勾

扩展边框

扩展背景

扩展圆角

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

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

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

全局扩展方式:

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

使用方法:

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

局部扩展方式:

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

使用方法:

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

Checkbox checked

默认

扩展边框

扩展背景

扩展圆角

对勾

扩展边框

扩展背景

扩展圆角

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

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

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

全局扩展方式:

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

使用方法:

<input type="checkbox" name="project" class="yo-checked yo-checked-test" />

局部扩展方式:

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

使用方法:

<div class="xxx"> <input type="checkbox" name="project" class="yo-checked yo-checked-test" /> </div>
@include yo-checked(
    $name:default, //{default | String} 定义名称
    $type:default, //{default | String} 定义标记类型,可选值:[circle | tick]
    $size:default, //{default | Length} 定义标记大小
    $bordercolor:default, //{default | Color} 定义边框色
    $bgcolor:default, //{default | Color} 定义背景色
    $on-bordercolor:default, //{default | Color} 定义激活时边框色
    $on-bgcolor:default, //{default | Color} 定义激活时背景色
    $on-color:default, //{default | Color} 定义激活时标记色
    $radius:default //{default | Length} 定义圆角大小
)