Polymer 1.0 两层导航抽屉答案

【问题标题】：Polymer 1.0 two-level nav drawerPolymer 1.0 两层导航抽屉
【发布时间】：2015-07-01 05:09:47
【问题描述】：

大多数“Material Design”网站都有一个侧面导航抽屉，其中包含两级导航，使用可折叠的 zippy 菜单项。您将如何在 Polymer 1.0 中实现这一点？是否有一个元素，或者我必须将一堆不同的元素混合在一起？

一些网站有这个：

我假设这将使用 <paper-drawer-panel> 和 <paper-menu> 构建，加上 <iron-collapse> 的 zippy 行为。

将<paper-menu> 嵌套在另一个<paper-menu> 中的正确方法是什么？我尝试以几种不同的方式嵌套它们，但结果并不理想。

另外，我很惊讶您必须编写自定义 JavaScript 才能使可折叠组件工作。 The collapsibles in Bootstrap 让您只需使用 css 选择器将它们链接在一起。

【问题讨论】：

目前没有这方面的元素，但它在他们的路线图上。 github.com/PolymerElements/paper-elements/blob/master/README.md

标签： polymer

【解决方案1】：

自从提出这个问题以来，Polymer 已经实现了<paper-submenu>，以便在其<paper-menu> 中使用。

有关其工作原理的更多信息，请参阅paper-menu 的文档和演示。

这是来自 Polymer 网站的代码示例：

<paper-menu>
  <paper-submenu>
    <paper-item class="menu-trigger">Topics</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Topic 1</paper-item>
      <paper-item>Topic 2</paper-item>
      <paper-item>Topic 3</paper-item>
    </paper-menu>
  </paper-submenu>
  <paper-submenu>
    <paper-item class="menu-trigger">Faves</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Fave 1</paper-item>
      <paper-item>Fave 2</paper-item>
    </paper-menu>
  </paper-submenu>
  <paper-submenu disabled>
    <paper-item class="menu-trigger">Unavailable</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Disabled 1</paper-item>
      <paper-item>Disabled 2</paper-item>
    </paper-menu>
  </paper-submenu>
</paper-menu>

【讨论】：