WebApp开发----数字角标

烊烊！

于 2022-03-24 21:18:41 发布

阅读量1.1k

点赞数

文章标签： web app

本文链接：https://blog.csdn.net/m0_58760840/article/details/123721685

版权

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

数字角标一般和其它控件（列表、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>

代码效果：