Полимер 1.0 бумага-выдвижная панель панели не работает

Question

Полимер 1.0 бумага-выдвижная панель панели не работает

Код "my-layout":

<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-box =toogle, иконка бумаги в главном блоке исчезнет...

Код 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>

Если удалить атрибут с выдвижным ящиком бумаги и запустить main.jsp, я вижу значок кнопки, но переключатель не работает..

Я не могу найти информацию о переключателях панели и лотка для бумаги.....

Что я должен сделать, чтобы переключить панель ящика для бумаги?

1

polymer toggle behavior drawertoggle

Источник

user4598703 08 июн '15 в 16:15

4 ответа

Другие вопросы по тегам polymer toggle behavior drawertoggle

user4958976 08 июн '15 в 19:52 2015-06-08 19:52 · Answer 1 · 2015-06-08 19:52

В вашем коде я заметил несколько вещей.

В вашем коде my-layout вы также должны импортировать Polymer.html.
Какую версию Polymer вы используете? Поскольку вы используете webcomponents-lite.min.js и заголовок заявляет Polymer 1.0, я предполагаю, что вы используете 1.0. В Polymer 1.0 элементы определены с использованием <dom-module id="m-layout"> вместо <polymer-element name="m-layout">
функция переключения в вашем сценарии не обязательна, переключение работает из коробки, используя атрибут paper-box-toggle в элементе paper-icon-button.

Я не уверен в вашей структуре каталогов, но следующий код работает для меня. Я предполагаю, что у вас есть bower_components (включая все полимерные, железные и бумажные элементы) внутри вашего корня. Также в вашем корне я предполагаю, что у вас есть каталог элементов, содержащий ваш файл m-layout.html. Вы должны проверить ваши инструменты разработчика в вашем браузере, чтобы убедиться, что все ваши ресурсы загружаются правильно и нет ошибок. Если так, то ваши пути импорта к компонентам неверны.

В ваших 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-small: <paper-drawer-panel force-narrow="true">, В качестве альтернативы вы можете установить ширину, на которой ящик должен быть активирован, <paper-drawer-panel responsive-width="800px">,

user2069452 11 авг '15 в 17:39 2015-08-11 17:39 · Answer 2 · 2015-08-11 17:39

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>

user3133816 14 июн '15 в 05:47 2015-06-14 05:47 · Answer 3 · 2015-06-14 05:47

Я думаю, что ваш код работает. Атрибут paper-box-toggle используется для указания браузеру показывать значок меню, когда экран с узким. Когда вы увеличиваете размер экрана до достаточно маленькой, вы должны увидеть значок меню.

2

Источник

user3133816 14 июн '15 в 05:47

user262090 18 июн '15 в 15:59 2015-06-18 15:59 · Answer 4 · 2015-06-18 15:59

Может быть, вы просто пропустили правильный DocType в главе main.jsp

<!DOCTYPE html>

0

Источник

user262090 18 июн '15 в 15:59