1

「私のレイアウト」コード:

<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 を実行すると、アイコン ボタンは表示されますが、トグルが機能しません。

paper-drawer-panel のトグルと動作に関するリファレンスが見つかりません.....

paper-drawer-panel を切り替えるにはどうすればよいですか?

4

4 に答える 4

10

あなたのコードで気づいたことがいくつかあります。

  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 ファイルを含む elements ディレクトリがあると想定しています。ブラウザーで開発者ツールをチェックして、すべてのリソースが正しく読み込まれていて、エラーがないことを確認する必要があります。その場合、コンポーネントへのインポート パスが間違っています。

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>

そしてこれは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">。

于 2015-06-08T19:52:57.160 に答える
3

http://jsbin.com/winedi/edit?html、出力 

<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>
于 2015-08-11T17:39:20.530 に答える
2

あなたのコードは機能していると思います。paper-drawer-toggle 属性は、画面が狭い場合にメニュー アイコンを表示するようブラウザに指示するために使用されます。画面のサイズを十分に小さくすると、メニュー アイコンが表示されます。

于 2015-06-14T05:47:45.410 に答える
0

main.jsp の head にある正しい DocType を見逃したのかもしれません。

<!DOCTYPE html>
于 2015-06-18T15:59:00.077 に答える