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


    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 {
    	 120px;
    }
    

    正确做法:

    .myStyleClass {
    	 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 元素。

  • 相关阅读:
    React性能优化 渲染20000多条checkbox组件,点击选择checkbox组件的时候特别卡,解决办法
    react网页多语言(react-intl-universal)
    个人作品
    程序员和产品经理的那些事
    three.js 根据不同的图片做不同的动画特效 科技感十足
    互联网行业最佳产品开发流程 推荐!
    类似于YouTube、Medium、知乎等网站使用的进度条插件 NProgress
    js模拟点击下载文件到本地
    MySQL记录操作(增删改)
    MySQL表的操作
  • 原文地址:https://www.cnblogs.com/sap-jerry/p/15370567.html
Copyright © 2020-2023  润新知