ABI报表-按钮样式引用图片的方法

4328
1

yangqh 数据老手Lv5

发表于2019-12-3 13:51

楼主
本帖最后由 yangqh 于 2019-12-3 13:55 编辑

爱美之心,人皆有之~现在咱们做表的同时也越来越追求样式设计、配色统一。
今天给大家分享一个做表小tips,如何在报表模板的按钮组件自定义样式上引用图片。

以绿色风格为例,先将要调用的按钮背景图片上传到图片管理器中:

图片下载: 选中图片.zip (2.79 KB, 下载次数: )

报表上添加三个按钮组件,分别设置自定义样式和选中自定义样式:


自定义样式:
  1. color:#2A9178;background-image:none;
复制代码
选中自定义样式:
  1. color:#97F0E2;background-color:#14824B;background-image: url(vfs/root/products/ebi/sys/picture/选中.png);background-size: cover;-webkit-background-size: cover;-o-background-size: cover;
复制代码
PS:
1、选中自定义样式中“vfs/root/products/ebi/sys/picture/选中.png”是背景图片所在资源管理器的完整路径;
2、background-size: cover;-webkit-background-size: cover;-o-background-size: cover;用来设置背景图片等宽高适应按钮大小(由于是等宽高适应,所以为了适应后效果更佳,建议按钮组件的宽高和背景图片宽高等比例);
3、选中-》未选中 状态切换后,需要把按钮样式还原,所以需要在自定义样式属性中设置下希望还原后的样式;


最终效果:








最近看过此主题的会员

leony

esen_4XH2QRUZD7

esen_53UOMOENFW

lizf

wxw

贯佳睿

esen_513E25YO2T

17608439833

esen_4ZBL1AKY31

esen_4ZEA5VIAY6

esen_4XMY0N6IMU

v笑向前走

1个回答

只看楼主

小亿 管理员

发表于2019-12-5 09:55

只看该作者

取消 关注该作者的回复

沙发

感谢分享,这对薏米们老说非常有用哟!

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

400咨询:400-0011-866

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号