我正在使用应用程序布局与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);
}
但是有更优雅的方法来解决这个问题吗?谢谢你的帮助!
一个解决方案是将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>
其他:赌场
我通过将http://plnkr.co/edit/V7zGBpqqzRonbAYyudea?p=preview和<paper-icon-button>
放入带有<paper-badge>
的容器中避免了同样的问题,并停止使用position: relative
属性。
for