IT干货网

UI5-文档-4.14-Custom CSS and Theme Colors

itxm 2022年03月09日 SAP 152 0

有时我们需要定义一些更细粒度的布局,这时我们可以通过向控件添加自定义样式类来使用CSS的灵活性,并根据自己的喜好对它们进行样式化。

Preview

 

The space between the button and the input field is now smaller and the output text is bold

谨慎:正如兼容性规则所述,SAPUI5生成的HTML和CSS不是公共API的一部分,可能会在补丁和小版本中更改。如果决定重写样式,则有义务在每次更新SAPUI5时测试和更新修改。这样做的一个先决条件是,您可以控制正在使用的SAPUI5版本,例如,在一个独立的场景中。当您在SAP Fiori launchpad中运行您的应用程序时,这是不可能的,因为SAPUI5是为所有应用程序集中加载的。因此,SAP Fiori launchpad应用程序不应该覆盖样式。

Coding

You can view and download all files at Walkthrough - Step 14.

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样式。然后SAPUI5将这个文件作为<link>标记添加到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"> 
 
   <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> 
 
</mvc:View>

 app控件使用自定义名称空间类myAppDemoWT配置。该类没有样式化规则集,在CSS规则的定义中用于定义仅对该应用程序有效的CSS选择器。

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

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

现在实际的颜色取决于选择的主题,确保颜色始终适合主题,语义清晰。获取可用CSS类名的完整列表,see CSS Classes for Theme Parameters.

Conventions

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

Parent topic: Walkthrough

Previous: Step 13: Margins and Paddings

Next: Step 15: Nested Views

Related Information

Descriptor for Applications, Components, and Libraries

CSS Classes for Theme Parameters

Creating Themable User Interfaces

Compatibility Rules

API Reference:sap.ui.core.theming

Samples:sap.ui.core.theming


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

UI5-文档-4.13-Margins and Paddings