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抽屉。我不确定本网站的代码是否已发布。但是，您可以查看浏览器中的代码。它的格式很好。从该代码中，我发现他们使用了“可见性：隐藏＆＃39;隐藏抽屉。以下是该元素的完整定义。希望这有帮助！

<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>

在您的情况下，请尝试删除display：none上的[narrow]，如下所示

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

聚合物1.0 - HIDE纸抽屉面板

1 个答案: