Question

我希望我的MaterialHeader和MaterialNavBar布局到页面的左侧。设置paddlingLeft（0）什么都不做。无论paddingLeft设置为什么，GWT Material Design都会将paddingLeft设置为侧导航的宽度。我试图让导航栏从左向右延伸，导航栏下方的SideNav。

    header = new MaterialHeader();
    header.setPaddingLeft(0);
    MaterialNavBar b = new MaterialNavBar();
    b.setActivates("sideNav1");
    MaterialSideNav sideNavBar = new MaterialSideNav(SideNavType.FIXED);
    sideNavBar.setWidth(280);
    sideNavBar.setTop(64);
    sideNavBar.setId("sideNav1");
    sideNavBar.setAlwaysShowActivator(true);
    sideNavBar.setShowOnAttach(true);
    header.add(navBar);
    header.add(sideNav);

运行此代码时，导航栏始终向右移动280像素。并且Header html元素的padding-left值为280而不是零。

检查html会显示带有padding-left = 280px的标题。这与我将Side Nav设置为的宽度相同。

我做错了吗？感谢

Answer 1

为了将MaterialSideNav置于顶部MaterialNavBar下方，您必须选择一个SideNavType来实现HasWithHeader接口。最适合您需求的是MaterialSideNavPush（SideNavType.PUSH_WITH_HEADER）。以下是GMD source code和demo。

根据GMD源代码，您的MaterialSideNav不应位于MaterialHeader内。

Answer 2

从版本2开始，我们将SideNav类型分成不同的类，以便更好地实现。

因为@ brian17han建议这是正确的，但需要将其升级到v2，这里有一个示例代码

<m:MaterialSideNavPush withHeader="true" ... />

或java

MaterialSideNavPush sidenav = new MaterialSideNavPush();
sidenav.setHeader(true);

作为参考，您可以在此处查看所有类型 https://gwtmaterialdesign.github.io/gwt-material-demo/#sidenavs

无法设置MaterialHeader paddingLeft

2 个答案: