更新引き出しをdocument.querySelector('paper-drawer-panel').forceNarrow = true;
で閉じることができました。私はこの質問を削除するつもりでしたが、これを適切に行う方法があるかどうか確認するためにこれを残しておきます。closeDrawer()
紙引き出しパネルのcloseDrawer()がカスタムヘッダ要素で閉じていない
私は自分のカスタムヘッダーを書きましたが、これは紙のヘッダーの動作を使用しません。それは振る舞いも機能も持たないカスタム要素のhtml形式のヘッダです。
私はpaper-drawer-panel
を実装していましたが、私のカスタムヘッダーでうまくいきました。しかし、私はcloseDrawer()
引き出しを閉じることができません。関数自体がfunction() { this.selected = 'main' }
であることがわかりますが、内部コードpaper-drawer-panel
にどのように当てはまるかわかりません。
ドロワーを閉じるにはpaper-drawer-panel
さんのcloseDrawer()
をどうすればできますか?
のindex.html:
<template is="dom-bind" id="app">
<paper-drawer-panel>
<div drawer>
<drawer-custom></drawer-custom>
</div>
<div main>
<header-custom></header-custom>
<video-selection data-route="home" tabindex="-1"></video-selection>
</div>
</paper-drawer-panel>
</template>
アプリ/要素/引き出し-custom.html:
<dom-module id="drawer-custom">
<template>
<style include="iron-flex iron-flex-alignment">
:host {
background-color: var(--brown-color);
height: 1000px;
width: 100%;
overflow-x: hidden;
outline: none;
display: block;
padding-right: 1px;
--iron-icon-height: 42px;
--iron-icon-width: 42px;
}
.v-center {
@apply(--layout-vertical);
@apply(--layout-center-center);
}
#close-drawer {
height: 130px;
width: 100%;
background-color: var(--pink-color);
padding-right: 1px;
}
#contact {
background-color: #a9483b;
height: 130px;
width: 100%;
padding-right: 1px;
}
</style>
<div on-click="_closeDrawer" id="close-drawer" class="v-center">
<iron-icon src='../images/menu-button-close.svg'></iron-icon>
</div>
<div id="contact">
contact
</div>
</template>
<script>
Polymer({
is: 'drawer-custom',
_closeDrawer: function() {
document.querySelector('paper-drawer-panel').closeDrawer();
}
})
</script>
</dom-module>