mui 之 按钮

说明

快捷键：mbutton

• mui默认按钮为灰色
• 色系：蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)
• 五种色系对应五种场景，primary、success、warning、danger、royal；

使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成 对应色系的按钮。

默认按钮

有底色

<div class="mui-content">
    <!-- 距离边框有点距离 好看一点-->
    <div class="mui-content-padded">
        <!-- mbutton -->
        <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>
        <button type="button" class="mui-btn mui-btn-royal">紫色</button>
    </div>
</div>

无底色

无底色，仅需增加.mui-btn-outlined类即可

<div class="mui-content">
    <div class="mui-content-padded">
        <!-- mbutton -->
        <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>
        <button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>
    </div>
</div>

带图标 数字角标的按钮

可以直接在按钮上加，也能在包裹一个标签`。

带图标的按钮

<div class="mui-content-padded">
    <h5>直接写</h5>
    <button type="button" class="mui-btn mui-btn-success mui-icon mui-icon-qq"></button>
    <h5>包裹图标</h5>
    <button type="button" class="mui-btn mui-btn-success">
        <span class="mui-icon mui-icon-qq"></span>
    </button>
</div>

带数字角标的按钮

角标的背景颜色会自动透明，需要其他颜色自己定义。

<div class="mui-content-padded">
    <h5>带数字角标按钮</h5>
    <button type="button" class="mui-btn mui-btn-success">
        <span>请求成功</span><span class="mui-badge">12</span>
    </button>
</div>

加载中按钮

方式一：官方的写法

<div class="mui-content-padded">
    <h5>加载中 按钮</h5>
    <button id="login" type="button" class="mui-btn mui-btn-success" data-loading-text="登录中">登录</button>
    <script>
        // 绑定是一个事件
        mui(document.body).on("tap","#login",function(e){
            var btn = mui(this)
            // 改变按钮为 加载中的样式
            btn.button("loading");
            // 两秒后还原
            setTimeout(function(){
                // 还原按钮
                btn.button("reset")
            },2000)
        })
    </script>
</div>

方式二：使用点击事件

<div class="mui-content-padded">
    <h5>加载中 按钮</h5>
    <button onclick="login(this)" type="button" class="mui-btn mui-btn-success" data-loading-text="登录中">登录</button>
    <script>
        // 传入 this
        function login(e){
            var btn = mui(e)
            btn.button("loading");
            // 两秒后还原
            setTimeout(function(){
                btn.button("reset")
            },2000)
        }
    </script>
</div>

方式三：事件监听

<div class="mui-content-padded">
    <h5>加载中 按钮：事件监听</h5>
    <button id="login" type="button" class="mui-btn mui-btn-success" data-loading-text="登录中">登录</button>
    <script>
        document.getElementById("login").addEventListener("tap",function login(e){
            var btn = mui(this)
            btn.button("loading");
            // 两秒后还原
            setTimeout(function(){
                btn.button("reset")
            },2000)
        })
    </script>
</div>