【移动端】玩转徽标控件——新增文本显示方式

栏目:云苍穹知识作者:金蝶来源:金蝶云社区发布:2024-09-23浏览:1

【移动端】玩转徽标控件——新增文本显示方式

变更记录:

产品版本
更新内容更新日期
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;        
    }
}


注意事项:

  1.  为了使徽标文本生效, 我们需要将 参数 dot置为false, count置为-1, showZero置为false, 最后再设置badgeText才会生效; 否则会被前面设置所覆盖。

  2. 徽标一般都很简洁, 所以我们在不区分中英文的情况, 文本允许显示的最大长度为4, 超出会被截断, 请知悉

  3. 支持徽标的控件: 按钮, 标签, 图片控件, 页签, 工具栏, 字体图标,块状菜单


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’, ‘上新’ 等


【移动端】玩转徽标控件——新增文本显示方式

变更记录:产品版本更新内容更新日期V6.0.4优化了块状菜单支持徽标的能力,满足了业务块状菜单控件需要展示徽标的需求2023-12-28用户场景:...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息