grid（柵格）
- MUI提供了非常簡(jiǎn)單實(shí)用的
12列響應(yīng)式柵格系統(tǒng)拆挥。
柵格參數(shù)
| 尺寸 | 超小屏幕（<400px）(Extrasmall) | 小屏幕(≥400px)（Small） |
|---|---|---|
| 類前綴 | .mui-col-xs-[1-12] |
.mui-col-sm-[1-12] |
| 列數(shù) | 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)設(shè)備上回展現(xiàn)為并排兩列。
大屏 -
mui-col-xs-12在小屏(<400px)設(shè)備上會(huì)覆蓋之前定義的樣式，展現(xiàn)為水平排列。
小屏
list（列表）
- 普通列表
//使用ml快捷生成默認(rèn)列表
<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>
普通列表
- 自定義列表高亮顏色`
/*點(diǎn)擊變藍(lán)色高亮*/
.mui-table-view-cell.mui-active{
background-color: #0062CC;
}
- 右側(cè)添加導(dǎo)航箭頭
右側(cè)帶箭頭列表
- 右側(cè)添加數(shù)字角標(biāo)等控件
<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>
帶角標(biāo)列表
-
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">烤爐模式的城鸟雏，到黃昏，如同打翻的調(diào)色盤一般.</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">烤爐模式的城锰悼，到黃昏柳骄，如同打翻的調(diào)色盤一般.</p>
</div>
</a>
</li>
</ul>
圖文列表
icon（圖標(biāo)）
- MUI默認(rèn)提供了手機(jī)APP開發(fā)常用的字體圖標(biāo)。
<span class="mui-icon mui-icon-weixin"></span>
transparentBar（透明狀態(tài)欄）
//透明標(biāo)題欄我們需要給標(biāo)題欄節(jié)點(diǎn)添加 .mui-bar-transparent 樣式
<header class="mui-bar mui-bar-nav mui-bar-transparent">
<h1 class="mui-title">標(biāo)題</h1>
</header>
- 若需要個(gè)性化定制箕般，可以通過(guò)
data-*屬性或者JS API來(lái)設(shè)置耐薯。
| DOM API | 作用 | JS API |
|---|---|---|
| data-top | 距離頂部高度（滾動(dòng)到該位置即觸發(fā)） |
{top:0} |
| data-offset | 滾動(dòng)透明距離 | {offset:150} |
| data-duration | 過(guò)渡時(shí)間 ms
|
{duration:16} |
| data-scrollby | 監(jiān)聽區(qū)域滾動(dòng)容器 | {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">標(biāo)題</h1>
</header>
//JS API用例
mui('.mui-bar-transparent').transparent({
top: 0,
offset: 150,
duration: 16,
scrollby: document.querySelector('.mui-scroll-wrapper')
})
參考文檔
| 上一章 | 下一章 |
|---|
