java - 如何使 DrawerToggle 菜单字段覆盖内容 - Vaadin

Question

我想知道 Vaadin 14 中是否可以使 DrawerToggle 菜单字段仅覆盖类 AppLayout 中的内容，而不是在按下 DrawerToggle 时将内容推到右侧。

https://vaadin.com/components/vaadin-app-layout

public class AppLayoutWithDrawerMenu extends AppLayout {
    public AppLayoutWithDrawerMenu() {
        Image img = new Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo");
        img.setHeight("44px");
        addToNavbar(new DrawerToggle(), img);
        Tabs tabs = new Tabs(new Tab("Home"), new Tab("About"));
        tabs.setOrientation(Tabs.Orientation.VERTICAL);
        addToDrawer(tabs);
    }
}

当我按下DrawerToggle时，整个内容都会向右移动。我不会想要那样的。我想要抽屉切换的菜单覆盖内容。这可能吗？

Answer 1

您可以通过设置 --vaadin-app-layout-drawer-overlay CSS 属性来强制抽屉始终使用“覆盖”模式。

vaadin-app-layout {
  --vaadin-app-layout-drawer-overlay: true;
}

参见https://vaadin.com/forum/thread/17969415/18048801进行充分讨论。