聚合物 <paper-drawer-panel> 嵌套 'drawer' 里面 'main'

Question

好吧，据我所知，paper-drawer-panel 的正确元素嵌套应该是这样的：

<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>

上面的层次结构会给你这样的东西（我正在处理的网站的当前模板）：

然而，这就是我想要实现的目标：

现在，我可以让它看起来像我想要的那样（因此是屏幕截图）但是，问题是它根本无法正常工作。这是上述理想但非功能性布局的代码：

  <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> 组件内部的较大组件内的任何组件都未正确放置在主体内。

我真的很好奇如何使用第二种布局实现功能，因为我更喜欢第二种布局而不是第一种布局。也许我的布局是错误的，也许我什至不应该使用 <paper-drawer-panel>，如果可能的话，也许我应该使用与所有这些分开的抽屉。我对聚合物还很陌生，正处于试验阶段，但是如果有人能用这种布局为我指明正确的方向，让我走上正确的轨道，那就太好了！谢谢！

Answer 1

I cannot toggle the drawer in and out with the obvious on-screen button.

您可以将事件侦听器附加到它并调用纸抽屉面板的 togglePanel 方法。

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 的滚动效果。

这是一个工作示例。

<!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>

聚合物 <paper-drawer-panel> 嵌套 'drawer' 里面 'main'

Polymer <paper-drawer-panel> nest 'drawer' inside 'main'

web-component

polymer

polymer-1.0