我正在使用 Polymer 1.0 - 我的页面包含在 paper-scroll-header-panel
中我正在尝试将主工具栏的一部分变成自定义元素( my-header
):
<paper-scroll-header-panel condenses keep-condensed-header>
<!-- Main Toolbar -->
<paper-toolbar class="tall layout horizontal" id="title-toolbar">
<my-header id="myHeaderElement"></my-header>
</paper-toolbar>
my-header
自定义元素如下所示:
<dom-module id="my-header">
<style>
</style>
<template>
<div class="bottom center horizontal layout" id="testing">
<paper-button>Title</paper-button>
<div class="flex"></div>
<paper-button on-click="openLang">lang</paper-button>
</div>
</template>
<script>
Polymer({
is: "my-header",
behaviors: [
Polymer.IronFitBehavior,
Polymer.IronResizableBehavior
],
ready: function() {
this.fit();
}
});
</script>
</dom-module>
问题在于布局属性bottom center horizontal layout
没有被正确应用,因为它不服从父级 <paper-toolbar>
元素。
它呈现如下:
但它应该呈现橙色框底部的文本和 Title
左边,中间的长弹性框,和 LANG
在最右边。如果我从自定义元素中提取 HTML 并将其直接粘贴到 index.html 文件中,它就可以正常工作。
如您所见,我向元素添加了一些行为,并在 ready
中调用它们。功能但无济于事..
我也尝试过拉动整个 <paper-toolbar>
元素到自定义元素中,但这只会造成更多问题 <paper-scroll-header-panel>
的功能。
如何让这个自定义元素保留在其父元素内并遵守格式类/属性?
最佳答案
尝试在 light dom 中的元素上应用 bottom
类。
<paper-toolbar class="tall layout horizontal" id="title-toolbar">
<my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>
关于javascript - polymer 自定义元素不服从父 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31843866/