Question

我试图制作纸板抽屉，左边一个在右边（力 - 窄），如下图所示

我尝试使用嵌套的纸板抽屉，但是一个菜单按钮打开/关闭两个抽屉，我无法弄清楚触发按钮的放置位置和方法，我试过这样的事情：

      <paper-drawer-panel>
           <paper-header-panel drawer>
              <paper-toolbar><div>Application</div></paper-toolbar>
              <div> Drawer content... </div>
           </paper-header-panel>

           <paper-drawer-panel drawer force-narrow right-drawer>
               <paper-header-panel drawer>
                   <paper-toolbar>
                      <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                      <div>Title</div>
                   </paper-toolbar>
                   <div> drawer2 content... </div>
              </paper-header-panel>

              <paper-header-panel>
                   <paper-toolbar>
                      <paper-icon-button icon="menu-vert" paper-drawer-toggle></paper-icon-button>
                   </paper-toolbar>
                   <div> main content
                   </div>
             </paper-header-panel>
         </paper-drawer-panel>
     </paper-drawer-panel>

请帮帮忙？

更新：尝试了GünterZöchbauer的建议，并得到了以下内容：

Answer 1

抽屉外部的部件必须具有“主”属性。分配主要和抽屉权利需要一点点玩杂耍。请参阅下面稍微更改过的代码（也删除了force-narrow），使其可以看到正确的抽屉。

<paper-drawer-panel>
    <paper-header-panel drawer>
        <paper-toolbar><div>Application</div></paper-toolbar>
        <div> Drawer content... </div>
    </paper-header-panel>

    <paper-drawer-panel main right-drawer>
        <paper-header-panel drawer>
            <paper-toolbar>
                <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                <div>Title</div>
            </paper-toolbar>
            <div> drawer2 content... </div>
        </paper-header-panel>

        <paper-header-panel main>
            <paper-toolbar>
                <paper-icon-button icon="menu-vert" paper-drawer-toggle></paper-icon-button>
            </paper-toolbar>
            <div>main content</div>
        </paper-header-panel>
    </paper-drawer-panel>
</paper-drawer-panel>

Answer 2

更新

似乎不支持2个抽屉。可能的是使用一个抽屉并向右显示或但不能同时显示两个抽屉。支持对它们进行不同的样式设置，这样可以根据抽屉的实际位置显示不同的内容。

旧

我不认为嵌套抽屉面板可以工作。只是删除包装抽屉面板应该这样做。放置切换按钮应该没问题。

       <paper-header-panel drawer>
          <paper-toolbar><div>Application</div></paper-toolbar>
          <div> Drawer content... </div>
       </paper-header-panel>

       <paper-drawer-panel drawer force-narrow right-drawer>
           <paper-header-panel drawer>
               <paper-toolbar>
                  <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
                  <div>Title</div>
               </paper-toolbar>
               <div> drawer2 content... </div>
          </paper-header-panel>

          <paper-header-panel>
               <paper-toolbar>
                  <paper-icon-button icon="menu-vert" paper-drawer-toggle></paper-icon-button>
               </paper-toolbar>
               <div> main content
               </div>
         </paper-header-panel>
       </paper-drawer-panel>

Answer 3

这将是一种替代方法，给每个纸质抽屉＆amp;使用javascript函数来控制切换而不是paper-drawer-toggle

drawerToggle: function() {
    if (this.$.drawer.narrow && this.$.drawer.getBoundingClientRect().width < parseInt(this.$.drawer.responsiveWidth)) {
        this.$.drawer.togglePanel();
    } else {
        this.$.drawer.forceNarrow = !this.$.drawer.forceNarrow;
    }
}

http://jsbin.com/winedi/edit?html,output

Answer 4

我刚在github上找到了自定义元素'paper-multidrawer-panel'

documentation

以下是改编自入门套件的示例html

<paper-multidrawer-panel force-narrow>
    <paper-scroll-header-panel left-drawer>
        <paper-toolbar>
            <span class="menu-name">Menu</span>
        </paper-toolbar>
        <paper-menu class="app-menu">
            <a href="#">
                <iron-icon icon="home"></iron-icon>
                <span>Home</span>
            </a>
            <a href="#">
                <iron-icon icon="info"></iron-icon>
                <span>Users</span>
            </a>
            <a href="#">
                <iron-icon icon="mail"></iron-icon>
                <span>Contact</span>
            </a>
        </paper-menu>
    </paper-scroll-header-panel>
    <paper-scroll-header-panel right-drawer>
        <paper-toolbar>
            <span class="menu-name">Options</span>
        </paper-toolbar>
        Options Contents
    </paper-scroll-header-panel>
    <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
        <paper-toolbar id="mainToolbar">
            <paper-icon-button id="paperToggle" icon="menu" paper-multidrawer-toggle-left></paper-icon-button>
            <span class="space"></span>
            <paper-icon-button icon="refresh"></paper-icon-button>
            <paper-icon-button icon="search" paper-multidrawer-toggle-right></paper-icon-button>
            <div class="middle middle-container">
                <div class="app-name">Polymer Starter Kit</div>
            </div>
        </paper-toolbar>
        <div class="content">
            Main Content
        </div>
    </paper-scroll-header-panel>
</paper-multidrawer-panel>

如何在聚合物元素网站上使用聚合物中的多个纸抽屉面板？

4 个答案: