Panel in einem Panel

Question

was ich versuche, ist ein Panel in einem Panel ohne Polsterung.

wenn ich schreibe in dem Entwickler-Modus

.sapUiPanelCont 
    { 
    padding. 0px !important; 
    } 

meine Platte mehr keine Polsterung hat. das ist genau das, was ich brauche. Wie überschreibt man diese Klasse mit einem eigenen Namen? Andere Panel haben die normale sapUiPanelCont und wenn ich diese Klasse zu meiner Kontrolle hinzufüge, funktioniert alles wie Zauber.

Ich habe meine styleclass hinzugefügt wie unten dargestellt:

control.addStyleClass("exampleClass"); 

Answer 1

Ihr CSS-Selektor hat präziser als der Standard .sapUiPanelCont sein. The most specific selector 'wins'.

So könnte man versuchen, die Wähler .sapUiPanelCont.exampleClass zu verwenden, und lassen Sie die wichtige Flagge:

.sapUiPanelCont.exampleClass 
{ 
    padding: 0px; 
} 

---

Sie den Stil auf eine neue CSS-Datei hinzufügen und es in Ihren Komponenten-Metadaten/Descriptor Referenz . Siehe Table 4 of documentation.

... 
"sap.ui5": { 
    "resources":{ //relative urls inside component 
     "css": [{ 
      "uri": "myStyles.css" 
     }] 
    }, 
... 

Damit wird die myStyles.css dem HTML-Dokument einmal hinzugefügt, sobald Ihre Komponente geladen ist.

Alternativ, wenn Sie XMLViews verwenden, können Sie inline the styles into the view:

<mvc:View controllerName="whatever" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc" 
      xmlns:html="http://www.w3.org/1999/xhtml"> 
    <html:style> 
    .sapUiPanelCont.exampleClass 
    { 
     padding: 0px; 
    } 
    </html:style> 
    <Panel class="exampleClass" text="Outer Panel"> 
     <Panel text="Inner Panel"> 
     </Panel> 
    </Panel> 
</mvc:View>