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