【移动端】玩转徽标控件——新增文本显示方式
变更记录:
产品版本 | 更新内容 | 更新日期 |
V6.0.4 | 优化了块状菜单支持徽标的能力,满足了业务块状菜单控件需要展示徽标的需求 | 2023-12-28 |
用户场景:
在移动商城里面, 底部导航需要在右上角显示 '上新' 或者 'NEW' 等文本信息, 表示有新品上市。而现有的徽标(小圆点和数字)还未支持这种显示方式, 所以需要支持该功能
功能介绍:
1. 新增: 徽标显示方式, 在基于原先小圆点和数字的前提下, 支持文本的显示方式. 后端对应的方法是: setBadgeText, 具体代码请移'实现代码'
2. 优化: 对接原先的color参数——支持设置徽标的背景色
视觉展示:
其他常见效果:
实现代码:
public class Test2Plugin extends AbstractFormPlugin { @Override public void afterCreateNewData(EventObject e) { Button button = this.getView().getControl("kdtest_buttonap"); button.setBadgeInfo(getBadgeInfo()); } private BadgeInfo getBadgeInfo() { BadgeInfo badgeInfo = new BadgeInfo(); badgeInfo.setBadgeText("NEW"); return badgeInfo; } }
注意事项:
为了使徽标文本生效, 我们需要将 参数 dot置为false, count置为-1, showZero置为false, 最后再设置badgeText才会生效; 否则会被前面设置所覆盖。
徽标一般都很简洁, 所以我们在不区分中英文的情况, 文本允许显示的最大长度为4, 超出会被截断, 请知悉
支持徽标的控件: 按钮, 标签, 图片控件, 页签, 工具栏, 字体图标,块状菜单
BadgeInfo对象方法:
方法名 | 参数 | 说明 | 场景 |
setCount | Integer:count | 设置数量 | 未读的消息数量 |
setDot | boolean:dot | 设置是否显示成点,默认为false | 表示收到新消息 |
setColor | String:color | 设置显示颜色,如(#aaaaaa) | 徽标背景色 |
setShowZero | boolean:showZero | 设置数量为0的时候是否显示,默认为false | 想要消息的数量一直显示, 不论有没有未读消息 |
setOverflowCount | Integer:overflowCount | 超过 overflowCount 的会显示为 ${overflowCount}+,默认的 overflowCount 为 99 | 100条消息, 只能最多显示到99, 超出以 ‘99+’ 显示 |
setOffset | String[]:offset | 设置显示的偏移修正量[top,right],如['10px','10px'] | 根据自己的布局调整徽标位置 |
setBadgeText | String:badgeText | 设置显示的文本 | 商城的文本显示, 如 ‘NEW’, ‘上新’ 等 |
【移动端】玩转徽标控件——新增文本显示方式
本文2024-09-23 00:41:18发表“云苍穹知识”栏目。
本文链接:https://wenku.my7c.com/article/kingdee-cangqiong-141079.html