如何在聚合物中使用多个抽屉面板，就像在聚合物元素网站上一样？答案

【问题标题】：how to use multiple paper-drawer-panel in polymer just like on polymer elements website?如何在聚合物中使用多个抽屉面板，就像在聚合物元素网站上一样？
【发布时间】：2016-04-09 01:52:54
【问题描述】：

我试图在纸盘抽屉里，一个在左边另一个在右边（强制窄），就像下面的图片一样

我尝试使用嵌套的纸盘抽屉，但是一个菜单按钮打开/关闭两个抽屉，我不知道在哪里以及如何放置触发按钮，我尝试了这样的事情：

      <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ünter Zöchbauer 的建议，并得到以下建议：

【问题讨论】：

标签： javascript html css polymer polymer-1.0

【解决方案1】：

抽屉外的部分必须获得“main”属性。分配主要和抽屉权利需要一些杂耍。请参阅下面稍微更改的代码（也删除了 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>

【讨论】：

【解决方案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>

【讨论】：

我没听明白，您能否通过代码提出所需的更改？
我更新了我的答案。不确定一个paper-drawer-panel中的两个header-panels是否应该工作。
嘿，谢谢，我试过了，有点没用。我无法在 cmets 中附加屏幕截图

【解决方案3】：

这将是另一种方法，将#id 分配给每个纸盒并使用 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

【讨论】：

【解决方案4】：

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

https://github.com/WoodyWoodsta/paper-multidrawer-panel

这是改编自入门工具包的示例 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>

【讨论】：