MUI从入门到项目实战（四）（MUI组件之accordion、actionsheet、badge）

一、accordion

折叠面板从二级列表中演化而来，dom结构和二级列表类似，如下：

               

在index.html中《主界面具体展示内容》下输入快捷键  maccordion 创建折叠面板

<div class="mui-content mui-scroll-wrapper">
    <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">面板1</a>
                <div class="mui-collapse-content">
                    <p>面板1子内容</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">面板</a>
                    <div class="mui-collapse-content">
                    <p>面板2子内容</p>
                </div>
            </li>
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">面板3</a>
                <div class="mui-collapse-content">
                    <p>面板3子内容</p>
                </div>
            </li>
        </ul>
    </div>
</div>

 二、actionsheet

actionsheet一般从底部弹出，显示一系列可供用户选择的操作按钮； actionsheet是从popover控件基础上演变而来，实际上就是一个固定从底部弹出的popover，故DOM结构和popove类似，只是需要在含.mui-popover类的节点上增加.mui-popover-bottom、.mui-popover-action类；

               

<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
    <!-- 可选择菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#">菜单1</a>
      </li>
      <li class="mui-table-view-cell">
        <a href="#">菜单2</a>
      </li>
    </ul>
    <!-- 取消菜单 -->
    <ul class="mui-table-view">
      <li class="mui-table-view-cell">
        <a href="#sheet1"><b>取消</b></a>
      </li>
    </ul>
</div>

三、badge

数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。 角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标，如下：

                        

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
      <a href="#">Item1 <span class="mui-badge mui-badge-green">1</span></a>
    </li>
    <li class="mui-table-view-cell">
      <a href="#">Item2 <span class="mui-badge mui-badge-red">1</span></a>
    </li>
    <li class="mui-table-view-cell">
        <a href="#">Item3 <span class="mui-badge mui-badge-purple">1</span></a>
    </li>
  </ul>