Polymer 1.0 抽屉面板切换不起作用

Question

“我的布局”代码：

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

如果我添加 paper-drawer=toogle 属性，主抽屉中的 paper-icon-button 会消失...

'main.jsp' 代码：

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

如果 paper-drawer-toggle 属性删除并 main.jsp 运行，我可以看到图标按钮，但切换不起作用..

我找不到关于抽屉面板切换和行为的参考资料.....

我应该怎么做才能切换抽屉面板？

Answer 1

我在您的代码中注意到了一些事情。

1. 在您的 my-layout 代码中，您还应该导入 polymer.html
2. 您使用的是哪个版本的 Polymer？由于您使用的是 webcomponents-lite.min.js 并且标题状态为 Polymer 1.0，因此我假设您使用的是 1.0。在 Polymer 1.0 中，元素是使用 <dom-module id="m-layout"> 而不是 <polymer-element name="m-layout"> 定义的
3. 脚本中的切换功能不是必需的，切换功能使用 paper-icon-button 元素上的 paper-drawer-toggle 属性开箱即用。

我不确定您的目录结构，但以下代码对我有用。我假设你的根中有 bower_components（包括所有聚合物、铁和纸元素）。同样在您的根目录中，我假设您有一个包含 m-layout.html 文件的元素目录。 您应该在浏览器中检查您的开发人员工具，以检查您的所有资源是否正确加载并且没有错误。如果是这样，那么您的组件的导入路径是错误的。

在您的元素/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>

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

还请记住，抽屉（以及因此切换）仅在屏幕非常小时（移动设备）时才被激活。无论屏幕尺寸如何，要强制抽屉行为，您可以通过设置 force-narrow 属性来强制窄视图：<paper-drawer-panel force-narrow="true">。或者，您可以设置应激活抽屉的宽度，<paper-drawer-panel responsive-width="800px">。

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

Answer 3

我认为您的代码正在运行。 paper-drawer-toggle 属性用于告诉浏览器在屏幕窄时显示菜单图标。当您将屏幕调整到足够小的宽度时，您应该会看到菜单图标出现。

Answer 4

也许你只是错过了 main.jsp 头部的正确 DocType

<!DOCTYPE html>