聚合物第二个纸盒答案

【问题标题】：Polymer Second Paper Drawer聚合物第二个纸盒
【发布时间】：2016-10-23 18:46:02
【问题描述】：

我需要在网站右侧放置第二个纸盒。聚合物 1 和纸盒元件可以做到这一点吗？有人给我一个代码示例吗？

感谢您的帮助！

【问题讨论】：

相关文档：Polymer paper-drawer-panel element
嘿，谢谢！我阅读了文档，但我的问题不在于我不能将纸盒放在网站的右侧。我需要第二个将内容放入其中。
对不起，我不知道 Polymer。我只是链接到文档，以便为其他知道 Polymer 但不记得 paper-drawer-panel 工作原理的回答者节省时间。

【解决方案1】：

Polymer 的 paper-drawer-panel 不支持多个抽屉，但您可以为此使用第三方元素：paper-multidrawer-panel。

<paper-multidrawer-panel>
  <paper-header-panel left-drawer>...</paper-header-panel>
  <paper-header-panel right-drawer>...</paper-header-panel>
  <paper-header-panel main>...</paper-header-panel>
</paper-multidrawer-panel>

codepen

为了将来参考，我建议搜索https://customelements.io 以查找您可能需要的任何元素。搜索结果包括 Polymer 自己的元素以及社区贡献的元素。

【讨论】：

你又打败了我 :)。但是，是的，paper-multidrawer-panel 很棒！
@TomaszPluskiewicz :) 我同意
我推荐 Alan 的回答中的 2-drawer app-drawer-layout，尽管最终结果与 paper-multidrawer-layout 中的结果略有不同。

【解决方案2】：

只是嵌套抽屉？

  <paper-drawer-panel force-narrow drawer-toggle-attribute="d1" class="fit">
    <div drawer>
      <!-- Left drawer here -->

    </div>
    <div main class="fit">
      <paper-drawer-panel force-narrow right-drawer drawer-toggle-attribute="d2" class="fit">
        <div drawer>
          <!-- Right drawer here -->

        </div>
        <div main class="fit">

          <!-- Main contents go here -->
          <h1>Left-drawer toggle</h1>
          <paper-icon-button d1 icon="menu"></paper-icon-button>
          <h1>Right-drawer toggle</h1>
          <paper-icon-button d2 icon="menu"></paper-icon-button>

        </div>
      </paper-drawer-panel>
    </div>
  </paper-drawer-panel>

工作的jsbin：http://jsbin.com/qocuyurazi/edit?html,output

【讨论】：

简洁的解决方案。这似乎与艾伦指出的 2-drawer app-drawer-layout 达到相同的效果（大部分）。

【解决方案3】：

如果你想继续使用谷歌的元素，你可以使用 app-layout 的app-drawer-layout，他们甚至有一个2 drawer demo，所以你可以查看它的source code 示例

【讨论】：