数字角标--有底色和无底色
数字角标一般和其它控件(列表、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>
代码效果: