显示带有混入的灰色背景 [英] Showing a gray backdrop with a mixin
问题描述
我有一个小窗口要插入到页面中(在关闭页面时将其删除).我希望该窗口后面有一个灰色的背景,就像在对话框上一样.所以我想我将paper-dialog-behavior
或iron-overlay-behavior
用作mixin,并在我的ready()
方法中设置this.withBackdrop = true
.但是,当我在该元素中添加...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element)
或...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element)
时,它永远不会出现.
I have a small window that I'm inserting into my page (and removing when the page is closed). I want a grayed-out background behind this window, as on dialogs. So I thought I'd use paper-dialog-behavior
or iron-overlay-behavior
as a mixin, and set this.withBackdrop = true
in my ready()
method. However, when I add ...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element)
or ...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element)
to this element, it never appears.
像在对话框上一样,我累了.open()
,并被告知它是未定义的.我可以在DevTools中跟踪我的元素加载,并且在控制台中不会显示任何错误,但是它永远不会出现在屏幕上.
I tired .open()
like on a dialog and was told that it's undefined. I can trace my element loading in DevTools, and no errors print in the console, but it never appears on the screen.
您可以在这支笔上看到我要做什么: https://codepen.io/johnthad/pen/zRLMpe
如果我将MyChild
的类声明与mixin交换,则子级将加载但从不显示.
You can see what I'm going for at this pen: https://codepen.io/johnthad/pen/zRLMpe
If I swap the class declarations of MyChild
for the one with the mixin, the child loads but never displays.
推荐答案
您需要在附加后调用MyChild
的open
:
You need to call open
of MyChild
after append:
_doTap(e) {
. . .
this.$.placeholder.appendChild(this.mychild);
this.mychild.open()
}
然后将withBackdrop
属性添加到MyChild
组件中的true
:
Then add withBackdrop
property to true
in MyChild
component:
static get properties() {
return {
withBackdrop: {
type: Boolean,
value: true
}
}
}
在这里,您将找到有效的代码.
Here you'll find working code.
这篇关于显示带有混入的灰色背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!