聚合物第二纸抽屉

Question

我的网站右侧需要第二个纸抽屉。这对于聚合物 1 和纸抽屉元件是否可行？有人给我代码示例吗？

感谢您的帮助！

Answer 1

聚合物的paper-drawer-panel does not support more than one drawer, but you could use a third-party element for that: 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 自己的元素以及社区贡献的元素。

Answer 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

Answer 3

如果您想继续使用 Google 的元素，您可以使用 app-layout 的 app-drawer-layout, they even have a 2 drawer demo so you can view its source code 作为示例

聚合物第二纸抽屉

Polymer Second Paper Drawer

javascript

polymer

custom-element