mui組件通用CSS類
color(顏色)
mui中組件以iOS 7為基礎,補充部分Android特有控件,顏色值主要有以下五種:
1 2 3 4 5 |
primary => #007aff; //藍色(blue) success => #4cd964; //綠色(green) warning => #f0ad4e; //黃色(yellow) danger => #dd524d; //紅色(red) royal => #8a6de9; //紫色(purple) |
註:上述primary等顏色值關鍵詞在引用的時候可以替換成對應的顏色單詞,如.mui-btn-primary等效於.mui-btn-blue;
badge(數字角標):默認背景為灰色,另外mui內置了藍色(primary/blue)、綠色(success/green)、黃色(warning/yellow)、紅色(danger/red)、紫色(royal/purple)五種顏色,通過給button或者a標簽添加.mui-badge-* 類添加背景顏色。如:
1 2 3 4 5 6 |
<span class="mui-badge">1</span> <span class="mui-badge mui-badge-primary">2</span> <span class="mui-badge mui-badge-success">3</span> <span class="mui-badge mui-badge-warning">4</span> <span class="mui-badge mui-badge-danger">5</span> <span class="mui-badge mui-badge-royal">6</span> |
button(按鈕):默認背景為白色,另外mui內置了藍色(primary/blue)、綠色(success/green)、黃色(warning/yellow)、紅色(danger/red)、紫色(royal/purple)五種顏色,通過給button或者a標簽添加.mui-btn-* 類添加背景顏色。
1 2 3 4 5 6 |
<button type="button" class="mui-btn">默認</button> <button type="button" class="mui-btn mui-btn-primary">藍色</button> <button type="button" class="mui-btn mui-btn-success">綠色</button> <button type="button" class="mui-btn mui-btn-warning">黃色</button> <button type="button" class="mui-btn mui-btn-danger">紅色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button> |
switch(開關):默認值為綠色,可選顏色為藍色,添加.mui-switch-blue類即可。
1 2 3 4 5 6 |
<div class="mui-switch mui-active"> <div class="mui-switch-handle"></div> </div> <div class="mui-switch mui-switch-blue mui-active"> <div class="mui-switch-handle"></div> </div> |
任意元素:可以給任意元素添加.mui-bg-*類添加背景顏色,可選參數為primary/positive/negative。
1 2 3 |
<div class="mui-bg-primary">我是藍色背景</div> <div class="mui-bg-positive">我是綠色背景</div> <div class="mui-bg-negative">我是紅色背景</div> |
文字(font)
文字位置: 可以給文字添加 .mui-text-left、.mui-text-center、.mui-text-right設置文字位置。
1 2 3 |
<div class="mui-text-left">我在左邊</div> <div class="mui-text-center">我在中間</div> <div class="mui-text-right">我在右邊</div> |
溢出隱藏:當文字內容超過一行或者多行時,溢出文本用省略號代替。
顯示單行:
1 |
<p class="mui-ellipsis">我在一行內,當我超出了會顯示省略號。我在一行內,當我超出了會顯示省略號。我在一行內,當我超出了會顯示省略號。我在一行內,當我超出了會顯示省略號。</p> |
顯示兩行:
1 |
<p class="mui-ellipsis-2">我在兩行內,當我超出了會顯示省略號。我在兩行內,當我超出了會顯示省略號。我在兩行內,當我超出了會顯示省略號。我在兩行內,當我超出了會顯示省略號。我在兩行內,當我超出了會顯示省略號。</p> |
若需要設置顯示多行,通過設置-webkit-line-clamp屬性,如顯示三行添加style=”-webkit-line-clamp:3”:
1 |
<p class="mui-ellipsis-2" style="-webkit-line-clamp:3">我在三行內,當我超出了會顯示省略號。我在三行內,當我超出了會顯示省略號。我在三行內,當我超出了會顯示省略號。我在三行內,當我超出了會顯示省略號。我在三行內,當我超出了會顯示省略號。我在三行內,當我超出了會顯示省略號。</p> |
布局(layout)
基本整體布局
mui中提供了幾種常見的布局系統,大家可以很方便的構建出一個手機頁面,一個最簡單的例子為:
1 2 3 4 5 6 7 8 9 10 |
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">標題</h1> </header> <footer class="mui-bar mui-bar-footer"> 底部 </footer> <div class="mui-content"> 主體 </div> |
當底部內容為選項卡時候,我們會將.mui-bar-footer替換為.mui-bar-tab:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-phone"></span> <span class="mui-tab-label">電話</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-email"></span> <span class="mui-tab-label">郵件</span> </a> <a class="mui-tab-item"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> |
在使用時需要註意一下兩個細節:
固定欄靠前:所謂的固定欄,也就是帶有.mui-bar屬性的節點,都是基於fixed定位的元素;常見組件包括:頂部導航欄(.mui-bar-nav)、底部工具條(.mui-bar-footer)、底部選項卡(.mui-bar-tab);這些元素使用時需遵循一個規則:放在.mui-content元素之前,即使是底部工具條和底部選項卡,也要放在.mui-content之前,否則固定欄會遮住部分主內容。
一切內容都要包裹在mui-content中:除了固定欄之外,其它內容都要包裹在.mui-content中,否則就有可能被固定欄遮罩,原因:固定欄基於Fixed定位,不受流式布局限制,普通內容依然會從top:0的位置開始布局,這樣就會被固定欄遮罩,mui為了解決這個問題,定義了如下css代碼:
1 2 3 4 5 6 7 8 9 |
.mui-bar-nav ~ .mui-content { padding-top: 44px; } .mui-bar-footer ~ .mui-content { padding-bottom: 44px; } .mui-bar-tab ~ .mui-content { padding-bottom: 50px; } |
你當然可以通過自定義CSS的方式實現如上類似效果,但為了使用簡便,建議將除固定欄之外的所有內容,全部放在.mui-content中。
局部元素布局
設置邊距:可以給塊元素設置.mui-content-padded類添加邊距,默認為10px外邊距。
設置元素為內聯塊對象:可以給元素設置.mui-inline類,將元素呈遞為內聯對象,但是對象的內容作為塊對象呈遞。
1 2 3 4 5 |
<div class="mui-content-padded"> <div class="mui-inline">我是A</div> <div class="mui-inline">我是B</div> <div class="mui-inline">我是C</div> </div> |
設置元素為塊元素對象:可以給元素設置元素.mui-block,將元素設置為塊元素。
浮動:可以給元素設置.mui-pull-left或者.mui-pull-right類,從而設置浮動效果,可以使用.mui-clearfix清除浮動。
1 2 3 4 |
<div class="mui-clearfix"> <div class="mui-pull-left">我在左邊</div> <div class="mui-pull-right">我在右邊</div> </div> |
塊級表格:mui中使用CSS表格的方式定義了.mui-table塊級表格布局方式,會作元素為塊級表格來顯示。
1 2 3 4 5 6 7 8 9 10 11 |
<div class="mui-table"> <div class="mui-table-cell mui-text-center"> 我是A </div> <div class="mui-table-cell mui-text-center"> 我是B </div> <div class="mui-table-cell mui-text-center"> 我是C </div> </div> |
列表去掉默認樣式:可以給ul元素設置.mui-list-unstyled類去掉ul標簽在瀏覽器中默認的原點和內邊距。
1 2 3 4 5 |
<ul class="mui-list-unstyled"> <li>我是第1條</li> <li>我是第2條</li> <li>我是第3條</li> </ul> |
列表顯示為內聯元素:可以給ul元素設置.mui-list-inline類將li標簽元素設置為內聯塊元素。
1 2 3 4 5 |
<ul class="mui-list-inline"> <li>我是第1條</li> <li>我是第2條</li> <li>我是第3條</li> </ul> |
設置元素顯示與隱藏:.mui-visibility默認為設置元素可見,.mui-hidden默認為設置元素隱藏。
1 2 3 4 5 6 7 8 9 |
<div id="loading"> loading... </div> <script type="text/javascript"> setTimeout(function(){ document.getElementById("loading").classList.add(‘mui-hidden‘); },3000) </script> |
OS環境判斷多平臺適配:
mui會通過.mui.os.*方法判斷環境,將.mui-plus,.mui-plus-stream,.mui-ios,.mui-android,.mui-wechat,.mui-ios-version,.mui-android-version,.mui-wechat-version綁定在document.body.classList中,我們可以通過這些樣式類判斷當前的運行判斷,於是可以做出一些適配,如:
1 2 3 4 5 6 7 8 |
<div class="mui-input-row mui-plus-visible"> <label>mui-plus-visible</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="我在web環境下隱藏5+環境下顯示"> </div> <div class="mui-input-row mui-plus-hidden"> <label>mui-plus-hidden</label> <input type="text" class="mui-input-clear" placeholder="我在web環境下顯示5+環境下隱藏"> </div> |
mui中默認在plus環境下和微信環境下設置了樣式幾個樣式:
.mui-plus-visible:在plus環境下顯示,非plsu環境下隱藏
.mui-wechat-visible:在wechat環境下顯示,非wechat環境下隱藏
.mui-plus-hidden:在plus環境下隱藏,非plsu環境下顯示
.mui-wechat-hidden:在wechat環境下隱藏,非wechat環境下顯示
柵格系統布局:mui中定義了一個簡單適用的柵格系統,將每一行寬度平均分為12份,每一份作為一個子柵格,每一行的內容置於.mui-row行容器中,通過.mui-col-xs-*和.mui-col-sm-*將行分成若幹行。使用以下媒體查詢(media query)將.mui-row像素寬度400px作為分界,.mui-row像素寬度低於400px的使用.mui-col-xs-*,當.mui-row像素寬度高於400px使用.mui-col-sm-*。.mui-row寬度若不設置,默認為屏幕像素寬度。
通過給每一行中的列設置1~12的數值,相應列的寬度會隨著.mui-row像素寬度變化。若一行中列的數值和大於12,多余的列所在元素會作為一個整體另起一行排列。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style type="text/css"> .mui-row{ height: 50px; line-height: 50px; text-align: center; } .mui-col-sm-3{ border: 1px solid #aaa; } .mui-col-sm-9{ border: 1px solid #aaa; } </style> <div class="mui-row"> <div class="mui-col-xs-4 mui-col-sm-3"> .mui-col-sm-3 </div> <div class="mui-col-xs-8 mui-col-sm-9"> .mui-col-sm-9 </div> </div> |
這樣我們得到了兩列元素,當.mui-row像素寬度低於400px時,左側寬度為4份子柵格寬度,右側寬度為8份子柵格寬度;當.mui-row像素寬度高於400px時,左側寬度為4份子柵格寬度,右側寬度為8份子柵格寬度。
區域滾動布局:mui中封裝了一個scroll控件用於實現區域滾動,在使用區域滾動組件時候需要註意幾個細節,scroll控件有固定的dom結構,需手動初始化scroll控件,需要手動設置滾動區域的位置(一般設置為top和bottom)。
固定DOM結構:
1 2 3 4 5 |
<div class="mui-scroll-wrapper"> <div class="mui-scroll"> <!--這裏放置真實顯示的DOM內容--> </div> </div> |
初始化scroll控件:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 常用配置項 var options = { scrollY: true, //是否豎向滾動 scrollX: false, //是否橫向滾動 startX: 0, //初始化時滾動至x startY: 0, //初始化時滾動至y indicators: true, //是否顯示滾動條 deceleration:0.0006 //阻尼系數,系數越小滑動越靈敏 bounce: true, //是否啟用回彈 } eg: mui(‘.mui-scroll-wrapper‘).scroll({ deceleration: 0.0005 //flick 減速系數,系數越大,滾動速度越慢,滾動距離越小,默認值0.0006 }); |
手動設置高度:
一般在scroll控件最外面設置div為絕對定位,設置top,bottom,left,right值,為了方便,mui默認設置有個全屏類.mui-fullscreen。
1 2 3 4 5 6 7 |
.mui-fullscreen { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } |
我們可以在scroll控件外面添加這個類,然後手動修改top和bottom值。
mui組件通用CSS類