polymer - paper-drawer-panel's closeDrawer() not closing with custom header element -
update able close drawer document.queryselector('paper-drawer-panel').forcenarrow = true;
. going delete question maybe leave see if there way proper closedrawer()
i wrote own custom header, doesn't use of paper header behaviors. it's it's own custom element html styled header no behavior or features.
i implemented paper-drawer-panel
worked great custom header. however, can not closedrawer()
close drawer. see function function () { this.selected = 'main' }
, not sure how applies inner code of paper-drawer-panel
.
how can make paper-drawer-panel
's closedrawer()
close drawer?
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>
app/elements/drawer-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>
solution:
when added <paper-icon-button>
child paper-drawer-panel
function closedrawer()
worked.
Comments
Post a Comment