uni-app设置单选radio、多选checkbox大小、颜色

uni-app设置单选大小、颜色值及多选checkbox大小、颜色值设置方法:

效果如图:


(从图中可以看出前面两个大尺寸的为原生尺寸,但该尺寸在具体使用中显然不符合设计图,这时候我们要如何处理才能做出我们想要的尺寸大小呢?)

先看代码:

<template>
<view class="agreement">
<radio-group>
<label>
<radio color="#0ea684" value="1" checked=""/>是</label>
<label class="radio">
<radio color="#0ea684" value="1" />是</label>
<label class="radio">
<radio color="#0ea684" value="0" />否</label>
</radio-group>
<checkbox-group>
<label>
<checkbox color="#0ea684" value="cb" checked="true" />选中
</label>
<label class="checkbox">
<checkbox color="#0ea684" value="cb" checked="true" />选中
</label>
<label class="checkbox">
<checkbox value="cb" />未选中
</label>
</checkbox-group>
</view>
</template>
<script>
</script>

<style lang='scss'>
.radio radio,.checkbox checkbox{
transform: scale(0.7);
}
</style>

代码解析:相信大家已经从上方代码看出了CSS3属性transform,实际对于尺寸的控制就是利用的CSS3属性scale来进行大小设置的!

颜色设置:在官网中有介绍到通过在单选、多选上设置color对应的属性值即可改变颜色值。

checkbox属性说明:

属性名类型默认值说明
valueString<checkbox> 标识,选中时触发 <checkbox-group> 的 change 事件,并携带 <checkbox> 的 value。
disabledBooleanfalse是否禁用
checkedBooleanfalse当前是否选中,可用来设置默认选中
colorColorcheckbox的颜色,同css的color

   radio属性说明:

属性名类型默认值说明
valueString<radio> 标识。当该 <radio> 选中时,<radio-group> 的 change 事件会携带 <radio> 的 value
checkedBooleanfalse当前是否选中
disabledBooleanfalse是否禁用
colorColorradio的颜色,同css的color
以上便是关于radio/checked的基础使用!
六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!