MUI-button（按钮）,块级按钮

最新推荐文章于 2024-04-19 04:19:01 发布
最新推荐文章于 2024-04-19 04:19:01 发布
阅读量6.6k 收藏 2
点赞数
分类专栏： MUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LzzMandy/article/details/84992980
版权

本文主要介绍块级按钮，它和普通按钮的不同之处在于，块级按钮是填充整行的，而普通按钮可以根据内容自适应宽度。

块级按钮，仅需增加.mui-btn-block类即可让其变成块；

若想带有底色，则增加.mui-btn-颜色值或.mui-btn-场景

若想无底色、有边框，再增加.mui-btn-outlined类即可

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<style>
			.mui-content-padded{
			  	margin: 10px;
			  }
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-back mui-pull-left"></a>
		    <h1 class="mui-title">块级按钮</h1>
		</header>
		<div class="mui-content">
		    <div class="mui-content-padded">
		        <button type="button" class="mui-btn mui-btn-block">Block button</button>
		        <button type="button" class="mui-btn mui-btn-primary mui-btn-block">Block button</button>
		        <button type="button" class="mui-btn mui-btn-block mui-btn-outlined">Block button</button>
		        <button type="button" class="mui-btn mui-btn-primary mui-btn-block mui-btn-outlined">Block button</button>
		    </div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack:true //启用右滑关闭功能
		});
	</script>
</html>

 

