Question

我正在使用app-drawer和app-drawer / app-drawer-layout和app-header / app-header-layout（参见下面的MWE）。纸徽标附在app-header内的元素上。第一次加载页面时，它会短暂地显示在正确的位置（问题＃12），而不是从屏幕右侧消失，恰好是向右移动256px，这是应用程序抽屉的确切大小。

调整屏幕大小后，会将位置重新计算到正确的位置。我怀疑在抽屉满载之前计算了位置。

当应用程序抽屉缩回且不可见时，不会发生这种情况。

我尝试准备好运行updatePosition（），但这没有帮助。

这是我的MWE：

<template>
<style is="custom-style">
    app-drawer {
      --app-drawer-content-container: {
          background-color: green;
      };
    }
    app-header {
      background-color: yellow;
    }
</style>

  <app-drawer-layout fullbleed>

    <app-drawer slot="drawer">
        <div id="drawerbox">Navigation Drawer</div>
    </app-drawer>

    <div class="container">
      <app-header-layout>
        <app-header id="header" condenses reveals effects="waterfall" slot="header">
           <app-toolbar id="toolbarheader">
              <div main-title id="toolbartitlebox">Title Toolbar</div>
              <paper-icon-button id="discoursebutton" icon="communication:forum"></paper-icon-button>
              <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>
           </app-toolbar>
        </app-header>
      </app-header-layout>
    </div>
  </app-drawer-layout>
</template>

一个有效的方法是在setTimeout上设置updatePosition()：

ready: function() {
  var self = this;
  setTimeout(function(){
    self.$$('paper-badge').updatePosition();
  }, 100);
}

但有更优雅的解决方法吗？谢谢你的帮助！

Answer 1

一种解决方案是将paper-badge放在app-drawer-layout之后/之后：

<template>
    <style>
      app-drawer {
        --app-drawer-content-container: {
          background-color: green;
        }
        ;
      }

      app-header {
        background-color: yellow;
      }

      paper-badge {
        margin-top: 10px;
      }
    </style>

    <app-drawer-layout fullbleed>

      <app-drawer id="drawer" slot="drawer">
        <div id="drawerbox">Navigation Drawer</div>
      </app-drawer>


      <app-header-layout>
        <app-header id="header" condenses reveals effects="waterfall" slot="header">
          <app-toolbar id="toolbarheader">
            <paper-icon-button id="toggle" on-tap="_onToggle" icon="menu"></paper-icon-button>

            <div main-title id="toolbartitlebox">Title Toolbar</div>
            <paper-icon-button id="discoursebutton" icon="inbox"></paper-icon-button>
            <!--  <paper-badge for="discoursebutton" label="20" title="20 results"></paper-badge>-->
          </app-toolbar>
        </app-header>
      </app-header-layout>

      <div class="container">
        container
      </div>
    </app-drawer-layout>

    <paper-badge for="discoursebutton" id="pd" label="20" title="20 results"></paper-badge>
</template>

Plnkr：http://plnkr.co/edit/V7zGBpqqzRonbAYyudea?p=preview

Answer 2

通过将<paper-icon-button>和<paper-badge>放在带有position: relative的容器中，并停止使用for属性，我避免了同样的问题。

  <div style="position: relative">
    <paper-icon-button id="notification-icon" icon="social:notifications" onclick="[[showNotifications]]">
    </paper-icon-button>
    <template is="dom-if" if="[[messages.length]]">
      <paper-badge label="[[messages.length]]" class="red"></paper-badge>
    </template>
  </div>

与app-layout一起使用时，纸徽出现在错误的位置

2 个答案: