Custom CSS and Theme Colors
有时我们需要定义一些更细粒度的布局,这时我们可以通过向控件添加自定义样式类来使用 CSS 的灵活性,并根据需要设置它们的样式。
警告:
如兼容性规则所述,由SAPUI5生成的HTML和CSS不是公共API的一部分,在补丁和小版本中可能会更改。如果您决定覆盖样式,那么您有义务在SAPUI5每次更新时测试和更新您的修改。这样做的先决条件是您可以控制正在使用的 SAPUI5 版本,例如在独立场景中。在 SAP Fiori launchpad 中运行您的应用程序时,这是不可能的,其中 SAPUI5 为所有应用程序集中加载。因此,SAP Fiori launchpad 应用程序不应覆盖样式。
webapp/css/style.css(新建)
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中,拥有最具体选择器的规则 “wins”。
对于 right-to-left (rtl)的语言,比如阿拉伯语,当应用程序显示为倒转时,您可以设置左侧外边距,并重置右侧外边距。如果你只使用标准的SAPUI5控件,你不需要关心这个,在本例,我们使用自定义CSS,你必须添加这个信息。
在另一个类myCustomText中,我们定义了一个粗体文本,并将display 设置为inline-block。现在我们只定义了自定义类,没有任何额外的选择器。我们在这里还没有设置颜色值,我们将在视图中进行设置。
webapp/manifest.json
{
"_version": "1.21.0",
"sap.app": {
"id": "sap.ui.demo.walkthrough",
"type": "application",
"i18n": {
"bundleUrl": "i18n/i18n.properties",
"supportedLocales": [
""
],
"fallbackLocale": ""
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "sap.ui.demo.walkthrough.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.60",
"libs": {
"sap.m": {}
}
},
"config": {
"invoiceLocal": "/Invoices.json"
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.ui.demo.walkthrough.i18n.i18n",
"supportedLocales": [
""
],
"fallbackLocale": ""
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
}
}
}
其中
...
"sap.ui5": {
...
"models": {
...
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
}
}
在sap.ui5命名空间的资源部分,可以加载应用的其他资源。我们通过定义一个相对于组件的URI来加载CSS样式。然后SAPUI5将该文件作为标记添加到HTML页面的header,就像普通Web页面一样,浏览器会自动加载它。
webapp/view/App.view.xml
<mvc:View
controllerName="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>
<Panel
headerText="{i18n>helloPanelTitle}"
class="sapUiResponsiveMargin"
width="auto">
<content>
<Button
text="{i18n>showHelloButtonText}"
press=".onShowHello"
class="myCustomButton"/>
<Input
value="{/recipient/name}"
valueLiveUpdate="true"
width="60%"/>
<FormattedText
htmlText="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中指定颜色,而是使用标准的主题相关类代替。
按钮和输入字段之间的空间现在更小,输出文本为粗体