007_跨平台开发_MUI_按钮之普通按钮（button）

最新推荐文章于 2021-06-26 07:10:04 发布

_枸杞子_

最新推荐文章于 2021-06-26 07:10:04 发布

阅读量811

点赞数

分类专栏： MUI_教程版文章标签：跨平台 mui

本文链接：https://blog.csdn.net/qq_33605778/article/details/78370205

版权

MUI_教程版专栏收录该内容

10 篇文章 0 订阅

订阅专栏

认识

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

微信公众号：JavaWeb架构师

有背景色

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

            <!-- 1.有背景色 -->

            <div class="styleBtn">
                <!-- 默认样式：背景灰色，字体黑色 -->
                <button type="button" class="mui-btn">默认</button>
                <!-- 增加样式：mui-btn-red，背景红色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-red">红色</button>
                <!-- 增加样式：mui-btn-blue，背景蓝色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-blue">蓝色</button>
                <!-- 增加样式：mui-btn-green，背景绿色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-green">绿色</button>
                <!-- 增加样式：mui-btn-yellow，背景黄色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-yellow">黄色</button>
                <!-- 增加样式：mui-btn-purple，背景紫色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-purple">紫色</button>
            </div>

微信公众号：JavaWeb架构师

无背景色、有边框

若希望无底色、有边框的按钮，仅需增加.mui-btn-outlined类即可。

            <!-- 2.无背景色、有边框，增加样式：mui-btn-outlined，背景无色，边框和字体是设置的颜色 -->

                <div class="styleBtn">
                    <button type="button" class="mui-btn mui-btn-outlined">默认</button>
                    <button type="button" class="mui-btn mui-btn-red mui-btn-outlined">红色</button>
                    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">蓝色</button>
                    <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">绿色</button>
                    <button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">黄色</button>
                    <button type="button" class="mui-btn mui-btn-purple mui-btn-outlined">紫色</button>

                </div>

微信公众号：JavaWeb架构师

自定义样式

设置button的background-color和color属性就行。

            /* 自定义样式 */
            .mui-button-diy {
                /*背景色*/
                background-color: #EC971F;
                /*字体颜色*/
                color: #8A6DE9;
            }

            <!-- 3.更多样式：修改button的background-color和color -->
                <div class="styleBtn">
                    <!-- mui-button-diy：自定义样式 -->
                    <button type="button" class="mui-btn mui-button-diy">默认</button>
                    <button type="button" class="mui-btn mui-button-diy">红色</button>
                    <button type="button" class="mui-btn mui-button-diy">蓝色</button>
                    <button type="button" class="mui-btn mui-button-diy">绿色</button>
                    <button type="button" class="mui-btn mui-button-diy">黄色</button>
                    <button type="button" class="mui-btn mui-button-diy">紫色</button>

                </div>

微信公众号：JavaWeb架构师

测试代码

<!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>

        <style type="text/css">
            .styleBtn {
                margin-top: 20px;
                /*让按钮居中*/
                text-align: center;
            }

            /* 自定义样式 */
            .mui-button-diy {
                /*背景色*/
                background-color: #EC971F;
                /*字体颜色*/
                color: #8A6DE9;
            }

        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">按钮（button）</h1>
        </header>

        <div class="mui-content">
            <!-- 按钮：button标签，class属性为mui-btn，还有一些修饰样式 -->

            <!-- 1.有背景色 -->

            <div class="styleBtn">
                <!-- 默认样式：背景灰色，字体黑色 -->
                <button type="button" class="mui-btn">默认</button>
                <!-- 增加样式：mui-btn-red，背景红色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-red">红色</button>
                <!-- 增加样式：mui-btn-blue，背景蓝色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-blue">蓝色</button>
                <!-- 增加样式：mui-btn-green，背景绿色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-green">绿色</button>
                <!-- 增加样式：mui-btn-yellow，背景黄色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-yellow">黄色</button>
                <!-- 增加样式：mui-btn-purple，背景紫色，字体白色 -->
                <button type="button" class="mui-btn mui-btn-purple">紫色</button>
            </div>


            <!-- 2.无背景色、有边框，增加样式：mui-btn-outlined，背景无色，边框和字体是设置的颜色 -->

                <div class="styleBtn">
                    <button type="button" class="mui-btn mui-btn-outlined">默认</button>
                    <button type="button" class="mui-btn mui-btn-red mui-btn-outlined">红色</button>
                    <button type="button" class="mui-btn mui-btn-blue mui-btn-outlined">蓝色</button>
                    <button type="button" class="mui-btn mui-btn-green mui-btn-outlined">绿色</button>
                    <button type="button" class="mui-btn mui-btn-yellow mui-btn-outlined">黄色</button>
                    <button type="button" class="mui-btn mui-btn-purple mui-btn-outlined">紫色</button>

                </div>

            <!-- 3.更多样式：修改button的background-color和color -->
                <div class="styleBtn">
                    <!-- mui-button-diy：自定义样式 -->
                    <button type="button" class="mui-btn mui-button-diy">默认</button>
                    <button type="button" class="mui-btn mui-button-diy">红色</button>
                    <button type="button" class="mui-btn mui-button-diy">蓝色</button>
                    <button type="button" class="mui-btn mui-button-diy">绿色</button>
                    <button type="button" class="mui-btn mui-button-diy">黄色</button>
                    <button type="button" class="mui-btn mui-button-diy">紫色</button>

                </div>
        </div>
    </body>

</html>

效果

微信公众号：JavaWeb架构师

源码下载

关注下方的微信公众号，回复：007_按钮之普通按钮（button）.code

欢迎加入交流群：451826376

更多信息：www.itcourse.top

完整教程PDF版本下载

_枸杞子_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
007_跨平台开发_MUI_按钮之普通按钮（button）

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

扫一扫

专栏目录