说明

有时我们需要定义一些更细粒度的布局，这是我们可以使用CSS的灵活性，通过添加自定义样式类控件和样式他们喜欢。

预览

按钮和输入字段之间的空格现在变小了，输出文本变成粗体。

注意
如兼容性规则所述，由SAPUI5生成的HTML和CSS不是公共API的一部分，在补丁和小版本中可能会更改。
如果您决定覆盖样式，那么您有义务在SAPUI5每次更新时测试和更新您的修改。
前提条件是您可以控制正在使用的SAPUI5的版本，例如在一个独立的场景中。
这是不可能的运行您的应用程序在SAP Fiori启动台上，SAPUI5是集中加载的所有应用程序。
因此，SAP Fiori launchpad应用程序不应该覆盖样式。

代码

webapp/css/style.css (New)

html[dir="ltr"] .myAppDemoWT .myCustomButton.sapMBtn {margin-right: 0.125rem
}html[dir="rtl"] .myAppDemoWT .myCustomButton.sapMBtn {margin-left: 0.125rem
}.myAppDemoWT .myCustomText {display: inline-block;font-weight: bold;
}

我们创建一个css文件夹，它将包含我们的css文件。在css文件夹内的新样式定义文件中,我们创建了与自定义命名空间类相结合的自定义类。这确保样式将只应用在我们的应用程序中使用的控件上。

一个按钮的默认边距是0，我们想要复写它:我们用样式类myCustomButton给按钮添加一个自定义边距2px(或相对于默认字体大小16px计算出的0.125rem)。我们添加了CSS类sapMBtn来让我们的选择器更具体:在CSS中，拥有最具体选择器的规则“获胜”。

对于从右到左(rtl)的语言，比如阿拉伯语，当应用程序显示为倒转时，您可以设置左侧空白，并重置右侧空白。如果你只使用标准的SAPUI5控件，你不需要关心这个，在这种情况下，我们使用自定义CSS，你必须添加这个信息。

在另一个类myCustomText中，我们定义了一个粗体文本，并将显示设置为行内块元素。这一次，我们只定义了自定义类，没有任何额外的选择器。我们在这里还没有设置颜色值，我们将在视图中进行设置。

代码

webapp/manifest.json

..."sap.ui5": {... "models": {...},"resources": {"css": [{"uri": "css/style.css"}]}}

在sap.ui5命名空间的资源部分，可以加载应用的其他资源。我们通过定义一个相对于组件的URI来加载CSS样式。OpenUI5然后将该文件作为标记添加到HTML页面的头部，就像普通Web页面一样，浏览器会自动加载它。

代码

webapp/view/App.view.xml

<mvc:ViewcontrollerName="sap.ui.demo.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Shell><App class="myAppDemoWT"><pages><Page title="{i18n>homePageTitle}"><content><PanelheaderText="{i18n>helloPanelTitle}"class="sapUiResponsiveMargin"width="auto"><content><Buttontext="{i18n>showHelloButtonText}"press=".onShowHello"class="myCustomButton"/><Inputvalue="{/recipient/name}"valueLiveUpdate="true"width="60%"/><FormattedTexthtmlText="Hello {/recipient/name}"class="sapUiSmallMargin sapThemeHighlight-asColor myCustomText"/></content></Panel></content></Page></pages></App></Shell>
</mvc:View>

应用程序控件配置了我们的自定义命名空间类myAppDemoWT。这个类没有样式规则集，在CSS规则的定义中被用来定义CSS选择器，这些选择器只对这个应用有效。

我们将自定义CSS类添加到按钮中，以精确地定义按钮和输入字段之间的空间。现在我们有了一个像素完美的面板内容设计。

为了突出显示输出文本，我们使用FormattedText控件，该控件可以通过使用自定义CSS或HTML代码来单独设置样式。我们添加了自定义CSS类(myCustomText)，并添加了一个依赖于主题的CSS类来设置在主题中定义的突出显示颜色。

实际的颜色现在取决于所选择的主题，这确保了颜色总是适合主题，语义上是清楚的。有关可用CSS类名称的完整列表，请参阅CSS类的主题参数。

