CSS Styling Issues

本节列出了 SAPUI5 中与 CSS 样式相关的一些最重要的规则。

SAPUI5 控件使用 CSS 进行样式设置，并且由于应用程序可以提供自己的 CSS，因此它们可以调整样式。然而，这种适应越深，它们就越有可能与未来的 SAPUI5 更新或其他库和应用程序相关联。但如果我们遵循下面列出的规则，可以降低发生这种情况的风险。

Don’t override control class styling directly

SAPUI5 不保证跨版本样式类名的稳定性。如果样式类的命名在以后的版本中发生变化，样式规则将不再应用于目标元素。此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行时，直接覆盖控件类样式可能会导致样式冲突。

最佳实践就是，添加您自己的命名空间类。

不好的做法：直接修改 SAP 标准的 CSS class：

.sapMInputBaseError {font-weight: bold;
}

正确做法：

oButton.addStyleClass("poaAppError");

.poaAppError {font-weight: bold;
}

Don’t style DOM element names directly

直接样式化 DOM 元素会导致不可预知的结果，因为 SAPUI5 不保证内部控制 DOM 树随时间的稳定性。此外，当应用程序在共享运行时环境（如 SAP Fiori Launchpad）中运行或添加自定义 HTML 时，这可能会导致样式冲突。最好将样式更改限制为专门使用的 CSS 类。

不好的例子：

div {width: 120px;
}

正确做法：

.myStyleClass {width: 120px;
}

Don’t use generated IDs in CSS selectors

SAPUI5 应用程序可以为元素创建动态 ID。不要将这些 ID 用作自定义 CSS 中的选择器，因为它们会随着时间而改变。最好添加和使用 CSS 类。

错误做法：

#__view1__button0 {font-weight: bold;
}

正确做法：

.myEmphasizedButton {font-weight: bold;
}

Don’t create selectors that are not namespaced

未命名空间的自定义选择器和 CSS 类可能会导致共享运行时环境（如 SAP Fiori Launchpad）中的样式冲突，或者包含可能使用相同 CSS 类名称的其他 JavaScript 库时。

错误做法：

.title {font-weight: bold;
}

正确做法：

.poaAppTitle {font-weight: bold;
}

Don’t use hard-coded colors, font sizes and images if the app should be themable

应用程序的主题性依赖于 SAPUI5 主题 CSS 中的 LESS 计算。应用程序和自定义控件中的硬编码颜色、字体和图像意味着这些颜色不会被主题修改，这会导致设计问题或可访问性问题（例如，在高对比度黑色 (HCB) 主题中）。您可以使用由这些 LESS 计算提供的特殊 CSS 类。

错误做法：

.myCustomHTML {color: #FFF;background-color: blue;
}

正确做法：

将 CSS 类 sapThemeTextInverted 和 sapThemeHighlight-asBackgroundColor 添加到您的自定义 HTML 元素。

注意

如兼容性规则所述，SAPUI5 生成的 HTML 和 CSS 不是公共 API 的一部分，可能会在补丁和次要版本中发生变化。如果您决定覆盖样式，您有义务在每次更新 SAPUI5 时测试和更新您的修改。这样做的先决条件是您可以控制正在使用的 SAPUI5 版本，例如在 standalone 中。在 SAP Fiori launchpad 中运行您的应用程序时，这是不可能的，其中 SAPUI5 为所有应用程序集中加载。因此，SAP Fiori launchpad 应用程序不应覆盖样式。

SAP UI5 使用 CSS 的一些注意事项相关推荐

SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 应用开发教程之十三 - 如何添加自定义 CSS 类
本教程的上一篇文章:SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化,我们介绍了如何使用 SAP UI5 标准定义的 CSS 类来美化自己的应用程序. 本文我们继续 CS ...
SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 初学者教程之一:Hello World SAP UI5 初学者教程之二:SAP UI5 ...
SAP UI5 CSS 类 sapUiSmallMarginEnd 的工作和添加原理
我做 SAP UI5 开发时遇到一个问题: 我在 XML 视图里,给 Button 控件分配了一个 CSS class: sapUiSmallMarginEnd 期望运行时,该 CSS 类能够产生 1 ...
使用代码给 SAP UI5 XML 视图添加自定义 CSS
一个例子如下图所示: this.getView().addStyleClass(Device.system.desktop ? "sapUiSizeCompact" : " ...
SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类
本教程的前面一系列步骤,我们或多或少已经使用了 Chrome 开发者工具来学习 SAP UI5 应用的开发,比如通过 Elements 标签页查看 SAP UI5 XML 视图里定义的控件,运行时生成 ...
SAP UI5 应用开发教程之十二 - 使用 CSS 类对 UI 进行进一步美化
下图是迄今为止我们完成的 UI 效果: 可以看到 Say Hello 这个按钮和它右边的 Input 控件,中间没有任何间隙,看起来不甚美观. 经过本步骤美化后的效果: 下面介绍具体实现步骤. 本步骤 ...
OPEN(SAP) UI5 扫盲
1 扫盲什么是SAP Fiori? 了解SAP UI5必须要从SAP Fiori开始,两者概念经常被混淆,而两者也确实有着非常紧密的关系. 用过SAP的同学们都对SAP的传统的界面(SAP GUI) ...

SAP UI5 使用 CSS 的一些注意事项

Don’t override control class styling directly

Don’t style DOM element names directly

Don’t use generated IDs in CSS selectors

Don’t create selectors that are not namespaced

Don’t use hard-coded colors, font sizes and images if the app should be themable

注意

SAP UI5 使用 CSS 的一些注意事项相关推荐

最新文章

热门文章