WebApp开发----数字角标

数字角标--有底色和无底色

数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标。

若无需底色，则增加.mui-badge-inverted类即可

<!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>
<body><h4>有底色:</h4><ul class="mui-table-view"> <li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板1<span class="mui-badge">1</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板2<span class="mui-badge mui-badge-primary">12</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板3<span class="mui-badge mui-badge-success">123</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板4<span class="mui-badge mui-badge-warning">1234</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板5<span class="mui-badge mui-badge-danger">12345</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板6<span class="mui-badge mui-badge-purple">123456</span></a></li></ul><!-- 若无需底色，则增加.mui-badge-inverted类即可 --><h4>无底色:</h4><ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板7<span class="mui-badge mui-badge-inverted">1</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板8<span class="mui-badge mui-badge-primary mui-badge-inverted">12</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板9<span class="mui-badge mui-badge-success mui-badge-inverted">123</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板10<span class="mui-badge mui-badge-warning mui-badge-inverted">1234</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板11<span class="mui-badge mui-badge-danger mui-badge-inverted">12345</span></a></li><li class="mui-table-view-cell mui-collapse"><a class="" href="#">面板12<span class="mui-badge mui-badge-purple mui-badge-inverted">123456</span></a></li></ul><h5>有底色:</h5><span class="mui-badge">1</span><span class="mui-badge mui-badge-red">11</span><span class="mui-badge mui-badge-danger">11</span><span class="mui-badge mui-badge-purple">21</span><span class="mui-badge mui-badge-success">31</span><span class="mui-badge mui-badge-warning">41</span><span class="mui-badge mui-badge-blue">51</span><h5>无底色:</h5><span class="mui-badge mui-badge-inverted">1</span><span class="mui-badge mui-badge-red mui-badge-inverted">11</span><span class="mui-badge mui-badge-danger mui-badge-inverted">11</span><span class="mui-badge mui-badge-purple mui-badge-inverted">21</span><span class="mui-badge mui-badge-success mui-badge-inverted">31</span><span class="mui-badge mui-badge-warning mui-badge-inverted">41</span><span class="mui-badge mui-badge-blue mui-badge-inverted">51</span></body>
</html>

代码效果：

WebApp开发----数字角标相关推荐

android 为桌面图标添加数字角标
android 为桌面图标添加数字角标我的github项目 BadgeForAppIcon 看完麻烦 star 一下在某些app的设计中,产品经理总会想当然的提出为桌面图标添加数字角标的需求.作为 ...
HTML页面仿iphone数字角标
做仿iphone样式的数字角标,用简单的css来实现 <html> <head> <title>角标数字</title> <style type= ...
Mui的APPLOGO数字角标小米问题
之前写了篇博客,生成jar包并添加进项目离线打包安卓APP,实现APP上LOGO的数字角标,但是最近有用户寄过来一台小米max3,因为APP启动后执行到显示数字角标的时候会崩. 通过Android S ...
MUI-list（列表），普通列表、带箭头列表、带数字角标列表、带图文列表
本文主要介绍list(列表)的几种展现形式:普通列表.带箭头列表.带数字角标列表.带图文列表效果图如下: 1.普通列表:只需要在ul节点上添加.mui-table-view类.在li节点上添加.mu ...
Andoid 桌面icon添加数字角标
产品经理拿着iPhone对我说,"这加上角标",转身就走了. 在Android系统中,是不支持BadgeNumber的,也就是原生Android系统是没有类似于ios 桌面icon ...
uni-app消息推送华为不显示数字角标？？？
操作过程: 1. 将设备的角标显示方式改为数字角标 2. 在uni-app代码中设置角标: plus.runtime.setBadgeNumber(1) //添加角标发现App的角标并没有显示数字. ...
手机计算机数字显示在桌面上,手机桌面上的应用如何取消显示的数字角标
手机桌面上的应用如何取消显示的数字角标很多小伙伴都还不知道,下面IEfans小编为大家整理了取消显示的数字角标的流程一览,怎么取消显示的数字角标,一起来看看吧! 方法/步骤分享: 1.首先,点击手机桌 ...
Android实现应用数字角标
最近遇到一个需求,需要将APP内某几个tab的未读消息数显示到桌面的应用角标上,于是查阅了一番资料,并咨询了几家应用开放平台,踩了几个小坑,最终勉强实现了自己的需求.由于国内主流手机为华为.小米.vi ...
Android设置应用数字角标
最近遇到一个需求,需要将APP内某几个tab的未读消息数显示到桌面的应用角标上,于是查阅了一番资料,并咨询了几家应用开放平台,踩了几个小坑,最终勉强实现了自己的需求.由于国内主流手机为华为.小米.vi ...

WebApp开发----数字角标

数字角标--有底色和无底色

WebApp开发----数字角标相关推荐

最新文章

热门文章