007_跨平台开发_MUI_按钮之普通按钮(button)
2017-10-27 22:51
344 查看
认识
mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮;有背景色
在button节点上增加.mui-btn类,即可生成默认按钮;若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮。<!-- 1.有背景色 --> <div class="styleBtn"> <!-- 默认样式:背景灰色,字体黑色 --> <button type="button" class="mui-btn">默认</button> <!-- 增加样式:mui-btn-red,背景红色,字体白色 --> <button type="button" class="mui-btn mui-btn-red">红色</button> <!-- 增加样式:mui-btn-blue,背景蓝色,字体白色 --> <button type="button" class="mui-btn mui-btn-blue">蓝色</button> <!-- 增加样式:mui-btn-green,背景绿色,字体白色 --> <button type="button" class="mui-btn mui-btn-green">绿色</button> <!-- 增加样式:mui-btn-yellow,背景黄色,字体白色 --> <button type="button" class="mui-btn mui-btn-yellow">黄色</button> <!-- 增加样式:mui-btn-purple,背景紫色,字体白色 --> <button type="button" class="mui-btn mui-btn-purple">紫色</button> </div>
无背景色、有边框
若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可。<!-- 2.无背景色、有边框,增加样式:mui-btn-outlined,背景无色,边框和字体是设置的颜色 --> <div class="styleBtn"> <button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-red mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-purple mui-btn-outlined">紫色</button> </div>
自定义样式
设置button的background-color和color属性就行。/* 自定义样式 */ .mui-button-diy { /*背景色*/ background-color: #EC971F; /*字体颜色*/ color: #8A6DE9; }
<!-- 3.更多样式:修改button的background-color和color --> <div class="styleBtn"> <!-- mui-button-diy:自定义样式 --> <button type="button" class="mui-btn mui-button-diy">默认</button> <button type="button" class="mui-btn mui-button-diy">红色</button> <button type="button" class="mui-btn mui-button-diy">蓝色</button> <button type="button" class="mui-btn mui-button-diy">绿色</button> <button type="button" class="mui-btn mui-button-diy">黄色</button> <button type="button" class="mui-btn mui-button-diy">紫色</button> </div>
测试代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); </script> <style type="text/css"> .styleBtn { margin-top: 20px; /*让按钮居中*/ text-align: center; } /* 自定义样式 */ .mui-button-diy { /*背景色*/ background-color: #EC971F; /*字体颜色*/ color: #8A6DE9; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">按钮(button)</h1> </header> <div class="mui-content"> <!-- 按钮:button标签,class属性为mui-btn,还有一些修饰样式 --> <!-- 1.有背景色 --> <div class="styleBtn"> <!-- 默认样式:背景灰色,字体黑色 --> <button type="button" class="mui-btn">默认</button> <!-- 增加样式:mui-btn-red,背景红色,字体白色 --> <button type="button" class="mui-btn mui-btn-red">红色</button> <!-- 增加样式:mui-btn-blue,背景蓝色,字体白色 --> <button type="button" class="mui-btn mui-btn-blue">蓝色</button> <!-- 增加样式:mui-btn-green,背景绿色,字体白色 --> <button type="button" class="mui-btn mui-btn-green">绿色</button> <!-- 增加样式:mui-btn-yellow,背景黄色,字体白色 --> <button type="button" class="mui-btn mui-btn-yellow">黄色</button> <!-- 增加样式:mui-btn-purple,背景紫色,字体白色 --> <button type="button" class="mui-btn mui-btn-purple">紫色</button> </div> <!-- 2.无背景色、有边框,增加样式:mui-btn-outlined,背景无色,边框和字体是设置的颜色 --> <div class="styleBtn"> <button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-red mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-purple mui-btn-outlined">紫色</button> </div> <!-- 3.更多样式:修改button的background-color和color --> <div class="styleBtn"> <!-- mui-button-diy:自定义样式 --> <button type="button" class="mui-btn mui-button-diy">默认</button> <button type="button" class="mui-btn mui-button-diy">红色</button> <button type="button" class="mui-btn mui-button-diy">蓝色</button> <button type="button" class="mui-btn mui-button-diy">绿色</button> <button type="button" class="mui-btn mui-button-diy">黄色</button> <button type="button" class="mui-btn mui-button-diy">紫色</button> </div> </div> </body> </html>
效果
源码下载
关注下方的微信公众号,回复:007_按钮之普通按钮(button).code
欢迎加入交流群:451826376
更多信息:www.itcourse.top
相关文章推荐
- 008_跨平台开发_MUI_按钮之加载中按钮(button)
- Android 开发之 ToggleButton App 滑动开关按钮
- Android练习-----普通按钮(Button) && 图片按钮(ImageButton)
- 跨平台移动APP开发进阶(三)hbuilder+mui mobile app 开发心酸路
- IOS开发之按钮控件Button详解
- 安卓开发中给按钮(button)设置监听器的4种方法
- Android开发之四(十三):常用控件之按钮(Button)
- Android应用开发笔记(10):制作自定义背景Button按钮、自定义形状Button的全攻略
- 禁止button标签提交form表单,变成普通按钮
- Android开发总结笔记 Button和ImageButton(按钮) 1-1-9
- Android开发--圆角 Button 按钮 xml 实现
- ios开发学习--按钮(Button)效果源码分享--系列教程1
- android开发中Button按钮监听事件(匿名内部类监听或者不匿名)
- 安卓开发学习之014 Button应用详解(样式、背景、按钮单击、长按、双击、多击事件)
- Android开发悬浮按钮 Floating ActionButton的实现方法
- Windwos SDK开发 --实现BUTTON按钮的加载图片
- IOS开发基础—按钮(button)基本操作
- android 开发-捕捉按钮的触发(Button 动作)
- iOS应用开发中导航栏按钮UIBarButtonItem的添加教程
- 跨平台移动APP开发进阶(一)mui开发注意事项