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?

回答1:

There are a few things I noticed in your code.

In your my-layout code you should also be importing polymer.html
Which version of Polymer are you using? Since you are using the webcomponents-lite.min.js and the title states Polymer 1.0, I am assuming you are using 1.0. In Polymer 1.0 elements are defined using <dom-module id="m-layout"> instead of <polymer-element name="m-layout">
the toggle function in your script is not necessary, the toggle works out of the box using the paper-drawer-toggle attribute on the paper-icon-button element.

I am not sure of your directory structure but the following code works for me. I am assuming you have bower_components (including all polymer, iron, and paper elements) inside of your root. Also in your root I am assuming you have an elements directory containing your m-layout.html file. You should check your developer tools in your browser to check that all your resources are loading correctly and there are no errors. If so, then your import paths to the components are wrong.

In your elements/m-layout.html:

<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" >
<link rel="import" href="../bower_components/polymer/polymer.html">

<dom-module id="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>
</dom-module>

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

and this in main.jsp:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <title>My Test</title>

  <!-- Load platform support before any code that touches the DOM. -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

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

</head>

<body>
  <m-layout></m-layout>
</body>

</html>

Also keep in mind, that the drawer (and therefore the toggle) is only activated when the screen is very small (mobile). To force the drawer behavior no matter what the screen size, you can force the narrow view by setting the force-narrow attribute: <paper-drawer-panel force-narrow="true">. Alternatively you can set the width at which the drawer should be activated, <paper-drawer-panel responsive-width="800px">.

回答2:

http://jsbin.com/winedi/edit?html,output

<style>

</style>

<template>

    <paper-drawer-panel id="drawer">
        <div drawer>
            drawer
        </div>

        <paper-header-panel main>
            <paper-toolbar class="teal-500">
                <paper-icon-button icon="menu" on-tap="menuToggle"></paper-icon-button>
                <div class="title">{{toolBarTitle}}</div>
                <paper-icon-button icon="search"></paper-icon-button>
            </paper-toolbar>
        </paper-header-panel>
    </paper-drawer-panel>

</template>

<script>
Polymer({

    is: "layout-inbox",

    menuToggle: function() {
        if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
            this.$.drawer.togglePanel();
        } else {
            this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
        }
    },

    properties: {
        toolBarTitle: {
            type: String,
            value: "lucok"
        }
    }

});
</script>

</dom-module>

回答3:

I think your code is working. The paper-drawer-toggle attribute is used to tell the browser to show the menu icon when the screen with is narrow. When you size the screen to a small enough width, you should seen the menu icon appear.

回答4:

Maybe did you just miss the correct DocType in the head of main.jsp

<!DOCTYPE html>

来源：https://stackoverflow.com/questions/30714253/polymer-1-0-paper-drawer-panel-toggle-is-not-working