MUI-按钮的基本使用

超、凢脫俗 2022-08-09 13:42 423阅读 0赞

在任何一个框架当中控件部分一定离不开按钮，

对于MUI框架更是不例外，接下来我们来看看MUI框架的button按钮的用法。

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

#### 普通按钮 ####

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

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

![Center][]

若希望无底色、有边框的按钮，仅需增加`.mui-btn-outlined`类即可，代码如下：

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

效果如下所示：

![Center 1][]

是不是很简单。当然这只是我们列出的基本样式。我们也可以在这个基础上进行修改。

[Center]: /images/20220731/9b31edc602154b00bb0054335961b6de.png
[Center 1]: /images/20220731/bdf7339581664b4d8dd9f1045882fef2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，423人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI button(按钮）

mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为p

àì夳堔傛蜴生んèń/ 2023年07月19日 12:27/ 0 赞/ 71 阅读

相关 android用户界面设计:基本按钮,Android用户界面设计：基本按钮

Android用户界面设计：基本按钮用户, Android, 应用程序本文向你展示了在你的Android应用程序中创建一个简单的Button或ImageButton控件

朴灿烈づ我的快乐病毒、/ 2022年10月17日 13:43/ 0 赞/ 292 阅读

相关 MUI-LIST列表的基本使用

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在`ul`节点上添加`.mui-table-view`类、在`li`节点上添加`.mui-table-view-cel

古城微笑少年丶/ 2022年08月10日 00:36/ 0 赞/ 269 阅读

相关 MUI-CheckBox的基本介绍

checkbox常用于多选的情况，比如批量删除、添加群聊等； DOM结构 <div class="mui-input-row mui-checkbox">

秒速五厘米/ 2022年08月09日 13:43/ 0 赞/ 219 阅读

相关 MUI-按钮的基本使用

在任何一个框架当中控件部分一定离不开按钮，对于MUI框架更是不例外，接下来我们来看看MUI框架的button按钮的用法。 mui默认按钮为灰色，另外还提供了蓝色（blue

超、凢脫俗/ 2022年08月09日 13:42/ 0 赞/ 424 阅读

相关 MUI-badge数字角标的基本使用

badge（数字角标）数字角标一般和其它控件（列表、9宫格、选项卡等）配合使用，用于进行数量提示。角标的核心类是`.mui-badge`，默认为实心灰色背景；同时，m

深藏阁楼爱情的钟/ 2022年08月09日 12:44/ 0 赞/ 188 阅读

相关 mui教程1——mui介绍、创建mui项目与初步使用、MUI常用代码提示、webview基本操作、事件管理、mui的内置函数

一、MUI资源索引及MUI介绍 1，资源索引官网：[http://dev.dcloud.net.cn/mui/][http_dev.dcloud.net.cn_m

男娘i/ 2022年05月08日 03:34/ 0 赞/ 2199 阅读

相关 mui 动态添加数字输入框，增加减少按钮均无效

numbox 的自动初化是在 mui.ready 时完成的 mui 页面默认会自动初始化页面中的所有数字输入框，动态构造的 DOM 需要进行手动初始化。比如：您动态创

╰+攻爆jí腚メ/ 2021年11月11日 18:16/ 0 赞/ 524 阅读

相关 MUI点击发送按钮后不关闭软键盘

概述首先我使用 return false 仍然会关闭软键盘使用的是MUI项目下的模板，精简了代码，没具体搞明白到底是如何实现不关闭软键盘的因为我照着敲，软键盘也

向右看齐/ 2021年10月19日 07:28/ 0 赞/ 549 阅读

相关 mui使用过程中的坑

1.在文件夹下面新建HTML时，报错了。如下： ![20190321151410485.gif][] 此时，我们只需要将下面这两处修改一下就可以了。 ![waterma

怼烎@/ 2021年09月18日 13:48/ 0 赞/ 412 阅读