MUI组件（3）

grid（栅格）

• MUI提供了非常简单实用的 12 列响应式栅格系统。

栅格参数

尺寸	超小屏幕（<400px）(Extrasmall)	小屏幕(≥400px)（Small）
类前缀	.mui-col-xs-[1-12]	.mui-col-sm-[1-12]
列数	12	12
可嵌套	是	是

    

        

            Item1
        
    
    

        

            Item2
        
    

• 定义 mui-col-sm-6 在大屏(≥400px)设备上回展现为并排两列。
  
  

  大屏
• mui-col-xs-12 在小屏(<400px)设备上会覆盖之前定义的样式，展现为水平排列。
  
  

  小屏

list（列表）

• 普通列表

//使用ml快捷生成默认列表

    
Item 1
    
Item 2
    
Item 3

普通列表

• 自定义列表高亮颜色`

/*点击变蓝色高亮*/
.mui-table-view-cell.mui-active{
    background-color: #0062CC;
}

• 右侧添加导航箭头

右侧带箭头列表

• 右侧添加数字角标等控件

    

        Item 1
        10
    
    

        Item 2
        8
    
    

        Item 3
    

带角标列表

• media list（图文列表）

图文居左

    

        
            
            

                幸福
                
能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
            
        
    
    

        
            
            

                木屋
                
想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.
            
        
    
    

        
            
            

                CBD
                
烤炉模式的城，到黄昏，如同打翻的调色盘一般.
            
        
    

图文居右

    

        
            
            

                幸福
                
能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？
            
        
    
    

        
            
            

                木屋
                
想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.
            
        
    
    

        
            
            

                CBD
                
烤炉模式的城，到黄昏，如同打翻的调色盘一般.
            
        
    

图文列表

icon（图标）

• MUI默认提供了手机APP开发常用的字体图标。

• mui如何增加自定义icon图标
• mui扩展字体

transparentBar（透明状态栏）

//透明标题栏我们需要给标题栏节点添加 .mui-bar-transparent 样式

    
标题

• 若需要个性化定制，可以通过 data-* 属性或者JS API 来设置。

DOM API	作用	JS API
data-top	距离顶部高度（滚动到该位置即触发）	{top:0}
data-offset	滚动透明距离	{offset:150}
data-duration	过渡时间 ms	{duration:16}
data-scrollby	监听区域滚动容器	{scrollyby:DOM}

//DOM 用例

    
标题

//JS API用例
mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})

• 原生版本透明渐变导航条使用教程

参考文档

• MUI官方文档

上一章	下一章