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;
}
<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>
更多文章鏈接：MUI 框架
- 本筆記不允許任何個人和組織轉載