知识分类
后端
前端
设计
开源组件/产品
APP
其他
广告招募

3步教你如何修改uniapp button组件颜色?

管理员
发布于:2023-08-29 22:59:37
导读:uniapp的button组件type="primary"各平台默认颜色不同。若想统一为自定义主题色,官方建议改用type="default"并自行写样式。代码如下:1.设置按钮背景色为$uni-primary(或十六进制颜色),文字白色;2.设置悬停状态的颜色;3.在button标签添加hover-class="is-hover"属性实现点击效果。通过此方法可让按钮在不同端显示相同的主题色。

uniapp的button组件type=“primary” 默认颜色如下:

微信小程序、360小程序为绿色,App、H5、百度小程序、支付宝小程序、飞书小程序、快应用为蓝色,抖音小程序为红色,QQ小程序为浅蓝色。

那么如何修改成和自己的主题色相搭配的颜色呢?官方的建议是:”如想在多端统一颜色,请将type改用default,然后自行写样式“。

直接上代码:

1.修改按钮颜色

button[type=default]{
	background-color:$uni-primary;  // 这里我使用的是自定义的主题色,也可以直接换成十六进制的颜色,如:#000000
	color: #fff;
}

2.修改按钮点击(按下去)的颜色

button.is-hover {
	color: rgba(255, 255, 255, 0.6);
	background-color: $uni-primary;;
	border-color: $uni-primary;;
  }

3.在button组件上加上hover-class属性:

<button type="default" hover-class="is-hover"> 充值 </button>
关键词: uniapp button 组件 颜色
上一篇:Vue class动态绑定样式,多分支判断绑定或类似Switch判断该如何使用
下一篇:uni-app uni-fab插件用代码控制展开和关闭
搜索内容
最新文章
  • 线程和协程的区别
  • 什么是敏捷式开发?
  • 什么是GEO生成式引擎优化?和SEO
  • 如何保证文件上传安全?
  • Go语言时间格式为什么和其他语言不一
  • 软件许可协议有哪些?之间的区别是什么
  • FrameCoder非可站群框架支持
  • git忽略文件.gitignore,
  • 什么AI模型上下文协议(MCP)?M
  • 为什么有些页面的图片看不见?可能是被
精彩文章
  • 1 MSYS2中安装使用GCC的正确方法
  • 2 vscode用一个插件快速生成Vue
  • 3 Layui 怎么样更换主题颜色?
  • 4 连接WIFI出现无Internet
  • 5 3步教你如何修改uniapp but
  • 6 OBS在银河麒麟或ubuntu等核心
  • 7 FrameCoder非可,基于web
  • 8 JavaScript 判断对象是否为
  • 9 小程序真机调试 报错 define
  • 10 什么是PHP站群以及使用php开源框
工信部备案:苏ICP备2023011827号-1
苏公网安备 32111202000338号