1

我正在使用 Polymer 1.0 - 我的页面包含在 a 中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函数中调用它们，但无济于事..

我还尝试将整个元素拉入自定义元素中，但这只会在's 的功能<paper-toolbar>上产生更多问题。<paper-scroll-header-panel>

我怎样才能让这个自定义元素留在其父元素内并遵守格式化类/属性？

4

1 回答 1

1

尝试bottom在 light dom 中的元素上应用类。

<paper-toolbar class="tall layout horizontal" id="title-toolbar">
        <my-header class="bottom" id="myHeaderElement"></my-header>
</paper-toolbar>
于 2015-08-05T23:03:43.077 回答