005_跨平台开发_MUI_数字角标(badges)
来源:互联网 发布:mac微信怎么设置声音 编辑:程序博客网 时间:2024/06/06 01:08
视频教程:点击这里
认识
- 数字角标一般和其它控件(列表、9宫格、选项卡等)配合使用,用于进行数量提示。 角标的核心类是.mui-badge,默认为实心灰色背景;同时,mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标,如下:
- 代码结构
<span class="mui-badge">1</span><span class="mui-badge mui-badge-primary">12</span><span class="mui-badge mui-badge-success">123</span><span class="mui-badge mui-badge-warning">3</span><span class="mui-badge mui-badge-danger">45</span><span class="mui-badge mui-badge-purple">456</span>
注意:
- 若无需底色,则增加.mui-badge-inverted类即可,如下:
- 代码结构
<span class="mui-badge mui-badge-inverted">1</span><span class="mui-badge mui-badge-primary mui-badge-inverted">2</span><span class="mui-badge mui-badge-success mui-badge-inverted">3</span><span class="mui-badge mui-badge-warning mui-badge-inverted">4</span><span class="mui-badge mui-badge-danger mui-badge-inverted">5</span><span class="mui-badge mui-badge-royal mui-badge-inverted">6</span>
测试代码
<!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> </head> <!-- 步骤: 1.按照格式<span class="mui-badge">1</span>写上标签,添加样式mui-badge 2.格局颜色的不同添加不同的class 3.若无需底色,则增加.mui-badge-inverted类即可,如下: --> <body> <!-- 头部 --> <header class="mui-bar mui-bar-nav"> <a class="mui-icon mui-icon-left-nav mui-action-back mui-pull-left"></a> <h1 class="mui-title">数字角标(badge)</h1> </header> <!-- 内容 --> <div class="mui-content"> <!-- 各种颜色样式的数字角标 --> <span class="mui-badge">1</span> <span class="mui-badge mui-badge-primary">12</span> <span class="mui-badge mui-badge-success">123</span> <span class="mui-badge mui-badge-warning">3</span> <span class="mui-badge mui-badge-danger">45</span> <span class="mui-badge mui-badge-purple">456</span> <!-- mui-badge-inverted : 无底色,文字是使用的颜色 --> <span class="mui-badge mui-badge-purple mui-badge-inverted">456</span> </div> </body></html>
效果
视频教程:点击这里
源码下载
关注下方的微信公众号,回复:005_数字角标(badges).code
欢迎加入交流群:451826376
更多信息:www.itcourse.top
阅读全文
0 0
- 005_跨平台开发_MUI_数字角标(badges)
- 004_跨平台开发_MUI_操作表(actionsheet)
- 006_跨平台开发_MUI_折叠面板(accordion)
- 003_跨平台开发_MUI_注意事项
- 001_跨平台开发_MUI_认识MUI
- 007_跨平台开发_MUI_按钮之普通按钮(button)
- 008_跨平台开发_MUI_按钮之加载中按钮(button)
- 002_跨平台开发_MUI_认识第一个MUI程序
- web开发平台_开发平台_开发平台_开发平台_开发平台
- MapGIS 数字三维开发平台
- Bootstrap 标签和徽章(Badges)
- 跨平台开发连载(2_线程基类)
- 跨平台开发连载(3_同步互斥锁)
- 跨平台开发连载(4_网络通讯类socket)
- 跨平台开发连载(5_编译开关)
- JDK&JRE&JVM_跨平台特性_开发环境配置_dos命令_字符集JAVA001-006
- 跨平台开发连载(6_跨平台IO的影响因素)
- 表单Tab页的使用_开发工具_开发平台_中间件平台_web开发工具_java开发平台_.net开发工具
- 雷诺-日产联盟与微软合力研发下一代智能网联车载系统
- 两位顶级专家加入HoloLens团队,微软又要推出什么样的黑科技
- C++内存配置和释放过程
- 二维码的生成
- 内部类(基础)
- 005_跨平台开发_MUI_数字角标(badges)
- Python与机器学习(二)
- Image Formation Pipeline --- 从2D到3D(一)
- 安卓图片二次采样的实现(http://cantellow.iteye.com/blog/838473)
- Windows 10装机量破4亿,3个月增加5000万台
- mysql centos操作系统优化
- Google计划于2017年发行Pixel 3 Laptop,所用系统为最新Andromeda OS
- ICCV | 深度三维残差神经网络:视频理解新突破
- 起底华为与全球各大巨头的战略合作:10 年 36 个联合创新中心(下)