自定义ribbon样式

收藏

Richard.Huang · Richard.Huang

您好，对于您的该需求，您可以参考我们学习指南中对于Ribbon的自定义实现：https://demo.grapecity.com.cn/sp ... stom-ribbon1/purejs

TY呀TY · TY呀TY

Richard.Huang 发表于 2023-12-27 13:31
您好，对于您的该需求，您可以参考我们学习指南中对于Ribbon的自定义实现：https://demo.grapecity.com.cn/ ...

这也没有写如何修改样式

Richard.Huang · Richard.Huang

TY呀TY 发表于 2023-12-27 15:13
这也没有写如何修改样式

ribbon的样式设置实际上都是在config的commandMap中进行定义的，以添加一个welcome按钮为例：

var config = GC.Spread.Sheets.Designer.DefaultConfig;
config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: function (context, propertyName, fontItalicChecked) {
alert('Welcome to new designer.');
}
}
}
config.ribbon[0].buttonGroups.unshift({
"label": "NewDesigner",
"thumbnailClass": "welcome",
"commandGroup": {
"children": [
{
"direction": "vertical",
"commands": [
"Welcome"
]
}
]
}
});
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);

复制代码

更多ribbon添加修改可以参考这里的技术博客：https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=87119&extra=page%3D6

TY呀TY · TY呀TY

Richard.Huang 发表于 2023-12-27 17:31
ribbon的样式设置实际上都是在config的commandMap中进行定义的，以添加一个welcome按钮为例：

更多rib ...

Richard.Huang · Richard.Huang

TY呀TY 发表于 2023-12-27 18:04

您的意思是，希望更改Icon下面的文字的样式是吗？
Designer为了保证整个设计器按钮统一，因此对于下面的Title样式是统一用ribbon-button-item-text这个class来统一的。我们没有单独修改某个title的API，如果您确实有该需求，您可以将下面的文字和上面的icon做成一张图片，这样就可以实现您需要的自定义样式了
image.png284237975.png

TY呀TY · TY呀TY

Richard.Huang 发表于 2023-12-28 12:28
您的意思是，希望更改Icon下面的文字的样式是吗？
Designer为了保证整个设计器按钮统一，因此对于下面的 ...

明白了

Joestar.Xu · Joestar.Xu

好的，那就先结贴了，后续有其他问题的话随时开新帖提问哈。

Richard.Huang · Richard.Huang

好的，本帖子的问题解决，这里就先结帖了。后续如果您有新的问题，也欢迎创建新的求助帖。

		自动登录	找回密码
密码			立即注册

[已处理] 自定义ribbon样式

8 个回复

SpreadJS 认证

SpreadJS 高级认证