聚合物1.0纸盒抽屉面板开关不起作用 [英] Polymer 1.0 paper-drawer-panel toggle is not working
问题描述
我的布局"代码:
<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会消失...
If I add paper-drawer=toogle attribute, paper-icon-button in main drawer is disappear...
'main.jsp'代码:
'main.jsp' code:
<%@ 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，我可以看到图标按钮，但切换不起作用.
If paper-drawer-toggle attribute remove and main.jsp run, I can see icon-button but toggle is not working..
我找不到有关纸抽屉面板切换和行为的参考.....
I can't found reference about paper-drawer-panel toggle and behavior.....
我该怎么做才能切换纸盒面板?
What should I do to toggle paper-drawer-panel?
推荐答案
在您的代码中我注意到了一些事情.
There are a few things I noticed in your code.
- 在我的布局代码中，您还应该导入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-icon-button元素上的paper-drawer-toggle属性可以直接使用切换功能.
- In your my-layout code you should also be importing polymer.html
- 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"> - 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.
我不确定您的目录结构，但是以下代码对我有用.我假设您的根内部有bower_components(包括所有聚合物，铁和纸元素).同样在您的根目录中，我假设您有一个包含m-layout.html文件的elements目录. 您应该在浏览器中检查开发人员工具，以检查所有资源是否正确加载并且没有错误.如果是这样，则您到组件的导入路径是错误的.
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.
在您的elements/m-layout.html中:
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>
这在main.jsp中:
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>
还请记住，仅当屏幕非常小(移动)时才激活抽屉(以及切换开关).若要强制抽屉行为，无论屏幕大小如何，都可以通过设置force-narrow属性:<paper-drawer-panel force-narrow="true">来强制缩小视图.或者，您可以设置激活抽屉的宽度<paper-drawer-panel responsive-width="800px">.
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">.
这篇关于聚合物1.0纸盒抽屉面板开关不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
