007_跨平台开发_MUI_按钮之普通按钮(button)
来源:互联网 发布:网络四十禁书在线阅读 编辑:程序博客网 时间:2024/05/16 13:44
认识
- 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
阅读全文
0 0
- 007_跨平台开发_MUI_按钮之普通按钮(button)
- 008_跨平台开发_MUI_按钮之加载中按钮(button)
- 004_跨平台开发_MUI_操作表(actionsheet)
- 006_跨平台开发_MUI_折叠面板(accordion)
- 003_跨平台开发_MUI_注意事项
- 001_跨平台开发_MUI_认识MUI
- 005_跨平台开发_MUI_数字角标(badges)
- 步步为营_Android开发课[17]_用户界面之Button(按钮)
- 002_跨平台开发_MUI_认识第一个MUI程序
- 2.Button按钮实例:普通按钮和图片按钮
- Android开发 之 基本按钮Button
- Web开发之Button按钮兼容性问题
- IOS开发之按钮控件Button详解
- Android练习-----普通按钮(Button) && 图片按钮(ImageButton)
- 安卓控件之按钮(Button)
- Button(按钮)监听
- 按钮(Button)
- actionSheet+Button(按钮)
- 小程序旗舰店与“政府示例”,能否让其破冰前进
- Servlet进阶1
- 酷骑单车被爆退押金难;微信现“15个句号崩溃”Bug,安卓主流机型全中招;广铁率先支持Apple Pay,但付款方式出乎意料 | 雷锋早报
- 深入理解for循环
- 计算机计算乘除法的原理
- 007_跨平台开发_MUI_按钮之普通按钮(button)
- printf下的“i++”和“i--”
- 500家国内AI企业大数据分析:产业布局与融投风云
- 英特尔发布最新自动学习芯片,有望加速人工智能的发展
- python_set()
- 以城际货运、同城物流和即时配送为例,揭秘我国2017“互联网+物流”新业态
- 现代诗歌
- 项目反思
- 搜索引擎下拉菜单 提示关键词 接口API