Question

我是聚合物的新手，我对如何正确使用某些元素仍有疑问。在这种情况下，我难以将自定义元素集中在其他元素中。

我有元素app-main-search，它应该基本上是一个形式居中的图像：

<dom-module id="app-main-search">
<template>
<style>
    :host {
        display: block;
        width: 100%;
        height: 600px;
    }
    .app-main-search-img {
        width: 100%;
        height: 100%;
    }
    </style>

    <iron-image class="app-main-search-img" id="main-search-img" sizing="cover" src="../../images/slider-image1.jpg"></iron-image>
    <app-main-search-form fit-into="#main-search-img" style="width: 50%; height: 50%"></app-main-search-form>

    </template>
    <script>
    (function() {
    'use strict';
    Polymer({
        is: 'app-main-search',
        properties: {
        }
    });
    })();
    </script>
    </dom-module>

元素app-main-search具有以下代码：

    <dom-module id="app-main-search-form">
<template>

<style>
:host {
    @apply(--layout);
    text-align: center;
    align-items:center;
    -webkit-align-items: center;
    justify-content:center;
    -webkit-justify-content:center;
}
</style>

<div class="container flex-vertical">
    <form is="iron-form" id="form" method="post" action="/form/handler">
        <paper-dropdown-menu class="featured-events-others">
            <paper-menu class="dropdown-content" selected="0">
            <paper-item selected>Item1</paper-item>
            <paper-item>Item2</paper-item>
            <paper-item>Item3</paper-item>
            </paper-menu>
        </paper-dropdown-menu>
        <paper-input name="label1"></paper-input>
        <paper-input name="label1"></paper-input>
    </form>
</div>
</template>

<script>
(function() {
'use strict';

Polymer({
    is: 'app-main-search-form',

behaviors: [
    Polymer.IronFitBehavior
]
});
})();
</script>
</dom-module>

如果我使用＆＃34; autoFitOnAttach＆＃34;，它会在窗口中居中，但我尝试使用的所有组合都没有＃34;适合＆＃34;工作。有人可以帮我正确使用这种行为吗？除了官方的Polymer代码之外，我没有找到任何这个元素的例子，它没有使用＆＃34; fit-into＆＃34;

的例子

谢谢：）

Answer 1

fitInto属性需要一个DOM元素对象，但您的代码只是为其分配一个字符串。您可以执行以下操作来获取元素对象：

getElement: function(elStr) {
  return this.querySelector(elStr)
}

然后在你的元素js：

{{1}}

免责声明：我还没有通过实际的铁拟合行为示例对此进行测试，但这肯定解决了元素对象的问题。

如何使用铁贴合行为将表单置于聚合物中的自定义元素内？

1 个答案: