使用代码给 SAP UI5 XML 视图添加自定义 CSS
2023-09-14 09:02:38 时间
一个例子如下图所示:
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;
}
相关文章
- SAP UI5 本地开发如何实现 XML 和 JavaScript 代码的自动完成和嵌入式 API 文档自动显示
- 4. SAP UI5 XML 视图(View)初探
- SAP UI5 XML 视图中数据绑定路径语法的难点和易混淆点的专题讲解
- SAP UI5 应用开发教程之一百零一 - SAP UI5 应用的 Locale 决定机制试读版
- SAP UI5 数据绑定中的工厂函数
- SAP UI5 初学者教程之四:XML 视图初探试读版
- SAP Fiori Elements 本地项目的 annotations.xml 文件
- SAP UI5 formatter的工作原理
- sap.ushell.Container.getService.done的设计思路
- SAP UI5加载xml视图的全过程
- debug the very first SAP Fiori application -Jerry的第一个SAP ui5应用调试经过
- how does SAP UI5 filter for list work in xml view
- SAP UI5 xml view content parse
- 使用literal或者绑定变量执行SAP HANA SQL语句
- 使用SAP CRM中间件XIF Adapter但没有IDOC生成的故障原因分析
- SAP CRM IBASE read header debug
- 一段通过OPEN SQL直接读取SAP CRM Lead和Campaign数据的ABAP代码
- 什么是 SAP Spartacus 里的 module augmentation
- SAP Commerce Cloud Spartacus UI 读取 Component 元数据的 Action 设计
- SAP Spartacus org unit list和unit detail的分屏显示原理
- SAP Spartacus storefront 模块的实现位置
- SAP标准培训课程C4C10学习笔记(三)第三单元
- SAP Commerce的extensioninfo.xml
- SAP CRM Opportunity订单的文档流Document Flow的一些变体variant
- SAP XS Engine
- SAP Fiori Elements - How complex binding defined in XML view is parsed
- SAP Fiori Elements List Report Smart Table Toolbar 的 XML 视图实现
- SAP Fiori Elements 本地项目的 annotations.xml 文件
- 如何提取SAP UI5 XML view里定义的字段元素绑定信息(binding path)