MUI组件（1）

accordion(折叠面板)

<!--利用触发字符mac来快捷生成accordion-->
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-collapse">
        <a class="mui-navigate-right" href="#">Accordion（折叠面板）</a>
        <div class="mui-collapse-content">
            <p>我是折叠面板</p>
        </div>
    </li>
</ul>

Accordion（折叠面板）
注：折叠面板默认是收缩的，若需要将某个面板默认展开，则需要在 li 标签上增加属性 .mui-active 即可。

actionsheet（操作表）

<!--利用触发字符mac来快捷生成actionsheet-->
<div id="sheet" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">北京</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">南京</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>
<a href="#sheet" id="openSheet" class="mui-btn mui-btn-primary mui-btn-block">选择城市</a>

Actionsheet（操作表）
注：actionsheet 一般从底部弹出，显示一系列可供用户选择的操作列表；actionsheet 是从 popover 控件基础上演变的，实际上是一个固定从底部弹出的 popover 。

badge（数字角标）

<!--利用触发字符mba来快捷生成badges-->
<span class="mui-badge mui-badge-primary">125</span>
<span class="mui-badge mui-badge-inverted mui-badge-green">564</span>

Badges（数字角标）

注：数字角标一般和其他控件配合使用，用于进行数量提示。比如邮件未读数量、通知公告未读数量、文件未查看数量都可以用数字角标来突出显示。数字角标提供两套显示方案：一种是有底色的，直接使用 mui-badge 样式即可；另一种是无底色的，需要在 mui-badge 样式后面增加 mui-badge-inverted 样式。

button （按钮）

<!--有底色的按钮-->
<div>
    <button type="button" class="mui-btn">默认</button>
    <button type="button" class="mui-btn mui-btn-primary">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger">红色</button>
    <button type="button" class="mui-btn mui-btn-royal">紫色</button>
</div>
<div>
    <!--无底色的按钮-->
    <button type="button" class="mui-btn mui-btn-outlined">默认</button>
    <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button>
    <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button>
    <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button>
    <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button>
    <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
</div>
<!---->
<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">确认</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>

Button（按钮）

注：MUI默认按钮为灰色，其另外提供了五种色系（blue、green、yellow、red、purple）和五种场景（primary、success、warning、danger、royal）的按钮。

MUI新增加载中按钮样式，可通过JS API切换 loading 和 reset 状态。

属性名	作用
data-loading-text	loading状态显示的文字。默认为loading
data-loading-icon	loading状态显示的icon，默认为mui-spinner或mui-spinner mui-spinner-white（根据按钮样式自动识别），为空表示不使用icon
data-loading-icon-position	loading状态显示的icon的位置，支持left/right，默认left。

参考文档

• MUI官方文档