聚合物<紙抽屜面板>巢「抽屜」「主」

好了，內，以便我看到它，嵌套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>[email protected]</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>，也許我應該使用抽屜與所有這些分開，如果可能的話。我對聚合物相當陌生，並且處於試驗階段，但是如果任何人都能指引我走向正確的方向，讓我走上正確的軌道，那麼這個佈局將非常棒！謝謝！

來源

2016-02-22 Dominic Farolino

我無法用明顯的屏幕上的按鈕切換抽屜。

您可以附加一個事件監聽器，並調用紙抽屜面板的togglePanel方法。

放置該組件內出現在這個大的組件內部的任何組件未正確放置身體

您可能需要聲明你.content div的height和width沿內其position（最可能是relative）。但是，這確實會忽略使用paper-scroll-header-panel的滾動效果，因爲paper-drawer-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>

來源

2016-02-22 11:15:37

非常感謝！應該深入瞭解組件的公共API –

聚合物<紙抽屜面板>巢「抽屜」「主」

回答

相關問題