自定义Ribbon菜单中分组收缩后的缩略图
组件版编辑器菜单的显示机制是在宽度足够时，会显示每一个按钮分组（buttonGroups）中的所有内容
在列宽不够时，会从后往前依次收缩无法展示的分组,只展示一个有缩略图的下拉按钮
在我们给菜单添加自定义的buttonGroups时，也需要同时设置这个缩略图样式，否则在收缩后就会出现空白
通过下面的代码先来看如何添加一个按钮分组buttonGroups
let buttonGroupsConfig = {
"label": "调试",
"thumbnailClass": "ribbon-thumbnail-test",
"commandGroup": {
"children": [
//小图标
{
"direction": "vertical",
"commands": ["trackCellValue"]
},
{
"direction": "vertical",
"commands": ["checkisLocked"]
},
//分割线
{
"type": "separator"
},
// 大图标
{
"direction": "vertical",
"commands": ["allowdebug"]
}
]
}
}
designerConfig.commandMap = {};
Object.assign(designerConfig.commandMap, debugCommands);
customerRibbon.buttonGroups.push(buttonGroupsConfig);
效果如下
收缩后的效果
在代码中，我们给thumbnailClass设置的是一个自定义的样式 "ribbon-thumbnail-test"
样式的具体内容如下
.ribbon-thumbnail-test
{ background-image: url(https://gcdn.grapecity.com.cn/static/image/icons/2018/sp-1.png);
background-size: contain;
}
通过给此样式设置background-image， 即可在缩略图标上显示你需要的图片。否则，在未设置的情况下，只会显示空白
页:
[1]