How to paper-drawer-panel toggle

1,322 views
Skip to first unread message

Hyesoo Oh

unread,
Jun 8, 2015, 12:48:49 PM6/8/15
to polym...@googlegroups.com

Hi, everybody!

I use polymer in my project but polymer 1.0 paper-drawer-panel toggle is not working..

'my-layout' code :
<link rel="import" href="../bower_components/iron-icons/iron-icons.html" >
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html" >
<link rel="import" href="../bower_components/paper-drawer-panel/paper-drawer-panel.html" >
<link rel="import" href="../bower_components/paper-header-panel/paper-header-panel.html" >
<link rel="import" href="../bower_components/paper-toolbar/paper-toolbar.html" >

<polymer-element name="m-layout" >
    <template>
      <paper-drawer-panel>

          <paper-header-panel drawer>
            <paper-toolbar>
              <div>Application</div>
            </paper-toolbar>
            <div> Drawer content... </div>
          </paper-header-panel>

          <paper-header-panel main>
            <paper-toolbar>
              <paper-icon-button icon="menu" style="color: white;" paper-drawer-toggle></paper-icon-button>
              <div>Title</div>
            </paper-toolbar>
            <div> Main content... </div>
          </paper-header-panel>

        </paper-drawer-panel>
    </template>

    <script>
      Polymer({
            is: 'm-layout',
            togglePanel: function() {
                this.$.paper_drawer_panel.togglePanel();
            }
      });
    </script>
</polymer-element>

If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...

'main.jsp' code:

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>

<html>
  <head>
    <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

    <link rel="import" href="elements/m-layout.html" >

    <style>
    html, body {
      height: 100%;
    }
    body {
      margin: 0;
      background-color:#E5E5E5;
    }
    </style>

  </head>
  <body>
    <m-layout></m-layout>
  </body>
</html>


If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..

I can't found reference about paper-drawer-panel toggle and behavior.....

What should I do to toggle paper-drawer-panel?


Robert Simon

unread,
Jun 8, 2015, 1:33:18 PM6/8/15
to polym...@googlegroups.com
that m-layout is not declared as custom element for Polymer 1.0, I would probably start there
<dom-module id="m-layout">

anthony sebastian

unread,
Aug 25, 2015, 2:09:35 AM8/25/15
to Polymer
The  paper-drawer-toggle attribute only works with mobile devices. If you have an emulator, switch to mobile and you should see the button.

CragVFX

unread,
Aug 25, 2015, 12:54:41 PM8/25/15
to Polymer
If you place 'force-narrow' on the paper-drawer-panel, you'll be able to use the togglePanel()
Reply all
Reply to author
Forward
0 new messages