zoukankan      html  css  js  c++  java
  • UI5-文档-4.14-Custom CSS and Theme Colors

    有时我们需要定义一些更细粒度的布局,这时我们可以通过向控件添加自定义样式类来使用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

  • 相关阅读:
    win7下的vxworks总结
    ubuntu 无法获得锁 /var/lib/dpkg/lock
    项目中用到了的一些批处理文件
    win7下安装 WINDRIVER.TORNADO.V2.2.FOR.ARM
    使用opencv统计视频库的总时长
    January 05th, 2018 Week 01st Friday
    January 04th, 2018 Week 01st Thursday
    January 03rd, 2018 Week 01st Wednesday
    January 02nd, 2018 Week 01st Tuesday
    January 01st, 2018 Week 01st Monday
  • 原文地址:https://www.cnblogs.com/ricoo/p/10102620.html
Copyright © 2011-2022 走看看