约定
不要在自定义CSS中指定颜色，而是使用标准的主题相关类。

章节

第1步:你好世界
第2步:引导
第3步:控件
第4步:XML视图
第5步:控制器
第6步:模块
第7步:JSON模型
第8步:可翻译的文本
第9步:组件配置
第10步:应用程序描述符
第11步:页面和面板
第12步:Shell控件作为容器
第13步:外边距和内边距
第14步:自定义CSS和主题颜色
第15步:嵌套视图
第16步:对话框和片段
第17步:片段回调
第18步:图标
第19步:重用对话框
第20步:聚合绑定
第21步:数据类型
第22步:表达式绑定
第23步:自定义格式器
第24步:过滤
第25步:排序和分组
第26步:远程OData服务
第27步:模拟服务器配置
第28步:使用QUnit进行单元测试
第29步:与OPA的集成测试
第30步:调试工具
第31步:路由和导航
第32步:路由与参数
第33步:路由回溯和历史
第34步:自定义控件
第35步:响应性
第36步:设备适应
第37步:内容密度
第38步:可访问性

第14步:自定义CSS和主题颜色相关推荐

jellyfin自定义css主题
jellyfin自定义css主题首先在个人设置中将背景打开,否则将没有透明背景将以下内容复制到:控制台-常规-自定义CSS代码 //改logo .adminDrawerLogo img { con ...
VScode 自定义主题颜色
vscode其实已经有很多完善且好看的主题了,但我总觉得每一个主题对我来说,都有那么一点点不够完美,比如亮色的主题,颜色就没有深色主题那么好看,对比度高. 好不容易看到一个好看的主题吧,又觉得某一部分 ...
Qt在win10自定义标题栏，应用主题颜色到标题栏
Qt在win10自定义标题栏,应用主题颜色到标题栏前言先看效果关键点 QtWin 注册表获取是否应用了颜色到标题栏代码头文件:captionwidget.h 源文件:captionwidge ...
用计算机设计主题色调,Win10个性化颜色怎么设置自定义Win10主题颜色方法 (全文)...
Win10个性化颜色怎么设置?本文主要分享一些实用的Win10小技巧,本文主要针对开始菜单背景与主题色颜色设置的问题,虽然设置个性化颜色很简单,但自定义Win10主题颜色可不是每个朋友都会的,下面本文 ...
echarts 自适应屏幕主题颜色自动缩放选框多图展示自定义toolTip
图自适应屏幕 /*** 自适应*/ window.addEventListener("resize",function () {myChart.resize(option) }) ...
material theme 自定义_Angular Material 主题系统（二）-- 自定义主题
实际的开发场景中,应用程序的文字排版不是一成不变的,也常常需要自定义颜色来适配具体项目需求,这就需要去自定义 Material 的主题. Angular Material 库的样式是采用 Sass 开 ...
elementui :on-remove怎么用_Vue + Vuex + Element UI实现动态全局主题颜色
点击右上方红色按钮关注"web秀",让你真正秀起来前言经常用Element UI的小伙伴,应该知道,Element UI官方文档,可以自由更换主题.那么,我们怎么把这个功能用到 ...
eleemnt-ui修改主题颜色
饿了吗的element-ui使用的是淡蓝色的主题,有时候我们可以自定义主题,官方的文档给我们提供了如何修改主题,介绍的很详细,自己试验过后,觉得很不错,一方面怕忘记,一方面写一写. 方法一是在线生成一 ...
Vue + Element UI+Scss + Vuex一键换肤 , 一键换字体大小 ,动态替换全局主题颜色
一.前言其实我这个写法每个UI库都通用 , 不局限于ElementUI , 看明白思路就知道怎么写了一键换肤 , 动态替换全局主题颜色功能已经实现很久了 , 在项目验收的时候出现了一个小问题 , ...

第14步:自定义CSS和主题颜色

说明

预览

代码

代码

代码

第14步:自定义CSS和主题颜色相关推荐

最新文章

热门文章