uni-app设置单选radio、多选checkbox大小、颜色
uni-app
2019-09-28 23:00:50
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属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | <checkbox> 标识,选中时触发 <checkbox-group> 的 change 事件,并携带 <checkbox> 的 value。 | |
disabled | Boolean | false | 是否禁用 |
checked | Boolean | false | 当前是否选中,可用来设置默认选中 |
color | Color | checkbox的颜色,同css的color |
radio属性说明:
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
value | String | <radio> 标识。当该 <radio> 选中时,<radio-group> 的 change 事件会携带 <radio> 的 value | |
checked | Boolean | false | 当前是否选中 |
disabled | Boolean | false | 是否禁用 |
color | Color | radio的颜色,同css的color |
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
881篇文章
11373人已阅读