MUI从入门到项目实战（五）（MUI组件之buttons、cardview、checkbox）

一、buttons

 mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮

                   

在index.html主界面展示内容下输入下面代码：

<button type="button" class="mui-btn mui-btn-blue">按钮</button>
<button type="button" class="mui-btn mui-btn-grey">按钮</button>
<button type="button" class="mui-btn mui-btn-green">按钮</button>
<button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">按钮</button>
<button type="button" class="mui-btn mui-btn-green mui-btn-outlined">按钮</button>
<button type="button" class="mui-btn mui-btn-red mui-btn-outlined">按钮</button>

<hr>
<button type="button" data-loading-text="提交中" class="mui-btn">确认</button>
<script type="text/javascript">
    mui(document.body).on('tap', '.mui-btn', function (e) {
        mui(this).button('loading');
        setTimeout(function () {
            mui(this).button('reset');
        }.bind(this), 2000);
    });
</script>

二、cardview

卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等，如下是一个卡片demo示例

                    

使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：

<div class="mui-card">
    <div class="mui-card-header mui-card-media">
        <img src="images/2.jpg" />
        <div class="mui-media-body">
            女兵
            <p>发表于2019-10-10</p>
        </div>
    </div>
    <div class="mui-card-content" style="height:40vw;background-image:url(images/2.jpg)"></div>
    <div class="mui-card-footer">
        <a href="#">Like</a>
        <a href="#">Comment</a>
        <a href="#">Read More</a>
    </div>
</div>

三、Checkbox

checkbox常用于多选的情况，比如批量删除、添加群聊等

                   

默认checkbox在右侧显示，若希望在左侧显示，只需增加.mui-left类即可

<div class="mui-input-row mui-checkbox ">
    <label>Checkbox</label>
    <input name="Checkbox" type="checkbox" checked>
</div>
<div class="mui-input-row mui-checkbox mui-left">
    <label>checkbox左侧显示示例</label>
    <input name="checkbox1" value="Item 1" type="checkbox">
</div>