Question

var oToolbar = new sap.ui.commons.Toolbar({standalone: false, design: sap.ui.commons.ToolbarDesign.Standard}).addStyleClass("uiActionToolbar"),

oToolbar.addItem(new sap.ui.commons.Button({text: "Key equipment(LIVE)", styled: false, lite: true, icon:"sap-icon://email",
                        //pressed:true,
                        //style: sap.ui.commons.ButtonStyle.Emph,
                        press:function(oEvent){
                              oAppContainer.addPage(oPage1);
                              oAppContainer.to(globalId+"page1");
                        }
                    })),
oToolbar.addItem(new sap.ui.commons.Button({text: "Key equipment", styled: false, lite: true, icon:"sap-icon://email",
                        //pressed: false,
                        //style: sap.ui.commons.ButtonStyle.Emph,
                        press:function(oEvent){
                              oAppContainer.addPage(oPage2);
                              oAppContainer.to(globalId+"page1");
                        }}))

按照上面的代码，工具栏中有2个按钮，我想在选中后突出显示它们：

//pressed:true,
//style: sap.ui.commons.ButtonStyle.Emph,

但它们似乎都不起作用。

Answer 1

只需将styled属性设置为true，将lite属性设置为false，或将其删除，并在press事件发生后更新按钮的样式：

oToolbar.addItem(new sap.ui.commons.Button({
    text: "Key equipment(LIVE)", 
    styled: true, 
    lite: false, 
    icon:"sap-icon://email",
    press:function(oEvent){
        if(this.getStyle() === "Default"){
            this.setStyle("Emph");
        }else{
            this.setStyle("Default");
        }
        oAppContainer.addPage(oPage1);
        oAppContainer.to(globalId+"page1");
    }
}));

Here就是一个例子。

Answer 2

对于 sap.m.Button，使用 type="Transparent"（或“Default”）和 type="Emphasized"。

突出显示openui5中的简单按钮

2 个答案: