如何使用 iron-fit-behavior 将表单居中放置在聚合物中的自定义元素中？

Question

我是 Polymer 的新手，我对如何正确使用某些元素仍有疑问。在这种情况下，我很难将自定义元素置于其他元素的中心。

我有元素 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>

如果我使用 "autoFitOnAttach"，它会以 window 为中心，但我尝试使用 "fit-into" 的组合中的 none 有效。有人可以帮助我正确使用这种行为吗？除了官方的 Polymer 代码之外，我没有找到该元素的任何示例，也没有使用 "fit-into"

的示例

谢谢:)

Answer 1

fitInto 属性需要一个 DOM 元素对象，但您的代码只是为其分配了一个字符串。您可以像这样获取元素对象：

<app-main-search-form fit-into="[[getElement('#main-search-img')]]" style="width: 50%; height: 50%"></app-main-search-form>

然后在你的元素的js中：

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

免责声明：我没有用实际的 iron-fit-behavior 示例对此进行测试，但这肯定解决了元素对象问题。

如何使用 iron-fit-behavior 将表单居中放置在聚合物中的自定义元素中？

How to user iron-fit-behavior to center an form inside a custom element in polymer?

polymer

polymer-1.0