佛佛ง
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
MUI-button（按钮），带图标，图标可居左/居右
LzzMandy的博客
12-13 5962
一般图标包括首页、搜索、添加、删除等，分别对应的类如下表所示： 图标类，默认图标居左 mui-icon mui-icon-home 首页 mui-icon mui-icon-search 搜索 mui-icon mui-icon-plus 添加 mui-icon mui-icon-trash 删除 mui-icon ...
MUI button(按钮）
秋城落叶的博客
03-31 3355
mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如...
Bootstrap 按钮的使用
最新发布
2301_79099606的博客
04-19 860
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取有帮助，可以扫码获取！！（备注：前端）**[外链图片转存中…(img-fGYAB4le-1713471475148)]一个好的心态和一个坚持的心很重要。
mui按钮操作
weixin_34109408的博客
06-03 551
第一种：通过id操作 document.getElementById("btnSelect").addEventListener("tap", function() { var name = document.getElementById("name").value; getlist(name); ...
007_跨平台开发_MUI_按钮之普通按钮（button）
qq_33605778的博客
10-27 809
认识 mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如：通过.mui-btn
MUI-按钮的基本使用
热门推荐
知他人之所知，晓他人之不晓。
10-26 2万+
在任何一个框架当中控件部分一定离不开按钮， 对于MUI框架更是不例外，接下来我们来看看MUI框架的button按钮的用法。 mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即
Bootstrap历练实例：块级按钮
adiking520110的博客
11-23 210
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例：块级按钮</title> <meta charset="...
gradient-mui-button:基于Material-UI的现代渐变颜色按钮组件
05-15
npm i ' @iktakahiro/gradient-mui-button ' yarn add ' @iktakahiro/gradient-mui-button ' 用法 import { ContainedButton } from '@iktakahiro/gradient-mui-button' const MyComponent = ( ) => { return ( ...
-mui-lenacloud-
05-17
简单概述这是带登录和设置功能的mui模板项目，主要为了演示登录流程及设置界面div窗口切换效果；核心功能启动App后校验登录状态，若已登录，直接跳转应用首页；...支持评分、分享、拨打客服电话-mui-lenacloud-
mui-min.js
04-10
前端框架Mui会用到的js动态文件，前后还有ttf文件以及css文件
mui-0.9.41
04-18
《MUI框架详解：以mui-0.9.41版本为中心》 MUI框架，作为一款备受开发者青睐的移动开发工具，以其高效、轻量级的特性在业界独树一帜。本文将以"mui-0.9.41"这一特定版本为切入点，深入探讨MUI框架的核心理念、主要...
自定义MUI按钮被按下去时的颜色
05-12
mui的按钮被按下时的颜色主要是通过修改样式来实现的，即未被按下时是一种颜色，被按下时是另一种颜色。
mui-icons-extra.ttf
12-25
mui框架开发
MUI-button（按钮），【有底色按钮】&【无底色、有边框按钮】&【链接按钮】
LzzMandy的博客
12-13 6606
本文主要介绍【有底色按钮】&amp;【无底色、有边框按钮】&amp;【链接按钮】 mui使用.mui-btn类即可生成一个默认灰色按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮。 场景和颜色值等同显示效果 mui-btn-primary mui-btn-blue mui-btn-success mui-btn-green mui-btn...
html mui按钮居中,《mui学习笔记》：自定义选项卡
weixin_39843215的博客
06-26 804
准备工作mui模板IDE：HBuilder分析依据mui原有的实现，自定义选项卡风格，即满足了项目的需求，也达到熟悉mui的目的。对mui css做式样调整开始先看自定义后的选项卡 效果：自定义原生的mui选项卡效果：顶部选项卡-可左右拖动html5页面代码如下：支付宝口碑朋友我的div1div2div3div4css式样主要部分：.green-ball {width: 10px;height: ...
移动端-MUI-滑块-增减按钮
liuhao9999的博客
03-03 583
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="app...
html mui按钮居中,mui实现下方突出大按钮图标
weixin_35356909的博客
06-26 950
mui实现下方突出大按钮图标所属分类：[APP]|创建时间：2017-11-16|文章属性：原创|文章来源：http://windfly.cn|作者：windfly#原理> 使用nativeView原生画图，第一个画原型按钮和外扩边线，第二个画其他按钮#参考画图代码##画图代码```var self = plus.webview.currentWebview(),leftPo...
mui框架中，实现button平铺一行，没有空隙
yijiupingfan0914的博客
06-27 2757
1.css样式就是把button的边框去掉.mui-btn, button, input[type=button], input[type=reset], input[type=submit]{ border-radius: 0; border: 0px solid #ccc; }2.&lt;!--底部的工具条开始--&gt; &lt;nav class="mui-bar mui-...
MUI-button（按钮），加载中按钮
LzzMandy的博客
12-14 3906
当用户点击按钮后，需要向服务端提交数据或等待服务端响应时，常常需要提示“正在提交”，并将按钮设置为disabled，避免用户重复点击、重复提交；加载中按钮支持修改 loading状态的文案、显示的icon和icon的位置,如下: 属性名 作用 data-loading-text loading 状态显示的文案,默认为: loading data-loading-icon ...
mui中button按钮一点击会变颜色
01-06
在 MUI 中，Button 按钮是一种常见的用户交互元素，我们可以通过简单的代码实现按钮点击后变色的效果。 要实现按钮点击后变色，我们可以使用 MUI 提供的属性和样式。 首先，我们需要为按钮添加 onClick 属性，将点击事件与相应的处理函数关联起来。在处理函数中，我们可以使用 state 来控制按钮的颜色。 ```jsx import React, { useState } from 'react'; import Button from '@mui/material/Button'; const MyButton = () => { const [buttonColor, setButtonColor] = useState('primary'); const handleClick = () => { // 在点击事件中修改按钮的颜色 setButtonColor('secondary'); }; return ( <Button color={buttonColor} onClick={handleClick}> 我是按钮 </Button> ); }; ``` 在上述代码中，我们创建了一个名为 `MyButton` 的组件。使用 `useState` 钩子函数创建了一个 `buttonColor` 状态变量，并将其初始值设置为 `primary`。 然后，我们创建了一个名为 `handleClick` 的点击事件处理函数。在该函数中，我们通过调用 `setButtonColor` 更新 state 来将按钮的颜色修改为 `secondary`。 最后，在组件的返回部分，我们使用 MUI 的 Button 组件，并将 `color` 属性绑定到 `buttonColor` 变量，将按钮的颜色设置为 `primary` 或 `secondary`。 这样，当按钮被点击时，它的颜色将变为 `secondary`。 以上就是一种简单的使用 MUI 实现按钮点击变色的方法。当然，你也可以根据自己的需求自定义按钮样式，并根据实际情况调整按钮颜色的变化逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佛佛ง

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值