我正在使用 app-layout 和 app-drawer/app-drawer-layout 和 app-header/app-header-layout(见下面的 MWE)。 paper-badge 附加到 app-header 内的元素。第一次加载页面时,它会短暂地出现在正确的位置(第 12 期),然后从屏幕右侧消失,正好偏右 256 像素,这是应用程序抽屉的确切大小。
调整屏幕大小时,它会重新计算位置到正确的位置。我怀疑位置是在抽屉装满之前计算出来的。
当 app-drawer 缩回且不可见时,不会发生这种情况。
我尝试在准备就绪时运行 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>
一个有效的 hack 是在 updatePosition()
上设置一个 setTimeout
:
ready: function() {
var self = this;
setTimeout(function(){
self.$$('paper-badge').updatePosition();
}, 100);
}
但是有没有更优雅的方法来解决这个问题? 感谢您的帮助!
最佳答案
一种解决方案是将 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>
关于polymer-2.x - 与应用程序布局一起使用时,纸徽章出现在错误的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45982258/