Polymer 1.0 - 隐藏纸抽屉面板

Question

我正在使用 Polymer 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，以便在 [narrow]

时隐藏它们

我现在的问题是：

除非狭窄，否则我想一直躲在抽屉面板里。像这样： 我不能在我的抽屉面板上使用 force-narrow，因为它会隐藏我的纸页眉链接，即使宽度很宽。 那么我怎样才能隐藏那个抽屉面板或以更好的方式实现我想要的东西。任何帮助表示赞赏。 :)

Answer 1

您要查找的内容已在 https://www.polymer-project.org/summit 中实现。他们已经实现了一个自定义元素 x-drawer。我不确定该网站的代码是否已发布。但是，您可以查看浏览器中的代码。它的格式很好。从该代码中，我看到他们使用 '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>

对于您的情况，请尝试删除显示中的 [narrow]：none，如下所示

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