Polymer Second Paper Drawer

Question

i need a second paper drawer on the right side of my site. Is this possible with polymer 1 and the paper-drawer element? have anyone a code sample for me?

thanks for your help!

Relevant docs: [Polymer `paper-drawer-panel` element](https://elements.polymer-project.org/elements/paper-drawer-panel) — Rory O'Kane, Jun 22 '16 at 02:43
hey, thank you! i read the docs, but my problem isn't that i cant place the paper-drawer on the right side of my site. i need a second one to put content into it. — anton fliege, Jun 22 '16 at 02:51
Sorry, I don’t know Polymer. I was just linking to the docs to save time for other answerers who know Polymer but don’t remember how `paper-drawer-panel` works. — Rory O'Kane, Jun 22 '16 at 03:04

score 2 · Accepted Answer · answered Jun 22 '16 at 20:46

2

If you want to keep using elements by Google, you can use app-layout's app-drawer-layout, they even have a 2 drawer demo so you can view its source code for an example

answered Jun 22 '16 at 20:46

Alan Dávalos

2,568
11
19

tony19 · Answer 2 · 2016-06-22T05:16:25.417

1

Polymer's 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

For future reference, I recommend searching https://customelements.io for any elements you might need. The search results include Polymer's own elements as well as those contributed by the community.

edited Jun 22 '16 at 05:16

answered Jun 22 '16 at 04:55

tony19

125,647
18
229
307

1

You beat me to it again :). But yes, the `paper-multidrawer-panel` is great! – Tomasz Pluskiewicz Jun 22 '16 at 07:24
@TomaszPluskiewicz :) I agree – tony19 Jun 22 '16 at 11:26
I recommend the 2-drawer `app-drawer-layout` from Alan's answer, although the end result is slightly different than the one in `paper-multidrawer-layout`. – tony19 Jun 23 '16 at 12:18

score 1 · Answer 3 · answered Jun 22 '16 at 09:38

Just nest the drawers?

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

Working jsbin: http://jsbin.com/qocuyurazi/edit?html,output

Neat solution. This seems to achieve the same effect (mostly) as the 2-drawer `app-drawer-layout` that Alan points out. — tony19, Jun 23 '16 at 12:14

Polymer Second Paper Drawer

3 Answers3