Vaadin：Valo主题菜单隐藏/调整大小

Question

我正在尝试复制左侧的Vaadin Valo theme demo布局菜单，右侧的内容。我已经使用source code作为起点，除了UI类（ValoThemeUI），ValoMenuLayout和Tables布局之外，修剪掉了，一切看起来都符合预期，但是我的版本没有动态调整大小/隐藏当我像官方演示那样调整浏览器窗口大小时的右侧菜单。

我想我错过了一些东西，但看着演示源代码，我看不清楚。必须有一些scss代码定义菜单宽度/调整大小行为 - 但我找不到它。

我必须添加/执行不同的操作是将以下代码添加到ValoThemeUI，否则应用程序不会运行。演示必须在其他地方做这个（也许是其他关键的东西？），但我无法弄清楚在哪里。

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = ValoThemeUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}

Answer 1

好的，所以我通过浏览valo源代码回答了我自己的问题。

演示的源代码，如链接，不会在现场演示（也链接）中显示菜单隐藏/调整大小，但让它工作非常简单（一旦你知道如何）。你只需要添加

value

后

addStyleName(ValoTheme.UI_WITH_MENU);

在ValoThemeUI的init（）方法中。