Skip to content

Latest commit

 

History

History
62 lines (40 loc) · 2.36 KB

Using_CSS_Style_Sheets_in_XML_Views_deprecated_b564935.md

File metadata and controls

62 lines (40 loc) · 2.36 KB
loio
b564935324f449209354c7e2f9903f22

view on: demo kit nightly build | demo kit latest release

Using CSS Style Sheets in XML Views (deprecated)

Style sheets are included in XML views in the same way as plain HTML. To add further CSS classes to OpenUI5 controls, use the class attribute.

Caution:

Deprecated as of OpenUI5 version 1.120. Refer to an external style sheet instead.

Tip:

We recommend to carefully choose the elements that you style as the CSS always affects the whole page and is not restricted to the view.

Here's how you would add a style definition and define a button that uses it in an XML view:

<mvc:View controllerName="sap.hcm.Address" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc"
           xmlns:html="http://www.w3.org/1999/xhtml">
   <html:style>
      .mySuperRedButton {
         color: red;
      }
   </html:style>
   <Panel>
      <Button class="mySuperRedButton" text="Press Me"/>
   </Panel>
</mvc:View>

Note:

To allow your view to be used in an environment with a Content Security Policy denying inline styles (i.e. without the unsafe-inline source for the style-src directive), you need to refer to an external style sheet instead of embedding the style sheet into your XML view. For more information, see the Walkthrough tutorial, Step 14: Custom CSS and Theme Colors.

Note:

The XML view offers special handling for style classes. You can specify them via the class attribute on a control's XML node. Please be aware that this attribute is not a property of the respective control and thus is not supported by a control's constructor.

To refer to a style class in JavaScript, for example in a controller, use the addStyleClass method on a control:

    myButton.addStyleClass("mySuperRedButton");

and add the style definition to your CSS file.

Related Information

API Reference: sap.ui.core.Control#addStyleClass

API Reference: sap.ui.core.mvc.XMLView