SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用

简介: SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用

本教程前面两篇步骤,我们已经学习了使用 CSS 对我们开发的 SAP UI5 应用的界面进行美化的一些步骤。


进入文件夹 13,运行命令行 ui5 serve, 然后访问 url:http://localhost:8080/webapp/index.html


能看到如下界面:


image.png


我们回忆一下,Fiori 1.0 时代,SAP 发布的前端应用主题为 Blue Crystall,界面效果如下图所示。这是我 2015 年在 SAP 成都研究院 CRM Fiori 应用开发团队开发的 My Opportunity Fiori 应用,用的就是 Blue Crystall Theme.

image.png



Fiori 2.0 时代的 Belize 主题如下图2 所示。2018年的时候,我已经转到了 SAP S/4HANA Customer Management 开发团队了。下面是 Opportunity 应用套上了 Belize Theme 的界面外观。


image.png


Fiori 3.0 时代的 Quartz Light 主题:


image.png


以及 Quartz Dark 这种暗黑主题:


image.png


本教程已经开发了很多 SAP UI5 应用了。如何在我们开发的这些 SAP UI5 应用也用上这些 Fiori 主题?


比如我们怎样才能把下面这个 SAP UI5 应用:


image.png


更改成使用 Quartz Dark 暗黑主题,成为下面这种效果?


image.png


本文余下部分我们就来详细探讨这个需求的实现。



相关文章
|
5月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
333 0
|
12月前
|
前端开发
SAP UI5 sap.m.ObjectStatus 控件的技术介绍
SAP UI5 sap.m.ObjectStatus 控件的技术介绍
|
搜索推荐 Shell
SAP Fiori 3 的 Quartz Theme 在 WebClient UI 和 SAPGUI 中的应用
SAP Fiori 3 的 Quartz Theme 在 WebClient UI 和 SAPGUI 中的应用
|
12月前
|
UED
SAP UI5 中一些被弃用的主题
SAP UI5 中一些被弃用的主题
|
前端开发
SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用
SAP UI5 应用的暗黑模式 - Fiori 3 Quartz Dark 主题的使用
|
Web App开发 编解码 前端开发
SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
SAP UI5 应用开发教程之三十三 - SAP UI5 应用的响应式布局特性(Responsiveness)试读版
|
前端开发 UED
关于使用 SAP UI5 代码设置应用 theme 的技巧
关于使用 SAP UI5 代码设置应用 theme 的技巧
|
开发者
SAP UI5 应用开发教程之三十二 - 如何创建一个自定义 SAP UI5 控件试读版
SAP UI5 应用开发教程之三十二 - 如何创建一个自定义 SAP UI5 控件试读版
|
Web App开发 前端开发 JavaScript
SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析试读版
SAP UI5 应用 SimpleForm 控件 ResponsiveGridLayout 布局的工作原理深入剖析试读版