EmberJS菜单可见性基于宽度

Question

所以我试图弄清楚我在手机和桌面菜单中遇到的问题。所以我创建了一个可以切换菜单可见性的按钮，但菜单的行为也可以根据浏览器窗口的大小进行更改。

在桌面中，菜单应该是可见的 在移动设备中，菜单应隐藏

这是我所拥有的一些示例代码的链接。如果在窗口足够宽的情况下加载它，将显示菜单。单击它隐藏的按钮，再次单击它并显示它。

Cocoon gem

Answer 1

您是否考虑过使用https://github.com/freshbooks/ember-responsive专门设计用于帮助解决此类问题...

Answer 2

也许结帐flexi。

一般来说，我认为最好有一个监控窗口的服务，并相应地设置一个width属性。接下来，如果要显示菜单，可以使用计算属性进行切换。

Answer 3

如果你想在桌面上显示菜单而不管按钮是什么，最快的方法就是添加这个CSS

@media (min-width: 800px) {
  .menu {
    display: block !important;
  }
}

您可以将800px替换为您想要的宽度。

更好的方法是使用附加组件或框架，正如其他答案所暗示的那样。