发表新帖
发表新帖

Polymer 1.0 paper-drawer-panel toggle is not working

后端 未结
关注
4 1296
情话喂你
情话喂你 2021-01-24 02:17

\'my-layout\' code :
相关标签:
4条回答
  • 心在旅途
    2021-01-24 02:23

    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>
    0 讨论(0)
  • 南笙
    2021-01-24 02:32

    There are a few things I noticed in your code.

    1. In your my-layout code you should also be importing polymer.html
    2. 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">
    3. 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">.

    0 讨论(0)
  • 日久生厌
    2021-01-24 02:38

    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.

    0 讨论(0)
  • 南方客
    2021-01-24 02:38

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

    <!DOCTYPE html>
    0 讨论(0)
 看不清?
提交回复
热议问题