聚合物1.0 - 隱藏紙盒面板

Question

我使用的聚合物1.0來實現紙抽屜面板。我也有一些鏈接在paper-header-panel topbar上。我用狹窄的css選擇器來縮小寬度時隱藏這些鏈接。因此在移動中只使用抽屜進行導航。它現在看起來就像寬廣而窄的寬度。

<paper-drawer-panel id="drawerPanel"> 
<paper-header-panel drawer id="test1"> 
    <paper-toolbar><span>Menu</span></paper-toolbar> 
    <paper-menu vertical layout> 
     <paper-item data-route="home">Home</paper-item> 
    <paper-item data-route="about">About</paper-item> 
    <paper-item data-route="contact">Contact</paper-item> 
    <paper-item> Dropdown</paper-item> 
    </paper-menu> 
</paper-header-panel> 
<paper-header-panel main> 
    <paper-toolbar class="navbar"> 
    <paper-icon-button icon="menu" id="navicon" paper-drawer-toggle></paper-icon-button> 

    <div> 
    TryDjango 
    </div> 

    <span class="flex"></span> 
    <paper-tabs selected="0" attr-for-selected="data-route" style="text-align:center" id="navbarmenu1"> 
    <paper-tab>Home</paper-tab> 
    <paper-tab>About</paper-tab> 
    <paper-tab>Contact</paper-tab> 
    <paper-tab>Dropdown</paper-tab> 
</paper-tabs> 
<span class="flex"></span> 
<paper-tabs selected="0" id = "navbarmenu2"> 
<paper-tab>Default</paper-tab> 
<paper-tab>Static Top</paper-tab> 
<paper-tab>Fixed Top</paper-tab> 
</paper-tabs> 
</paper-toolbar> 
</paper-header-panel> 
</paper-drawer-panel> 

這是我用來當隱藏我的頭板上的鏈接在窄佈局的CSS。

paper-drawer-panel[narrow] #navbarmenu1 { 
    display: none; 
} 
paper-drawer-panel[narrow] #navbarmenu2 { 
    display: none; 
} 

我給這兩個紙菜單項ID來隱藏他們的時候[窄]

這裏是我的問題，現在：

我想隱藏到抽屜面板所有的時間除非狹窄。就像這樣： 我不能用我的抽屜面板上力窄，因爲它會隱藏自己的紙頭的鏈接，即使在寬幅。 因此，如何能我作出這樣的抽屜面板隱藏或實現我想要什麼更好的方式。任何幫助表示讚賞。 :)

Answer 1

你在找什麼在https://www.polymer-project.org/summit實現。他們已經實現了一個自定義元素x抽屜。我不確定此網站的代碼是否已發佈。不過，您可以查看瀏覽器中的代碼。它格式良好。從該代碼中，我發現他們已經使用'visibility：hidden'來隱藏抽屜。以下是該元素的完整定義。希望這可以幫助！

<dom-module id="x-drawer" assetpath="../bower_components/app-layout/x-drawer/"> 

    <style> 

    :host { 
     position: absolute; 
     top: 0; 
     right: auto; 
     bottom: 0; 
     left: 0; 
     width: 256px; 
     overflow: hidden; 
     background-color: var(--x-drawer-background-color, #fff); 
     visibility: hidden; 

     -webkit-transform: translate3d(-100%, 0, 0); 
     transform: translate3d(-100%, 0, 0); 

     -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01); 
     transition: transform 0.4s cubic-bezier(0.42, 0, 0.33, 1.01); 
    } 

    :host([position=right]) { 
     right: 0; 
     left: auto; 
     -webkit-transform: translate3d(100%, 0, 0); 
     transform: translate3d(100%, 0, 0); 
    } 

    :host([position=top]) { 
     top: 0; 
     right: 0; 
     bottom: auto; 
     left: 0; 
     width: auto; 
     height: 256px; 
     -webkit-transform: translate3d(0, -100%, 0); 
     transform: translate3d(0, -100%, 0); 
    } 

    :host([position=bottom]) { 
     top: auto; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     width: auto; 
     height: 256px; 
     -webkit-transform: translate3d(0, 100%, 0); 
     transform: translate3d(0, 100%, 0); 
    } 

    :host([opened]), 
    :host([position][opened]) { 
     visibility: visible; 

     -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0); 
    } 

    </style> 

    <template> 

    <content></content> 

    </template> 

    <script> 

    Polymer({ 

     is: 'x-drawer', 

     behaviors: [ 
     Polymer.OverlayBehavior 
     ], 

     properties: { 

     opened: { 
      type: Boolean, 
      value: false, 
      notify: true, 
      reflectToAttribute: true, 
      observer: '_hasOpenedChanged' 
     }, 

     position: { 
      reflectToAttribute: true 
     } 

     }, 

     listeners: { 
     'transitionend': '_onTransitionEnd' 
     }, 

     toggle: function() { 
     this.opened = !this.opened; 
     }, 

     _hasOpenedChanged: function(opened, prev) { 
     if (prev !== undefined) { 
      this.style.visibility = 'visible'; 
     } 
     this.shouldEnableScroll(true); 
     }, 

     _onTransitionEnd: function(e) { 
     if (e.currentTarget == this) { 
      this.style.visibility = ''; 
     } 
     } 
    }); 

    </script> 

</dom-module> 

在你的情況，嘗試在顯示器上除去[窄]：無如下面

paper-drawer-panel #navbarmenu1 { 
    display: none; 
}