MUI button(按钮）

最新推荐文章于 2024-08-05 23:01:19 发布

秋城落叶

最新推荐文章于 2024-08-05 23:01:19 发布

阅读量3.4k

点赞数

本文链接：https://blog.csdn.net/qq_40861561/article/details/105216656

版权

本文档介绍了MUI框架中按钮的使用方法，包括普通按钮和加载中按钮的实现。普通按钮支持灰色及蓝色、绿色、黄色、红色、紫色五种色系，通过添加特定class实现不同颜色效果。加载中按钮则允许自定义加载文案、icon和位置。

摘要由CSDN通过智能技术生成

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

1.普通按钮

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

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

2.加载中按钮

加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置,如下:

属性名	作用
`data-loading-text`	loading 状态显示的文案,默认为: `loading`
`data-loading-icon`	loading 状态显示的icon,默认为`mui-spinner`或`mui-spinner mui-spinner-white`ÿ