说明
有时我们需要定义一些更细粒度的布局,这是我们可以使用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
...