面板内的面板

Question

我正在尝试做的是面板内部没有填充的面板。

当我在开发者模式下写作

  .sapUiPanelCont
  {
  padding. 0px !important;
  }

我的面板已经没有填充了。这正是我需要的。 如何用自己的名称覆盖这个类？所以其他小组得到了正常的sapUiPanelCont，当我将这个类添加到我的控件中时，一切都像魅力一样。

我添加了我的styleClass，如下所示：

 control.addStyleClass("exampleClass");

Answer 1

您的CSS选择器必须比默认的.sapUiPanelCont更具体。 The most specific selector 'wins'

所以你可以尝试使用选择器.sapUiPanelCont.exampleClass并省略！important标志：

.sapUiPanelCont.exampleClass
{
  padding: 0px;
}

您可以将样式添加到新的.css文件中，并在组件元数据/描述符中引用它。请参阅Table 4 of documentation。

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

这样，只要加载了组件，myStyles.css就会被添加到html文档中。

或者，如果您使用的是XMLView，则可以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>