Question

＆＃39;我的布局＆＃39;代码：

<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属性，主抽屉中的纸质图标按钮就会消失......

＆＃39; main.jsp中＆＃39;代码：

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

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

在我的布局代码中，您还应该导入polymer.html
您使用的是哪个版本的聚合物？由于您使用的是webcomponents-lite.min.js，标题是Polymer 1.0，我假设您使用的是1.0。在Polymer 1.0中，使用TimeInfo[][] groups = grouping.Select(g => g.ToArray()).ToArray();而不是<dom-module id="m-layout">
脚本中的切换功能不是必需的，切换按钮使用纸图标按钮元素上的paper-drawer-toggle属性开箱即用。

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

在您的元素/ m-layout.html中：

<polymer-element name="m-layout">

，这在main.jsp中：

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

另外请注意，只有在屏幕非常小（移动）时才会激活抽屉（以及切换开关）。要强制抽屉行为，无论屏幕大小如何，您都可以通过设置force-narrow属性强制缩小视图：<!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>  <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>。或者，您可以设置激活抽屉的宽度<paper-drawer-panel force-narrow="true">。

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>

聚合物1.0纸抽屉面板切换不起作用

4 个答案: