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

最新推荐文章于 2024-04-02 23:26:04 发布

真的是我太天真

最新推荐文章于 2024-04-02 23:26:04 发布

阅读量996

点赞数

分类专栏： SAPUI5 文章标签： html css javascript html5

原文链接：https://sapui5.hana.ondemand.com/sdk#/topic/723f4b2334e344c08269159797f6f796

版权

SAPUI5 专栏收录该内容

40 篇文章 5 订阅

订阅专栏

说明

有时我们需要定义一些更细粒度的布局，这是我们可以使用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: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中指定颜色，而是使用标准的主题相关类。

章节

真的是我太天真

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第14步:自定义CSS和主题颜色

说明有时我们需要定义一些更细粒度的布局，这是我们可以使用CSS的灵活性，通过添加自定义样式类控件和样式他们喜欢。预览按钮和输入字段之间的空格现在变小了，输出文本变成粗体。注意如兼容性规则所述，由SAPUI5生成的HTML和CSS不是公共API的一部分，在补丁和小版本中可能会更改。如果您决定覆盖样式，那么您有义务在SAPUI5每次更新时测试和更新您的修改。前提条件是您可以控制正在使用的SAPUI5的版本，例如在一个独立的场景中。这是不可能的运行您的应用程序在SAP Fiori启动台
复制链接

扫一扫