一个例子如下图所示:
this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : "sapUiSizeCozy");
样式表以与纯 HTML 雷同的形式蕴含在 XML 视图中。 要向 SAPUI5 控件增加更多 CSS 类,请应用 class 属性。SAP UI5 开发人员务必须要认真抉择设置款式的元素,因为 CSS 始终会影响整个页面,并且不限于视图。
例子:上面介绍如何增加款式定义并定义在 XML 视图中应用它的按钮。
<mvc:View controllerName="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"> <html:style> .mySuperRedButton { color: red; } </html:style> <Panel> <Button class="mySuperRedButton" text="Press Me"/> </Panel></mvc:View>
留神,要容许您的 XML 视图在内容安全策略回绝内联款式(Content Security Policy denying inline styles
)的环境中应用(即没有 style-src 指令的 unsafe-inline 源),须要援用内部样式表而不是将样式表嵌入到其 XML 视图。
一个最间接的例子:
myButton.addStyleClass("mySuperRedJerryButton");
下面的代码里,作为 sStyleClass
给出的字符串将被增加到该控件的根 HTML 元素的 class
属性中。
此办法旨在用于将控件标记为非凡类型,能够应用援用此款式类名称的 CSS 选择器为其提供非凡款式。
一个应该防止的做法是间接款式化DOM元素,这会导致不可预测的后果,因为SAPUI5不能保障外部管制DOM树的稳定性。此外,当利用程序运行在共享运行时环境(如SAP Fiori launchpad)或增加自定义HTML时,这可能会导致款式抵触。最好将款式更改限度在特定应用的CSS类中。
应该防止上面这种做法:
div { width: 120px;}
举荐的做法:
.myStyleClass { width: 120px;}
SAPUI5应用程序能够为元素创立动静id。不要在自定义CSS中应用这些id作为选择器,因为它们不是一种稳固的 id(stable id),会随工夫变动。最好是增加和应用CSS类。
不举荐的做法:
#__view1__button0 { font-weight: bold;}
举荐的做法:
.myEmphasizedButton { font-weight: bold;}