MUI-button（按钮）,带有数字角标

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

本文主要介绍带有数字角标的按钮，效果图如下：

源码：

<!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-btn{
		        margin-top: 10px;
		        margin-right: 100px;
		        margin-left: 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">
					默认按钮与数字角标
					<span class="mui-badge">1</span>
				</button>
				<button type="button" class="mui-btn">
					默认按钮与无底色、无边框的数字角标
					<span class="mui-badge mui-badge-primary mui-badge-inverted">1</span>
				</button>
				<button type="button" class="mui-btn mui-btn-primary">
					蓝色按钮与蓝色数字角标
					<span class="mui-badge mui-badge-primary">2</span>
				</button>
				<button type="button" class="mui-btn mui-btn-success">
					绿色按钮与绿色数字角标
					<span class="mui-badge mui-badge-success">12</span>
				</button>
				<button type="button" class="mui-btn mui-btn-warning">
					黄色按钮与黄色数字角标
					<span class="mui-badge mui-badge-warning">121</span>
				</button>
				<button type="button" class="mui-btn mui-btn-danger">
					红色按钮与红色数字角标
					<span class="mui-badge mui-badge-danger">999</span>
				</button>
				<button type="button" class="mui-btn mui-btn-royal">
					紫色按钮与紫色数字角标
					<span class="mui-badge mui-badge-royal">999</span>
				</button>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	</script>
</html>

 

佛佛ง
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html 加号按钮样式,纯CSS样式实现数字加减按钮的最佳方案
weixin_39576270的博客
06-14 2078
前言：对于数字加减按钮的实现，以前用过不少方案，诸如：1.使用背景图片——这种效果比较好，缺点是样式控制有点复杂了，还需要使用图片；2.直接使用“+”“-”——这种方法简单粗暴，最容易实现，缺点是不同浏览器环境下显示略有不同，符号大小机线条粗细不太好调；3.使用unicode字符，这个跟方法2差不多一样的问题，而且兼容性不好，出现过部分手机不显示的问题；4.使用css样式，使用标签生成绝对定位的横...
MUI button(按钮）
秋城落叶的博客
03-31 3355
mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为primary、success、warning、danger、royal；使用.mui-btn类即可生成一个默认按钮，继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮，例如...
RadioButton小红点、数字角标的实现
一杯清泉
07-26 1542
RadioButton通常作为RadioGroup的子布局嵌套在里面，单独使用不太常用，本文实现RadioButton小红点、数字角标，主要是利用onDraw方法进行重写，绘制小红点、数字角标。如下： public class AppRadioButton extends AppCompatRadioButton { private Paint mPaint; private boolean isShowDot; private boolean isShowNumbe..
html如何到点击按钮显示数字,JS点击按钮显示出点击数写法
weixin_26950847的博客
06-28 2491
实现步骤：1、写一个p标签，指定一个id选择器，输入数字！2、写一个input标签，指定type属性的属性值为button，创建一个按钮，加入onclick事件！3、为p标签和input标签指定相关的CSS样式(可以省略)4、用js创建一个自加的函数，在函数中用document对象的getElementById()方法，选中p标签。5、通过innerHTML获取p标签的内容，实现自加！！实现代码如...
Android Button drawable消息样式 数字提示
afufufufu的博客
06-01 571
效果图 shape ： 首先在res/drawable文件夹下，新建一个文件，命名为：tv_red_dot.xml。剩下三个就不列举了；用的时候直接调用android:background="@drawable/tv_red_dot即可" shape 的参数有：android:shape=“rectangle” ， “oval” ， “line” ， “ring” 分别是 为矩形（rectangle）、椭圆形(oval)、线性形状(line)、环形(ring) 属性: solid：实心，就是填充的
MUI数字角标,用于进行数量提示
Mr丶GUO
06-12 4210
用于进行数量提示。 角标的核心类是.mui-badge，默认为实心灰色背景；同时，mui还内置了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标<span class="mui-badge">1123</span> <span class="mui-badge mui-badge-primary">11232</span> <span
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-table:改进的Material-UI表
05-14
同时，这也意味着开发者可以充分利用Material-UI的其他组件，如对话框、按钮等，与MuiTable无缝集成，构建出一致的用户界面。 五、丰富的自定义选项 尽管简化了基本用法，MuiTable并未牺牲自定义能力。开发者可以...
mui-datatables:使用Material-UI的React数据表-https
04-28
MUI-Datatables-Material-UI的数据表 MUI-Datatables是基于构建的响应式数据表组件。 它具有过滤，，查看/隐藏列， ，搜索，导出为CSV下载，打印，可选行，可扩展行，分页和排序等功能。 除了在大多数视图上自定义...
-mui-lenacloud-
05-17
简单概述这是带登录和设置功能的mui模板项目，主要为了演示登录流程及设置界面div窗口切换效果；核心功能启动App后校验登录状态，若已登录，直接跳转应用首页；...支持评分、分享、拨打客服电话-mui-lenacloud-
html在消息按钮上增加数量角标的实现代码
09-28
主要介绍了html在消息按钮上增加数量角标的实现代码,需要的朋友可以参考下
mui-min.js
04-10
前端框架Mui会用到的js动态文件，前后还有ttf文件以及css文件
角标（就是按钮或图标右上角显示的数字或者消息提醒）
weixin_45856221的博客
12-06 1595
角标（就是按钮或图标右上角显示的数字或者消息提醒）
设置button未读角标
it_15077647703的博客
06-07 416
接上文：https://blog.csdn.net/it_15077647703/article/details/117648122 因为项目需求要在button上添加未读角标，为了方便使用我就直接继承button图文样式自定义类来设置类 继承于ReLayoutBuuton（上文的button类） .h文件如下 @interface LayoutBadgeButton : ReLayoutBuuton @property (strong, nonatomic) UILabel *badge; /** 角标
ios 消息按钮添加角标显示
ONE_PERSON_ONE_LIFE的博客
11-22 3539
   在做聊天时,其它界面的消息按钮展示,会遇到显示未读消息条数的情况.    今天整理下,处理消息角标设置方法.    直接上代码.    创建一个类 BageButton继承UIButton类,并拓展这个按钮的属性.    .h文件:   //设置角标数字font   #define SCBadgeNumberFontSize [UIFont systemFontOfSize:...
循环出按钮点击按钮显示按钮上面文字 vue el-button_前端经典面试题解密：Vue 的计算属性如何实现缓存？（原理深入揭秘）...
weixin_42183486的博客
01-30 311
前言很多人提起 Vue 中的 computed，第一反应就是计算属性会缓存，那么它到底是怎么缓存的呢？缓存的到底是什么，什么时候缓存会失效，相信还是有很多人对此很模糊。本文以 Vue 2.6.11 版本为基础，就深入原理，带你来看看所谓的缓存到底是什么样的。注意本文假定你对 Vue 响应式原理已经有了基础的了解，如果对于 Watcher、Dep和什么是 渲染watcher 等概念还不是很...
MUI实现程序快捷方式上面的提示数字
qq_33042641的博客
03-19 2820
从安卓转做mui也快一年，其中踩了无数的坑，其中样式最让人头疼。。。。以上属吐槽，进入正文。 这次是公司提出需求，想在应用的快捷方式上显示角标，然后去MUi官网看下文档，安卓目前只支持MIUI v5。。。。 然后网上各种找资料，找到一个觉得可行的方案：点我链接。 只是看了https://github.com/leolin310148/ShortcutBadger的更新日志和源码发现小米的数字...
css如何实现数字在图标上显示
热门推荐
wby_430的博客
08-05 1万+
我们在写前端页面的时候经常会遇到带有数字的图标，例如在百度地图上标记地点的红色图标，上面的图标显示这12345…等这些数字，那么如何去实现让数字或者字母显示在图标上呢？ 我们分为两步来实现： 第一步：通过css来先固定数字的位置。代码如下（1）div中定义数字的class属性： <span class="catalog_number">1</span> css中 （2）在css中设置数字的位
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、付费专栏及课程。

余额充值