Sapui5 如何设置sap.m.MessagePopover的宽度?
该控件有一个属性Sapui5 如何设置sap.m.MessagePopover的宽度?,sapui5,sap-fiori,Sapui5,Sap Fiori,该控件有一个属性\u oPopover(内部包含sap.m.Popover)。 使用此属性,我可以设置popover宽度: messagePopover._oPopover.setContentWidth("450px"); 但是,由于不应该使用从开始的SAP属性,有人知道更干净的方法吗?另一个解决方案是使用CSS类。然而,有一个陷阱。正如您可以从下面看到的消息popover生成的DOM,使用了内联样式:(。 重写内联样式的唯一方法是在CSS中使用!important,这也是不推荐的方法。但
\u oPopover
(内部包含sap.m.Popover)。
使用此属性,我可以设置popover宽度:
messagePopover._oPopover.setContentWidth("450px");
但是,由于不应该使用从
开始的SAP属性,有人知道更干净的方法吗?另一个解决方案是使用CSS类。然而,有一个陷阱。正如您可以从下面看到的消息popover生成的DOM,使用了内联样式:(。
重写内联样式的唯一方法是在CSS中使用!important,这也是不推荐的方法。但是,考虑到使用了内联CSS,我会使用!important关键字。下面是工作代码:
XML代码(用于添加类):
你可以玩你需要多少宽度的消息弹出框
编辑:这来自源代码:
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);
从UI5 1.46版开始,可以使用更灵活的控件来代替旧的sap.m.MessagePopover
- 无需访问内部属性或应用自定义CSS样式类来操作宽度(尽管如此,Fiori指南仅使用它或对话框)
const popover=新响应popover({
contentWidth:“450px”,
内容高度:“450px”,
内容:[
/*myMessageView*/
],
});
// ...
popover.openBy(…);
- 与MessagePopover相比,MessageView可以对项目进行分组等等
- 内部也是如此
您是否尝试过使用下面建议的sap.m.MessageView
?
.myPopoverClass {
width:100rem;
}
.myPopoverClass .sapMPopoverCont {
width:100% !important;
}
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);