-
-
yangqh 数据老手Lv5
发表于2019-12-3 13:51
楼主
本帖最后由 yangqh 于 2019-12-3 13:55 编辑
爱美之心，人皆有之~现在咱们做表的同时也越来越追求样式设计、配色统一。
今天给大家分享一个做表小tips，如何在报表模板的按钮组件自定义样式上引用图片。
以绿色风格为例，先将要调用的按钮背景图片上传到图片管理器中：
图片下载：
选中图片.zip
(2.79 KB, 下载次数: )
报表上添加三个按钮组件，分别设置自定义样式和选中自定义样式：
自定义样式：
复制代码选中自定义样式：复制代码PS：
1、选中自定义样式中“vfs/root/products/ebi/sys/picture/选中.png”是背景图片所在资源管理器的完整路径；
2、background-size: cover;-webkit-background-size: cover;-o-background-size: cover;用来设置背景图片等宽高适应按钮大小（由于是等宽高适应，所以为了适应后效果更佳，建议按钮组件的宽高和背景图片宽高等比例）；
3、选中-》未选中 状态切换后，需要把按钮样式还原，所以需要在自定义样式属性中设置下希望还原后的样式；
最终效果：
爱美之心，人皆有之~现在咱们做表的同时也越来越追求样式设计、配色统一。
今天给大家分享一个做表小tips，如何在报表模板的按钮组件自定义样式上引用图片。
以绿色风格为例，先将要调用的按钮背景图片上传到图片管理器中：
图片下载：
选中图片.zip
(2.79 KB, 下载次数: )
报表上添加三个按钮组件，分别设置自定义样式和选中自定义样式：
自定义样式：
- color:#2A9178;background-image:none;
- 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;
1、选中自定义样式中“vfs/root/products/ebi/sys/picture/选中.png”是背景图片所在资源管理器的完整路径；
2、background-size: cover;-webkit-background-size: cover;-o-background-size: cover;用来设置背景图片等宽高适应按钮大小（由于是等宽高适应，所以为了适应后效果更佳，建议按钮组件的宽高和背景图片宽高等比例）；
3、选中-》未选中 状态切换后，需要把按钮样式还原，所以需要在自定义样式属性中设置下希望还原后的样式；
最终效果：
