【16.1.4】如何修改自定义菜单栏页面缩小时显示的样式

Richard.Ma

如题：

当界面足够显示时：
image.png512371825.png

当界面不够显示时：

需求：设置页面不勾选显示时自定义菜单的样式

红框处为自定义按钮
相关代码如下：

  const editModel = {
title: '编辑模式',
text: '编辑模式',
iconClass: 'ribbon-button-insertfunction',
bigButton: 'true',
commandName: 'editModel',
execute: async () => {
},
  }

  const modelButton = {
label: '模式切换',
thumbnailClass: 'ribbon-panel-group-content',
commandGroup: { children: [{ direction: 'horizontal', commands: ['editModel'], },], },
  }

Richard.Ma · Richard.Ma

你可能是没有给这个图片设置缩放，spreadjs这里默认使用的图标都是svg，所以不需要再设置缩放

你如果设置的是图片的话，需要设置一下缩放background-size: contain;，比如这样

.ribbon-thumbnail-test
{ background-image: url(https://img1.baidu.com/it/u=4192705526,2497624809&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500);
background-size: contain;
}

复制代码