SAP UI5 按钮的类型和背景色设置例子

简介: SAP UI5 按钮的类型和背景色设置例子

我在 SAP UI5 XML 视图里有一个 Button 控件,类型为 Accept:

f8e91d4d259f8ccf5ef3f93c31147ca5.png

运行时渲染出来的效果如下:

2e7c53a60195f7133f644dfb08708f58.png


这个按钮对应生成的 HTML 视图代码里,起作用的 css:

span.sapMBtnInner.sapMBtnAccept {
    background-image: none;
    background-color: #ebf5cb;
    border-color: #ebf5cb;
    color: #256f3a;
}


对应的 css 文件地址:https://sapui5.hana.ondemand.com/resources/sap/m/themes/sap_horizon/library.css

4c5983e9c449d326254f22956efb4d62.png

本地渲染:sapui5.hana.ondemand.com/resources/sap/ui/core/themes/sap_fiori_3

7230a5b2410bbefdf892fa3d49aca2fc.png


本地改成sap_horizon 会怎样?

成功了:

19e61512df379fde946867b28597bf86.png

用户通过单击或点击按钮或按下某些键盘键(例如 Enter)来触发操作。


对于按钮 UI,可以定义文本、图标或两者。 您还可以指定是先显示文本还是先显示图标。


可以从一组预定义的 ButtonTypes 中进行选择,这些 ButtonTypes 提供不同的样式以对应于触发的操作。


可以将按钮设置为启用或禁用。 启用的 Button 可以通过单击或点击来按下,并且它会更改其样式以向用户提供视觉反馈,即它被按下或鼠标光标悬停在上面。 禁用的 Button 显示为非活动状态且无法按下。


SAP UI5 所有支持的 Button类型,在这个枚举类型里可以找到:sap.m.ButtonType


357da43de9f921b56f19b271b574e3bb.png


384771021598900cb05cdd07e6ae356e.png

button 的 ariaHasPopup 属性:指定 aria-haspopup 属性的值


如果值为 None,则不会呈现该属性。 否则它将使用选定的值呈现。


仅当按钮与弹出窗口相关时才使用此属性。 该值需要等于弹出窗口的主要/根(main/root)角色,例如对话框、菜单或列表。


下图是在 XML 视图里嵌入 css style 的方法:

<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 视图在内容安全策略拒绝内联样式的环境中使用(即没有 style-src 指令的不安全内联源),则开发人员需要引用外部样式表,而不是将样式表嵌入到 SAP UI5 XML 视图。

相关文章
|
5月前
|
开发者 数据处理 数据管理
SAP HANA 的不同类型
SAP HANA 的不同类型
SAP HANA 的不同类型
|
5月前
|
算法 前端开发 C++
【Qt UI相关】Qt设置窗体或控件的背景色透明
【Qt UI相关】Qt设置窗体或控件的背景色透明
522 0
|
5月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
5月前
|
JavaScript
Vue给Element UI的el-popconfirm绑定按钮事件
Vue给Element UI的el-popconfirm绑定按钮事件
|
29天前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
70 3
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
前端开发 开发者 开发框架
JSF与Bootstrap,打造梦幻响应式网页!让你的应用跨设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,响应式设计至关重要,以确保不同设备上的良好用户体验。本文探讨了JSF(JavaServer Faces)与Bootstrap框架的结合使用,展示了如何构建响应式网页。JSF是一个基于Java的Web应用框架,提供丰富的UI组件和表单处理功能;而Bootstrap则是一个基于HTML、CSS和JavaScript的前端框架,专注于实现响应式设计。通过结合两者的优势,开发者能够更便捷地创建自适应布局,提升Web应用体验。然而,这种组合也有其局限性,如JSF组件库较小和较高的学习成本等,因此在选择开发框架时需综合考虑具体需求和应用场景。
32 0
|
4月前
|
XML IDE 开发工具
【Android UI】自定义带按钮的标题栏
【Android UI】自定义带按钮的标题栏
52 7
【Android UI】自定义带按钮的标题栏
|
3月前
|
JavaScript API
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
【Element-UI】vue使用 this.$confirm区分取消与关闭,vue给this.$confirm设置多个按钮
200 0
|
3月前
|
开发者
小而美的IKUN-UI组件库源码学习(按钮 Button)
小而美的IKUN-UI组件库源码学习(按钮 Button)
17 0
下一篇
无影云桌面