切換紙張紙板面板內的紙抽屜面板

我正在嘗試使用紙張元素，並且使用了不同的面板。我試圖從文檔修改示例：切換紙張紙板面板內的紙抽屜面板

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

我想有頭板內部的抽屜，從而使頭取頁面的整個寬度。

這裏是我的嘗試：（plunker）

<body class="fullbleed layout vertical"> 
    <paper-header-panel> 
     <paper-toolbar> 
     <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button> 
     <paper-icon-button icon="menu" (click)="document.querySelector('#panel').togglePanel()"></paper-icon-button> 
     <div>My app</div> 
     </paper-toolbar> 
     <paper-drawer-panel id="panel"> 
     <div drawer> drawer </div> 
     <div main> main </div> 
     </paper-drawer-panel> 
    </paper-header-panel> 
    </body>

這裏，抽屜不會關閉。按鈕不做任何事情。在我的控制檯中，我可以使用$('#panel').togglePanel()，並且我發現它會更改面板上的selected屬性，但抽屜不會關閉。我的代碼出了什麼問題，以及如何使「菜單」按鈕關閉我的抽屜？

編輯：由document.querySelector('#panel')

來源

2015-11-19 dgn

你試圖使用jQuery更換$('#panel')，這裏是這樣做的JavaScript的方式：

取代：

(click)="$('#panel').togglePanel()"

有：

onClick="document.querySelector('#panel').togglePanel()"

來源

2015-11-19 16:35:39

它不起作用。我更新了你的建議。 $（）在我的控制檯工作，從聚合物或angular2導入，不確定 – dgn

適用於我http://plnkr.co/edit/SRChYXQMatrsGddudofs?p=preview 只是檢查你是否使它足夠窄以隱藏繪製（並按下第二個按鈕） –

哦有趣。我在Chrome 48上，它不工作 – dgn

切換紙張紙板面板內的紙抽屜面板

回答

相關問題