shelyn
shelyn
  • 发布:2015-05-19 23:24
  • 更新:2017-04-09 17:34
  • 阅读:5184

checkbox和radio的图标太接近了

分类:MUI

checkbox和radio的图标太接近了,应该radio是圆的checkbox是方的,这样才好区分嘛。

如上图所示,如果不做说明区分,未选择状态下根本区分不开radio和checkbox。
及时选中状态,区分度也不明显啊。
请问官方能够优化这个问题吗?或者提供mui.ttf文件的svg源文件我自己来修改。

2015-05-19 23:24 负责人:无 分享
已邀请:
skysowe

skysowe

圆形的复选框在未被选中的时候,确实跟单选按钮太像了,,,自己动手,丰衣足食:

                            <li class="mui-table-view-cell">  
                                    <div class="mui-checkbox mui-left mui-pull-left">  
                                        <label>全选</label>  
                                        <input name="checkbox1" type="checkbox" />  
                                    </div>  
                                    <div class="mui-pull-right">  
                                        <button class="mui-btn mui-btn-primary" type="button" onclick="return false;">上传</button>&nbsp;&nbsp;  
                                    </div>  
                            </li>
            .mui-checkbox input[type=checkbox]:before {  
                content: '\e413';  
            }             
            .mui-checkbox input[type=checkbox]:checked:before {  
                content: '\e443';  
            }     
            .mui-checkbox.mui-left input[type=checkbox]{  
                left: 0px;  
            }  
            .mui-checkbox.mui-left label, .mui-radio.mui-left label {  
                margin-top: 10px;  
                padding-right: 15px;  
                padding-left: 30px;  
            }  
            .mui-table-view-cell {  
                position: relative;  
                overflow: hidden;  
                padding: 11px 15px;  
                -webkit-touch-callout: none;  
            }

  • 1***@qq.com

    你那个未上传,已上传 全部如何在一行显示 的呢

    2018-01-19 22:28

  • skysowe

    <div class="mui-input-row">

    <div class="mui-radio mui-pull-left">

    <label>未上传</label>

    <input name="radio1" type="radio" checked="checked" />

    </div>

    <div class="mui-radio mui-pull-left">

    <label>已上传</label>

    <input name="radio1" type="radio" />

    </div>

    <div class="mui-radio mui-pull-left">

    <label>全部</label>

    <input name="radio1" type="radio" />

    </div>

    </div>

    2018-01-27 09:04

  • l***@163.com

    原来已经有e443 e413图标啊,我还费劲的自己找了扩展字体。感谢分享!

    2018-09-06 22:44

DCloud_heavensoft

DCloud_heavensoft

方形checkbox还是有意义的。
radio在手机上不常用,通常用swich替代,在示例中地位弱化下。
@DCloud_MUI_CHB

shelyn

shelyn (作者)

感谢官方2位同学的回复。
@DCloud_MUI_CHB 目前来说,只是希望有一个方形的checkbox,为这个去增加一个字体文件感觉有单臃肿。
@DCloud_heavensoft 我也觉得方形的checkbox还是有用。

我这里的情况是,做一套题库系统,有的题是单选,有的题是多选,所以希望能够直观的看到单选题和多选题的区别。

DCloud_UNI_CHB

DCloud_UNI_CHB

mui的ui设计理念:以iOS 7为基础,借鉴部分Android系统特有控件;

之前我们同时提供了圆形的checkbox和方形的checkbox,后来发现iOS上的圆形checkbox,大家都已习惯,因此就删掉了方形的checkbox;

你可以通过自定义图标的方式,覆盖checkbox;参考:mui如何增加自定义icon图标

目前mui使用的svg尚未整理,后续整理完毕后,可以开源出去。

DCloud_UNI_CHB

DCloud_UNI_CHB

只有二选一的情况,可以使用swich替代;多选一时,无法使用switch;

手机上更多的单选样式是:列表样式的单选,mui v1.6.0已提供,如下:
image

该问题目前已经被锁定, 无法添加新回复