MUI框架-03-自定義MUI控件樣式

• 開發請查閱：官方文檔：http://dev.dcloud.net.cn/mui/ui/

如何自定義MUI控件樣式

• mui 以 iOS 7的 UI 為基礎，補充了部分 Android 平臺特有的 UI 組件，整體色系比較素雅；但在實際項目，往往需要根據 UED 的設計，調整色系及排版布局，此時就涉及 mui 控件樣式的重定義問題，本文以 hello mui 中導航欄默認樣式頁面為示例，講解如何自定義 mui 控件樣式。原始界面如圖：
  
• 我們希望重定義為如下界面：
  
• 操作步驟如下：
  • 1、通過chrome瀏覽器模擬手機瀏覽器打開對應頁面，初級用戶參考這裏這裏
  • 2、在需要重定義樣式的控件（導航欄）上，點擊右鍵，選擇“審查元素”，會打開chrome控制臺，控制臺左側會顯示對應控件的DOM結構，右側會顯示作用在該控件上的CSS定義，如下圖所示；在左側DOM區，切換DOM節點，上方模擬器對應控件及右側作用的CSS定義均會變化；
    
    
  • 3、分析需要重定義的內容，從效果圖上直觀來看，需要將導航條背景色修改為藍色，然後將返回圖標及導航標題修改為白色；
  • 4、通過DOM結構分析，應該較容易的看出，header節點表示導航條控件，那我們就DOM區選擇header節點，然後分析右側模擬器，會看到header上的所有css定義，找到background-color定義，如下所示：
    
  • 5、單擊background-color對應顏色值，修改成UED設計師提供的藍色，比如#253ff2，這時上方模擬器上導航條會實時變成藍色，如下：
    
  • 6、確認顏色值正確後，將修改代碼復制到對應頁面中，本示例為titlebar.html，保存如下代碼（需放在mui.min.css引用之後），這樣就可以覆蓋mui默認的背景色定義：

  .mui-bar{
   background-color: #253FF2;
  }

  • 7、此時再刷新當前頁面，就會看到背景色已變；
  • 8、同樣的方式，找到標題欄文字顏色定義，找文字顏色時要定位到對應文字的最小節點，對於如下的DOM節點，

  <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>
   
  

• 我們應該優先看h1的css定義，會發現color定義為#000，修改為#fff即可，如下：
  

修改後效果：

同樣復制保存css定義，如下：

.mui-title{
    color:#fff
}

9、最後，還剩一個左側返回箭頭的顏色值，我們也以同樣的方法修改，左側DOM區選中節點，然後在右側css區查看css定義，找到color顏色定義的地方，然後同樣修改為#fff，修改結果如下：

10、以同樣方式拷貝css代碼到html文件，最終復寫的css代碼為

.mui-bar{
    background-color: #253FF2;
}
.mui-title{
     color:#fff;
}
a{
    color:#fff;
}

• 經過如上幾個步驟，我們就完成了導航條的自定義，當然在實際開發中，我們可以更為靈活，比如的css定義牽扯範圍太廣，我們僅在返回的a節點上增加style屬性，在style中定義color，例如：

<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>
    <h1 class="mui-title">導航欄</h1>
</header>

• 開發請查閱：官方文檔：http://dev.dcloud.net.cn/mui/ui/

更多文章鏈接：MUI 框架

• 本筆記不允許任何個人和組織轉載

MUI框架-03-自定義MUI控件樣式