使用状态设置布局

组件版设计器提供了不同的状态，这些状态可以在命令选项中定义，以显示特定的布局。

• inDropdown : 表示命令处于下拉列表中。
• isToolbarMode : 表示工具栏功能区模式。

使用designer.setData方法可以自定义状态。

可以使用IF、AND、NOT等公式表达式在命令选项中定义上述状态。以下代码语句使用不同的公式表达式来设置“text”和“bigButton”命令选项中的状态：

- texttext: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")' 工具栏处于工具栏功能区模式时，显示内容为“Toolbar Ribbon”，否则，显示“Default Ribbon”。

textbigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))' 当命令未处于下拉模式且功能区未处于工具栏模式时，将bigButton选项设置为true。

选项不支持公式表达式。

注意： commandName 选项不支持公式表达式。

示例

下图分别显示了同一命令，不同功能区模式（工具栏和默认）下文本和图标的差异。

下面的代码示例显示了如何在上图中显示的命令选项中设置配置状态。

// 定义命令"Welcome"
var command = {
    title: "Welcome",
    text: '=IF(isToolbarMode,"Toolbar Ribbon","Default Ribbon")',
    iconClass: '=IF(inDropdown, "ribbon-button-sjs","ribbon-button-hi")',
    bigButton: '=AND(NOT(inDropdown), NOT(isToolbarMode))',
    direction: '=IF(isToolbarMode, "horizontal","vertical")',
    visiblePriority: 1000,
    commandName: "Welcome",
    execute: async (context, propertyName, fontItalicChecked) => {
        alert('Welcome to new designer.');
    }
};

// 将自定义命令添加到配置信息中
window.customRibbonConfig = GC.Spread.Sheets.Designer.DefaultConfig;
        
customRibbonConfig.commandMap = {
    Welcome: command
}
        
// 在默认功能区中添加按钮
customRibbonConfig.ribbon[0].buttonGroups.unshift({
    "label": "New Button",
    "thumbnailClass": "welcome",
    "commandGroup": {
        "children": [
            {
                "direction": "vertical",
                "commands": [
                    "Welcome"
                ]
            }
        ]
    }
});
customRibbonConfig.ribbon[0].buttonGroups[2].commandGroup.children[0].children.push('Welcome');

// 在工具栏配置命令映射中添加命令
window.customToolbarConfig = GC.Spread.Sheets.Designer.ToolBarModeConfig;
customToolbarConfig.commandMap = {
    Welcome: command
}

//工具栏功能区中的添加按钮
customToolbarConfig.ribbon.panels[0].buttonGroups.unshift({
    "buttonGroupName": "Welcome",
    "commandGroup": {
        "children": [
            "Welcome"
        ]
    }
});

// 使用默认功能区模式初始化设计器组件
var designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer_host"));
designer.setConfig(customRibbonConfig);
        
//设置用于在默认和工具栏功能区模式之间切换的按钮
document.getElementById('switch').addEventListener('click', function () {
    designer.setConfig(designer.getData('isToolbarMode') ? customRibbonConfig : customToolbarConfig)
});