乐趣区

关于sap:使用代码给-SAP-UI5-XML-视图添加自定义-CSS

jiezi

一个例子如下图所示：

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;}
退出移动版