Radio checked

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

扩展对勾Radio checked

yo-checked为单选提供了 [圆点(circle) | 对勾(tick)] 2种形态的选中状态:

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

全局扩展方式:

@include yo-checked(test,tick);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-checked(test,tick); }

使用方法:

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

Checkbox checked

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

扩展对勾Checkbox checked

yo-checked为多选提供了 [圆点(circle) | 对勾(tick)] 2种形态的选中状态:

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

全局扩展方式:

@include yo-checked(test,tick);

使用方法:

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

局部扩展方式:

.xxx{ @include yo-checked(test,tick); }

使用方法:

<div class="xxx"> <input type="checkbox" name="test" class="yo-checked yo-checked-test" /> </div>
@include yo-checked(
    $name:default, //{default | String} checked名称
    $type:default, //{default | String} 定义checked标记类型,可选值:[circle | tick]
    $size:default, //{default | Length} 定义checked标记大小
    $is-border:default, //{default | Boolen} 定义checked是否需要边框(即初始默认状态)
    $bordercolor:default, //{default | Color} 定义checked边框色
    $bgcolor:default, //{default | Color} 定义checked背景色
    $on-color:default, //{default | Color} 定义checked激活标记色
    $disabled-color:default //{default | Color} 定义checked禁用标记色
)