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

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

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


image.png


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

image.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

image.png



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


image.png

本地改成sap_horizon 会怎样?


成功了:


image.png

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


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


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


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


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



image.png

image.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 视图。



相关文章
|
11月前
easyUI datagarid 编辑状态下的combobox动态赋值
easyUI datagarid 编辑状态下的combobox动态赋值
|
XML 前端开发 数据格式
SAP UI5 按钮的类型和背景色设置例子
SAP UI5 按钮的类型和背景色设置例子
|
JavaScript
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
1343 0
VUE element-ui 之table表格复选框勾选行背景修改(选中状态背景色修改)
所有UI控件显示不出来的原因
所有UI控件显示不出来的原因
415 0
|
计算机视觉
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)
qss样式表笔记大全(四):可设置样式的窗口部件列表(下)(持续更新示例)一
|
计算机视觉
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(二):可设置样式的窗口部件列表(上)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)二
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)二
使用SAP C4C rule editor动态控制UI上某个按钮是否显示
使用SAP C4C rule editor动态控制UI上某个按钮是否显示
115 0
使用SAP C4C rule editor动态控制UI上某个按钮是否显示
动态控制SAP C4C UI元素的显示和隐藏
动态控制SAP C4C UI元素的显示和隐藏
106 0
动态控制SAP C4C UI元素的显示和隐藏
|
C# 前端开发
wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图,需要在wpf中的datagrid的操作那列有个确认按钮,然后在某些条件下确认按钮可见,某些情况下不可见的,放在mvc里直接在cshtml页面中if..else就行了。 但是在wpf里不行。。网上搜索了好久才找到解决方法,原来只是binding那个visiable属性就行了,
6890 0