切换纸张纸板面板内的纸抽屉面板

问题描述：

我正在尝试使用纸张元素，并且使用了不同的面板。我试图从文档修改示例：切换纸张纸板面板内的纸抽屉面板

<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')

答

你试图使用jQuery更换$('#panel')，这里是这样做的JavaScript的方式：

取代：

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

有：

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

它不起作用。我更新了你的建议。 $（）在我的控制台工作，从聚合物或angular2导入，不确定 – dgn

适用于我http://plnkr.co/edit/SRChYXQMatrsGddudofs?p=preview 只是检查你是否使它足够窄以隐藏绘制（并按下第二个按钮） –

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

切换纸张纸板面板内的纸抽屉面板

相关推荐