问题
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>
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.
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!
回答1:
I cannot toggle the drawer in and out with the obvious on-screen button.
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
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.
Here's a working example.
<!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>来源：https://stackoverflow.com/questions/35545268/polymer-paper-drawer-panel-nest-drawer-inside-main