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

我无法使用明显的屏幕按钮来切换抽屉。

您可以附加一个事件监听器并调用纸质抽屉面板的togglePanel方法。

放置在组件内部的较大组件内的任何组件都未正确放置在主体内

您可能需要声明height div的width和.content及其position（最有可能是relative）。但是，由于paper-scroll-header-panel是一个绝对定位的元素，这确实会忽略使用paper-drawer-panel的滚动效果。

这是一个有效的例子。

＆＃13;

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

＆＃13;

聚合物<纸抽屉面板>嵌套'抽屉'在'主'

1 个答案: