Web App开发----按钮

最新推荐文章于 2023-03-15 12:00:51 发布

烊烊！

最新推荐文章于 2023-03-15 12:00:51 发布

阅读量1.6k

点赞数

文章标签： web app

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

版权

mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮。

1.普通按钮

在button节点上增加.mui-btn类，即可生成默认按钮；若需要其他颜色的按钮，则继续增加对应class即可，比如.mui-btn-blue即可变成蓝色按钮

<!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>
	<h5>有底色按钮:</h5>
		<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>
		<h5>无底色按钮(使用父元素的背景颜色):</h5>
		<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>
		<h5>链接按钮:</h5>
		<button type="button" class="mui-btn mui-btn-link">删除</button>
		<h5>默认input标签样式:</h5>
		<input type="button" value="登录" />
		<input type="reset" value="重置" />
		<input type="submit" value="提交" /><br />
		<button type="button">默认button标签样式</button>
</body>
</html>

代码效果：

2.带图标的按钮

 <h5>图标居左:</h5>
			<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-home">首页</button>
			<button type="button" class="mui-btn mui-icon mui-icon-search">搜索</button>
			<button type="button" class="mui-btn mui-btn-link mui-icon mui-icon-back">
				返回
			</button>
			<button type="button" class="mui-btn mui-btn-link">
				返回
				<span class="mui-icon mui-icon-forward"></span>
			</button>
			<h5>图标居右:</h5>
			<button type="button" class="mui-btn mui-btn-danger mui-icon mui-icon-home mui-right">首页</button>
			<button type="button" class="mui-btn mui-icon mui-icon-search mui-right">搜索</button>
			<button type="button" class="mui-btn mui-btn-link">
				<span class="mui-icon mui-icon-back">上一步</span>
			</button>
			<button type="button" class="mui-btn mui-btn-link mui-icon mui-icon-forward mui-right">
					下一步
			</button>

代码效果：

3.带数字的按钮

颜色被覆盖

 <h5>......</h5>
		<button type="button" class="mui-btn mui-btn-primary">蓝色<span class="mui-badge">1</span></button>
		<button type="button" class="mui-btn mui-btn-success">绿色<span class="mui-badge mui-badge-danger">2</span></button>
		<button type="button" class="mui-btn mui-btn-warning">黄色<span class="mui-badge mui-badge-warning">3</span></button>
		<button type="button" class="mui-btn mui-btn-danger">红色<span class="mui-badge">4</span></button>
		<h5>......</h5>
		<button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色<span class="mui-badge mui-badge-danger">6</span></button>
		<button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色<span class="mui-badge mui-badge-danger">7</span></button>
		<button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色<span class="mui-badge mui-badge-warning">8</span></button>
		<button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色<span class="mui-badge">9</span></button>

代码效果：

4.块级按钮

<h5>块级按钮:</h5>
		<button type="button" class="mui-btn mui-btn-block">按钮1</button>
		<button type="button" class="mui-btn mui-btn-block mui-btn-warning">按钮2</button>
		<button type="button" class="mui-btn mui-btn-block mui-btn-success">按钮3</button>
		<button type="button" class="mui-btn mui-btn-block mui-btn-primary">按钮4</button>
        <button type="button" class="mui-btn mui-btn-block mui-btn-danger">按钮5</button>
		<button type="button" class="mui-btn mui-btn-block mui-btn-royal">按钮6</button>

代码效果：