Wadi：Valu 主题菜单 hiding/resizing

Question

我正在尝试复制此演示的 Vaadin Valo theme demo layout - menu on the left, content on the right. I've used the source code 作为起点，p运行除了 UI class（ValoThemeUI), ValoMenuLayout 和 Tables 布局，一切看起来都符合预期，但是当我调整浏览器 window 大小时，我的版本不会像官方演示那样动态 resize/hide 右侧菜单。

我想我遗漏了什么，但是查看演示源代码，我看不出什么。某处必须有一些 scss 代码来定义菜单 width/resize 行为 - 但我找不到它。

我确实必须 add/do 不同的一件事是将以下代码添加到 ValoThemeUI，否则应用程序不会运行。演示一定是在其他地方做这个（也许还有其他关键的事情？），但我不知道在哪里。

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

Answer 1

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

演示的源代码，如链接所示，不执行现场演示（也已链接）中显示的菜单 hiding/resizing，但让它工作相当简单（一旦你知道如何） .你只需要添加

addStyleName(ValoTheme.UI_WITH_MENU);

之后

Responsive.makeResponsive(this);

在 ValoThemeUI 的 init() 方法中。

Wadi：Valu 主题菜单 hiding/resizing

Vaadin: Valo-theme menu hiding/resizing

vaadin

vaadin7

responsive

vaadin-valo-theme