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

【问题标题】：How can I make so the DrawerToggle menu field overlay the contents - Vaadin如何使 DrawerToggle 菜单字段覆盖内容 - Vaadin
【发布时间】：2020-05-04 08:46:39
【问题描述】：

我想知道是否有可能在 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 时，整个内容都会向右移动。我不想要那个。我想要drawerToggle 的菜单覆盖内容。这可能吗？

【问题讨论】：

标签： java vaadin

【解决方案1】：

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

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

完整讨论请参见https://vaadin.com/forum/thread/17969415/18048801。

【讨论】：

谢谢！我已经阅读了您的答案，我将对其进行测试，稍后再给您答复。 brb。