與抽屜式切換類似的屬性，但不切換抽屜

Question

除了不切換菜單外，是否還有其他類似drawer-toggle？我想爲紙張圖標按鈕添加一個類似的屬性，以根據是否顯示抽屜來顯示/隱藏圖標按鈕。我知道我可以從app-drawer-layout.narrow獲得布爾值，但是我的代碼與以下內容不完全相同，並且很難提及<app-drawer-layout>。以下僅僅是提供drawer-toggle的含義的例子。

<app-drawer-layout> 
    <app-drawer> 
    drawer-content 
    </app-drawer> 
    <app-header-layout> 
    <app-header> 
     <app-toolbar> 
     <paper-icon-button icon="close" drawer-toggle></paper-icon-button> 
     <div main-title>App name</div> 
     </app-toolbar> 
    </app-header> 

    main content 

    </app-header-layout> 
</app-drawer-layout> 

Answer 1

可以綁定一個布爾屬性爲app-drawer-layout的narrow屬性，並使用這與觀測顯示/隱藏paper-icon-button。例如：

<dom-module id="test-app"> 
    <template> 

    <style> 

     .hide { 
     display: none; 
     } 

    </style> 

    <app-drawer-layout fullbleed narrow="{{visible}}"> 
     <app-drawer id="drawer"> 
     drawer content 
     </app-drawer> 
     <app-header-layout> 
     <app-header> 
      <app-toolbar> 
      <paper-icon-button id="button" icon="menu" on-tap="_onTap"></paper-icon-button> 
      <div class="title" main-title>App name</div> 
      </app-toolbar> 
     </app-header> 
     <div> 
      main content 
     </div> 
     </app-header-layout> 
    </app-drawer-layout> 

    </template> 
    <script> 
    Polymer({ 

     is: 'test-app', 

     properties: { 

     visible: { 
      type: Boolean, 
      observer: '_visibleChanged' 
     } 

     }, 

     _onTap: function() { 
     console.log(this.visible); 
     this.$.drawer.toggle(); 
     }, 

     _visibleChanged: function(value) { 
     this.toggleClass('hide', !value, this.$.button); 
     } 

    }); 
    </script> 
</dom-module> 

注意，現在你需要手動處理抽屜切換（_onTap功能）。