MUI组件（3）

grid（栅格）

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

栅格参数

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

<div class="mui-row">
    <div class="mui-col-sm-6 mui-col-xs-12">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item1</a>
        </li>
    </div>
    <div class="mui-col-sm-6 mui-col-xs-12">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">Item2</a>
        </li>
    </div>
</div>

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

list（列表）

• 普通列表

//使用ml快捷生成默认列表
<ul class="mui-table-view">
    <li class="mui-table-view-cell">Item 1</li>
    <li class="mui-table-view-cell">Item 2</li>
    <li class="mui-table-view-cell">Item 3</li>
</ul>

普通列表

• 自定义列表高亮颜色`

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

• 右侧添加导航箭头

右侧带箭头列表

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

<ul class="mui-table-view">
    <li class="mui-table-view-cell">
        Item 1
        <span class="mui-badge mui-badge-blue">10</span>
    </li>
    <li class="mui-table-view-cell">
        Item 2
        <span class="mui-badge mui-badge-inverted mui-badge-blue">8</span>
    </li>
    <li class="mui-table-view-cell">
        Item 3
    </li>
</ul>

带角标列表

• media list（图文列表）

<label>图文居左</label>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="images/logo.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-left" src="">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>
<label>图文居右</label>
<ul class="mui-table-view">
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="images/logo.png">
            <div class="mui-media-body">
                幸福
                <p class="mui-ellipsis">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="">
            <div class="mui-media-body">
                木屋
                <p class="mui-ellipsis">想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.</p>
            </div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media">
        <a href="javascript:;">
            <img class="mui-media-object mui-pull-right" src="">
            <div class="mui-media-body">
                CBD
                <p class="mui-ellipsis">烤炉模式的城，到黄昏，如同打翻的调色盘一般.</p>
            </div>
        </a>
    </li>
</ul>

图文列表

icon（图标）

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

<span class="mui-icon mui-icon-weixin"></span>

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

transparentBar（透明状态栏）

//透明标题栏我们需要给标题栏节点添加 .mui-bar-transparent 样式
<header class="mui-bar mui-bar-nav mui-bar-transparent">
    <h1 class="mui-title">标题</h1>
</header>

• 若需要个性化定制，可以通过 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 用例
<header class="mui-bar mui-bar-nav mui-bar-transparent" data-top='0' data-offset='150' data-duration='16' data-scrollby=".mui-scroll-wrapper">
    <h1 class="mui-title">标题</h1>
</header>
//JS API用例
mui('.mui-bar-transparent').transparent({
    top: 0,
    offset: 150,
    duration: 16,
    scrollby: document.querySelector('.mui-scroll-wrapper')
})

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

参考文档

• MUI官方文档

上一章	下一章