MUI从入门到项目实战（七）（MUI组件之icon、input、list）

一、icon

mui默认提供了手机App开发常用的字体图标

                    

代码如下：

<span class="mui-icon mui-icon-weixin" style="color:green;"></span>
<span class="mui-icon mui-icon-pengyouquan" style="color:green;"></span>
<span class="mui-icon mui-icon-qq" style="color:green;"></span>
<span class="mui-icon mui-icon-videocam" style="color:green;"></span>
<span class="mui-icon mui-icon-camera" style="color:green;"></span>
<span class="mui-icon mui-icon-location" style="color:green;"></span>
<span class="mui-icon mui-icon-home" style="color:green;"></span>
<span class="mui-icon mui-icon-loop" style="color:green;"></span>

二、input

 所有包裹在.mui-input-row 类中的 input、textarea等元素都将被默认设置宽度属性为width: 100%; 。 将 label 元素和上述控件控件包裹在.mui-input-group中可以获得最好的排列

                    

代码如下：

<form class="mui-input-group">
    <div class="mui-input-row">
        <label>用户名</label>
        <input type="text" class="mui-input-clear" placeholder="请输入用户名">
    </div>
    <div class="mui-input-row">
        <label>密码</label>
        <input type="password" class="mui-input-password" placeholder="请输入密码">
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary">确认</button>
        <button type="button" class="mui-btn mui-btn-danger">取消</button>
    </div>
</form>

三、list

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在ul节点上添加.mui-table-view类、在li节点上添加.mui-table-view-cell类即可

                    

代码如下：

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
            Item 1
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             Item 2
        </a>
    </li>
    <li class="mui-table-view-cell">
        <a class="mui-navigate-right">
             Item 3
        </a>
    </li>
</ul>