聚合物<纸抽屉面板>在“主"内部嵌套“抽屉" [英] Polymer <paper-drawer-panel> nest 'drawer' inside 'main'
问题描述
好的，正如我所看到的，paper-drawer-panel的正确元素嵌套应该是这样的:
Alright, so as I see it, the proper element nesting for paper-drawer-panel should be something like this:
<paper-drawer-panel>
<paper-header-panel drawer>
<!-- Side bar content -->
<paper-menu>......</paper-menu>
</paper-header-panel>
<paper-scroll-header-panel main>
<paper-toolbar class="tall">
</paper-toolbar>
<div class="main-content">
<!-- Main app body content here -->
</div>
<!-- Main body content -->
</paper-drawer-panel>
以上层次结构将为您提供以下信息(我正在处理的网站的当前模板):
The above hierarchy will give you something like this (current template for site I'm working on):
但这是我要实现的目标:
However this is what I am trying to achieve:
现在，我可以查看我想要的样子(因此截图)，但是问题是它根本无法正常工作.这是上述理想但不起作用的布局的代码:
Now, I can get it to look how I want to (hence the screenshot) however, problem is it does not act right at all. Here is the code for the above ideal, yet non-functional layout:
<paper-scroll-header-panel condenses keep-condensed-header>
<paper-toolbar class="tall">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<div class="flex"></div>
<div class="bottom title">Dom Farolino</div>
</paper-toolbar>
<div class="content">
<paper-drawer-panel>
<paper-header-panel mode="scroll" drawer>
<paper-toolbar id="navheader" class="tall">
<img class="middle profile" hidden>
<div class="bottom layout vertical">
<span>Dom Farolino</span>
<span>domfarolino@gmail.com</span>
</div>
</paper-toolbar>
<paper-menu class="list">
<paper-item>New item here</paper-item>
<paper-item>New item here</paper-item>
</paper-menu>
</paper-header-panel>
<div main>
<content id="objects" select="*"></content>
</div>
</paper-drawer-panel>
</div>
</paper-scroll-header-panel>
正如我所说，它甚至还无法正常运行.首先，我无法使用明显的屏幕按钮来切换抽屉.这不足为奇，因为指定为我的paper-drawer-toggle的组件甚至不在paper-drawer-panel组件中.同样，放置在该较大组件中的任何出现在<content>组件内部的组件也都无法正确放置在体内.
As I said, it is not even close to properly functioning. For starters, I cannot toggle the drawer in and out with the obvious on-screen button. This is no surprise because the component designated as my paper-drawer-toggle is not even in the paper-drawer-panel component. Also any components placed inside this larger component that appear inside the <content> component are not placed properly inside the body.
我真的很好奇如何在第二种布局中实现功能，因为我更喜欢第一种布局.也许我的布局是错误的，也许我什至不应该使用<paper-drawer-panel>，并且如果可能的话，我应该将抽屉与所有其他物品分开使用.我对聚合物技术还很陌生，现在处于实验阶段，但是如果有人能指出正确的方向，让我在正确的布局上走上正确的道路，那就太好了！谢谢！
I really curious as to how I can achieve functionality with the second layout because I prefer that one over the first one. Perhaps my layout is wrong and maybe I shouldn't even be using <paper-drawer-panel> and maybe I should be using a drawer separately from all of this if that is possible. I'm quite new to polymer and am in an experimenting phase however if anyone can point me in the right direction to get me on the right track with this layout that would be great! Thanks!
推荐答案
我无法使用明显的屏幕按钮来回切换抽屉.
I cannot toggle the drawer in and out with the obvious on-screen button.
您可以在其上附加一个事件侦听器，然后调用您的纸盒面板的togglePanel方法.
You can attach an event listener to it and call the togglePanel method of your paper-drawer-panel.
放置在此较大组件中的任何出现在组件内部的组件均未正确放置在体内
any components placed inside this larger component that appear inside the component are not placed properly inside the body
您可能需要声明.content div的height和width以及其position(很可能是relative).但是，由于paper-drawer-panel是绝对定位的元素，因此它的确会忽略paper-scroll-header-panel滚动效果的使用.
You might need to declare the height and width of your .content div along with its position (most likely relative). However, this do tend to ignore the use of your paper-scroll-header-panel's scrolling effects due to paper-drawer-panel being an absolutely positioned element.
这是一个可行的例子.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<base href="https://polygit2.appspot.com/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-scroll-header-panel/paper-scroll-header-panel.html">
<link rel="import" href="paper-toolbar/paper-toolbar.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="paper-header-panel/paper-header-panel.html">
<link rel="import" href="paper-menu/paper-menu.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="iron-flex-layout/classes/iron-flex-layout.html">
<style is="custom-style">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.red {
width: 100%;
height: 100%;
background-color: red;
font-size: 14pt;
line-height: 2em;
color: #fff;
}
</style>
</head>
<body class="fullbleed">
<dom-module id="my-app">
<template>
<style>
:host {
display: block;
width: 100%;
height: 100%;
}
paper-scroll-header-panel {
width: 100%;
height: 100%;
}
/* 'Cause css positioning sucks */
.content {
width: 100%;
height: 100%;
position: relative;
overflow-y: auto;
}
</style>
<paper-scroll-header-panel condenses keep-condensed-header>
<paper-toolbar class="tall">
<!-- Attach an event listener here -->
<paper-icon-button icon="menu" on-tap="toggleDrawer"></paper-icon-button>
<div class="flex"></div>
<div class="bottom title">Dom Farolino</div>
</paper-toolbar>
<div class="content">
<paper-drawer-panel id="drawerPanel">
<paper-header-panel mode="scroll" drawer>
<paper-menu class="list">
<paper-item>New item here</paper-item>
<paper-item>New item here</paper-item>
</paper-menu>
</paper-header-panel>
<div main class="fit">
<content select="*"></content>
</div>
</paper-drawer-panel>
</div>
</paper-scroll-header-panel>
</template>
<script>
Polymer({
is: 'my-app',
toggleDrawer: function() {
this.$.drawerPanel.togglePanel();
console.log('Toggled');
}
});
</script>
</dom-module>
<my-app>
<div class="red">
<div>Bacon ipsum dolor amet bacon ham hock ground round fatback tail ball tip shoulder tongue pancetta picanha shankle. Picanha sirloin shank t-bone bresaola pork loin pig capicola filet mignon pork chop leberkas. Corned beef doner chicken, meatloaf
t-bone turducken filet mignon pork pork chop jowl rump shoulder. Jerky bresaola t-bone pastrami doner. Jowl spare ribs sausage bresaola cow doner rump prosciutto, t-bone pig pastrami turducken ball tip ground round. Flank pig leberkas short ribs
bresaola shoulder. Doner ham tail, tongue kielbasa swine landjaeger ribeye. Ribeye boudin tail tenderloin. Jerky tri-tip shankle, kielbasa ham hock tenderloin ground round hamburger beef ribs venison. Ground round sirloin beef, flank kielbasa
capicola beef ribs swine tail strip steak corned beef pork chop rump. Boudin capicola chicken meatloaf venison andouille. Ribeye prosciutto sausage, porchetta cow beef ribs cupim jerky spare ribs alcatra meatball. Meatloaf chicken cupim fatback
sirloin. Meatloaf pancetta ham andouille, pork loin pastrami hamburger venison t-bone ribeye jerky meatball. Sausage chuck filet mignon shank tongue. Rump kevin flank hamburger fatback meatball jerky. Biltong drumstick prosciutto, shoulder meatloaf
cow tongue salami filet mignon beef ribs spare ribs meatball tri-tip ham hock short loin. Drumstick chicken strip steak alcatra shank frankfurter pork belly porchetta. Cupim swine salami rump. Short ribs short loin bacon pork porchetta tenderloin
swine, cow ham hock meatloaf. Meatloaf turducken pork belly flank venison, sausage pork ham. Meatloaf ham hock prosciutto, flank pork pastrami alcatra beef ribs fatback cow pork loin tenderloin bacon capicola short loin. Ham ham hock andouille
spare ribs. Prosciutto t-bone shankle pig salami brisket. Chuck doner porchetta capicola pig meatball pork belly pork andouille rump alcatra corned beef turducken. Spare ribs pastrami pancetta chuck alcatra hamburger ground round short ribs. Prosciutto
shoulder picanha doner corned beef, sirloin pork chop tongue pancetta short ribs cow chuck ball tip. Frankfurter pork rump bresaola ground round sirloin pancetta fatback kielbasa leberkas filet mignon pork chop boudin shankle pork belly. Kevin
swine andouille biltong, pork belly porchetta jerky corned beef short ribs beef ribs frankfurter. Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!</div>
</div>
</my-app>
</body>
</html>
这篇关于聚合物<纸抽屉面板>在“主"内部嵌套“抽屉"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
