MUI组件一：折叠面板、操作表、数字角标、按钮和卡片视图

1、accordion（折叠面板）

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

        

            面板1
            

                
面板1子内容
            
        
        

            面板
                

                
面板2子内容
            
        
        

            面板3
            

                
面板3子内容
            
        
    

   可以在折叠面板中放置任何内容；折叠面板默认收缩，若希望某个面板默认展开，只需要在包含.mui-collapse类的li节点上，增加.mui-active类即可；mui官网中的方法说明，使用的就是折叠面板控件。

代码块激活字符:  maccordion

    
    
    
    
    
    



    
accordion（折叠面板）



    

        面板1
        

            
面板1子内容
        
    
    

        面板
            

            
面板2子内容
        
    
    

        面板3
        

            
面板3子内容
        
    

 

 

2、actionsheet（操作表）

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

    
    

      

        菜单1
      
      

        菜单2
      
    
    
    

      

        取消
      
    

   和popover一样，推荐使用锚点方式显示、隐藏actionsheet；若要使用js代码动态显示、隐藏actionsheet，同样在popover插件的构造方法中传入"toggle"参数即可，如下：

//传入toggle参数，用户无需关心当前是显示还是隐藏状态，mui会自动识别处理；

mui('#sheet1').popover('toggle');

代码块激活字符:  mactionsheet

    
    
    
    
    
    



    
actionsheet（操作表）



    
    

      

        菜单1
      
      

        菜单2
      
      

        菜单3
      
      

        菜单4
      
    
    
    

      

        取消
      
    

打开操作表

3、badge（数字角标）

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

1
12
123
3
45
456

若无需底色，则增加.mui-badge-inverted类即可，如下：

1
2
3
4
5
6

代码块激活字符:   mbadge

    
    
    
    
    
    



    
badge（数字角标）


123
23
56
456
15
78

789
34

4、button（按钮）

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

    
    
    
    
    
    



    
button（按钮）


块级按钮
普通按钮
无底色按钮

 

（1）、普通按钮

    在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮

默认
蓝色
绿色
黄色
红色
紫色

默认按钮有底色，运行效果如下：

 

（2）、若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可，代码如下：

默认
蓝色
绿色
黄色
红色
紫色

运行效果如下：

 

 

代码块激活字符: mbutton

    
    
    
    
    
    



    
button（按钮）




默认
        蓝色
        绿色
        黄色
        红色
        紫色
        
 

默认
        蓝色
        绿色
        黄色
        红色
        紫色

5、cardview（卡片视图）

   卡片视图常用于展现一段完整独立的信息，比如一篇文章的预览图、作者信息、点赞数量等，使用mui-card类即可生成一个卡片容器，卡片视图主要有页眉、内容区、页脚三部分组成，结构如下：

页眉

内容区

页脚

  卡片页眉及内容区，均支持放置图片； 页眉放置图片的话，需要在.mui-card-header节点上增加.mui-card-media类，然后设置一张图片做背景图即可，代码如下：

若希望在页眉放置更丰富的信息，比如头像、主标题、副标题，则需使用.mui-media-body类，示例代码如下：



小M
发表于 2016-06-30 15:30