声明方式(HBuilder会自动生成)
<!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> <p>内容区</p> </body> </html>
accordion 折叠面板
<body> <ul class="mui-table-view"> <!--折叠面板的默认选中项 mui-active--> <li class="mui-table-view-cell mui-collapse mui-active"> <!--折叠面板标题内容--> <a class="mui-navigate-right" href="#">面板1</a> <!--折叠面板具体内容--> <div class="mui-collapse-content"> <p>面板1子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板2</a> <div class="mui-collapse-content"> <p>面板2子内容</p> </div> </li> <li class="mui-table-view-cell mui-collapse"> <a class="mui-navigate-right" href="#">面板3</a> <div class="mui-collapse-content"> <p>面板3子内容</p> </div> </li> </ul> </body>
badges数字角标
<body> <!--默认灰色背景--> <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> <!--无色--> <span class="mui-badge mui-badge-inverted">1</span> </body>
button按钮
<body> <!--背景色按钮--> <button type="button" class="mui-btn">默认</button> <button type="button" class="mui-btn mui-btn-primary">蓝色</button> <button type="button" class="mui-btn mui-btn-success">绿色</button> <button type="button" class="mui-btn mui-btn-warning">黄色</button> <button type="button" class="mui-btn mui-btn-danger">红色</button> <button type="button" class="mui-btn mui-btn-royal">紫色</button> <!--边框色按钮--> <button type="button" class="mui-btn mui-btn-outlined">默认</button> <button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button> <button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button> <button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button> <button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button> <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button> </body>
时间: 2024-10-23 03:55:51