MUI框架-03-自定义MUI控件样式
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控件样式相关推荐
- WPF 自定义DataGrid控件样式
WPF 自定义DataGrid控件样式 样式一: 样式代码: <!--DataGrid样式--><Style TargetType="DataGrid">& ...
- WPF 自定义TabControl控件样式(转)
WPF 自定义TabControl控件样式 一.前言 程序中经常会用到TabControl控件,默认的控件样式很普通.而且样式或功能不一定符合我们的要求.比如:我们需要TabControl的标题能够居 ...
- arcgis api for js共享干货系列之二自定义Navigation控件样式风格
arcgis api for js默认的Navigation控件样式风格如下图: 这样的风格不能说不好,各有各的爱好,审美观,这里也不是重点,这里的重点是如何自定义一套自己喜欢的样式风格呢:自己自定义 ...
- WPF Calendar 日历控件 样式自定义
原文:WPF Calendar 日历控件 样式自定义 粗略的在代码上做了些注释 blend 生成出来的模版 有的时候 会生成 跟 vs ui界面不兼容的代码 会导致可视化设计界面 报错崩溃掉 但是确不 ...
- 微信小程序 - 音频播放进度条和点击拖动的控制,支持自定义音乐播放控件样式布局(wx.createAudioContext)解决各种 InnerAudioContext.onTimeUpdate不执行
前言 网上有很多关于 InnerAudioContext.onTimeUpdate 不执行.失效的问题,都导致播放进度条无法做了,本文完美解决. 本文实现了 自定义播放音频控件样式,且支持播放进度条显 ...
- 自定义日历控件背景样式
#自定义日历控件的使用 一.DatePicker日期选择类的使用 DatePicker常用xml属性: XML属性 描述 android:calendarViewShown 设置该日期选择是否显示Ca ...
- [转] 使用模板自定义 WPF 控件
[转] 使用模板自定义 WPF 控件 ...
- 微信小程序wepy自定义card控件封装
微信小程序wepy自定义card控件 在利用wepy开发小程序的过程中,需要使用自定义控件来实现,但是很多时候,若直接在page页面中写对应的控件,下次在另一个页面中,想使用同样的控件又需要重新绑定数 ...
- 自定义日历控件,可以根据需求定制属于自己的日历
自定义日历控件,可以根据需求定制属于自己的日历 效果图 最近笔者的朋友需要写一个关于考勤的日历,效果如下,但在网上找了半天都找不到合适的,于是乎就向笔者求助,笔者本来觉得在晚上随便找个日历demo,然 ...
最新文章
- C#和SqlServer中处理时间格式问题
- Fast R-CNN: 我变快了,也变强了!
- MySQL 关联表批量修改(数据同步)
- highCharts如何实现json数组数据的图形展示
- mysql 时间点_mysql 时间
- Android开发笔记(一百七十九)避免方法数过多的问题
- django 博客一
- python--查询PG数据库
- 获取键盘上某键的状态
- ttl转rs232发送十六进制_电脑USB转TTL串口RS232串口模块
- 小弟需要一个能显示播放音频的各频率音量大小(不知道叫什么东东)的控件~!...
- Ubuntu安装英伟达显卡驱动
- JavaScript数组方法slice()
- 南通大学关于 2022 年下半年成人学士学位英语考试的通知
- 电脑选择一个文件(文档、视频等)右键移到打开方式卡死的解决办法
- 一条命令修复机械硬盘,提示需要格式化
- k8s cheat sheet
- golang xorm 自定义日志记录器,使用zap实现日志输出、切割日志
- 浅入浅出redis----II
- Win10 wsl-安装教程
热门文章
- roll() java_java.util.Calendar.roll(int field,int amount)方法实例
- Docker实践总结
- python毒酒检测_Turkey HSD检验法/W法
- jacob的使用方法总结
- 单片机 c语言 数字 0 9,单片机点阵式LED显示技术数字“0-9”
- 使用 gitbook 制作 pdf 电子书
- 辨析 总结PMP各种BS结构
- 东软实训推荐面试问题12:三分钟表现自己使我感兴趣就留下来?
- 当年表白流行写情书,现在流行的是……
- 2021-08-12_简单的处理oracle常见错误ORA-12170、ORA-12541、ORA-12514、