2016-04-19 1 views
1

更新引き出しを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> 

答えて

0

ソリューション

は、私が子供の頃に <paper-icon-button>を追加しました paper-drawer-panelに、次に関数 closeDrawer()が働いた。

関連する問題