Question

我想使用Panel作为我的UI的内容而不是Window，但我仍然希望在Window类中存在标题部分。所以我尝试了这个，但它并不完美：

@Theme("mytheme")
@CDIUI("")
public class MyUI extends UI {

    @Inject
    private CDIViewProvider provider;

    @Override
    protected void init(VaadinRequest request) {
        Navigator navigator = new Navigator();
        navigator.addProvider(provider);
        navigator.navigateTo("mypanel");  
    }   
}

然后，在我的MyPanel类中，我将标题设置为这样的面板;

@CDIView("mypanel")
public class MyPanel extends com.vaadin.ui.Panel implements View {
    @Inject
    private MySubPanel mySubPanel;    

    @Override
    public void enter(ViewChangeListener.ViewChangeEvent event) {
        FormLayout layout = new FormLayout();
        Panel headerPanel = new Panel();
        headerPanel.addStyleName("header-panel");
        layout.addComponent(headerPanel);
        layout.addComponent(mySubPanel);
        this.setContent(layout);
    }
}

最后，在mytheme.css我有以下内容：

@import "../valo/valo.scss";
@mixin mytheme {
   // some scss code
}

.header-panel {
   height: 50px;
   width: 100%;
   background: red repeat-x;
   margin: 0px;
   padding-top: 0px;
}

headerPanel显示正确的度量和背景颜色，但它仍然是面板上方及其左侧的一个小的空白空间。如何删除该保证金？

Answer 1

我认为你的CSS应该在mythem标签内：

@import "../valo/valo.scss";
@mixin mytheme {
      .header-panel {
          height: 50px;
          width: 100%;
          background: red repeat-x;
          margin: 0px;
          padding-top: 0px;
       }
 }

你可以尝试设置：

    setMargin(false);
    setSpacing(false);

FormLayout上的

使用Vaadin中的scss无法删除面板与页面顶部之间的边距

1 个答案: