自定义Ribbon菜单中分组收缩后的缩略图

组件版编辑器菜单的显示机制是
在宽度足够时，会显示每一个按钮分组（buttonGroups）中的所有内容



在列宽不够时，会从后往前依次收缩无法展示的分组,只展示一个有缩略图的下拉按钮



在我们给菜单添加自定义的buttonGroups时，也需要同时设置这个缩略图样式，否则在收缩后就会出现空白

通过下面的代码先来看如何添加一个按钮分组buttonGroups

1.       let buttonGroupsConfig = {
   
2.             "label": "调试",
   
3.             "thumbnailClass": "ribbon-thumbnail-test",
   
4.             "commandGroup": {
   
5.                   "children": [
   
6.                         //小图标
   
7.                         {
   
8.                               "direction": "vertical",
   
9.                               "commands": ["trackCellValue"]
   
10.                         },
    
11.                         {
    
12.                               "direction": "vertical",
    
13.                               "commands": ["checkisLocked"]
    
14.                         },
    
15.                         //分割线
    
16.                         {
    
17.                               "type": "separator"
    
18.                         },
    
19.                         // 大图标
    
20.                         {
    
21.                               "direction": "vertical",
    
22.                               "commands": ["allowdebug"]
    
23.                         }
    
24.                   ]
    
25.             }
    
26.       }
    
27.       designerConfig.commandMap = {};
    
28.       Object.assign(designerConfig.commandMap, debugCommands);
    
29.       customerRibbon.buttonGroups.push(buttonGroupsConfig);

复制代码

效果如下



收缩后的效果



在代码中，我们给thumbnailClass设置的是一个自定义的样式 "ribbon-thumbnail-test"

样式的具体内容如下

1. .ribbon-thumbnail-test
   
2. { background-image: url(https://gcdn.grapecity.com.cn/static/image/icons/2018/sp-1.png);
   
3.   background-size: contain;
   
4. }

复制代码

通过给此样式设置background-image， 即可在缩略图标上显示你需要的图片。否则，在未设置的情况下，只会显示空白