Polymer 1.0 两层导航抽屉

Question

大多数 "Material Design" 站点都具有侧边导航抽屉，其中使用可折叠的快捷菜单项进行两级导航。你将如何在 Polymer 1.0 中实现它？有这方面的元素吗，还是我必须将一堆不同的元素混合在一起？

一些网站有这个：

我假设这将使用 <paper-drawer-panel> 构建，其中包含 <paper-menu>，加上来自 <iron-collapse>.

的活泼行为

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

此外，令我惊讶的是您必须编写自定义 JavaScript 才能使可折叠对象正常工作。 The collapsibles in Bootstrap 让你 link 它们与 css 选择器一起使用。

Answer 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>

Polymer 1.0 两层导航抽屉

Polymer 1.0 two-level nav drawer

polymer