如何将图标内置于纸质输入装饰器？

Question

这就是我想要实现的目标。

虽然使用此代码时。

<paper-input-decorator floatingLabel label="Name *">
    <core-icon icon="account-circle"></core-icon>
    <input type="name">
</paper-input-decorator>

我最终得到了这个，

我注意到，在他们网站上的代码（which can be seen here）中，他们刚刚在左边给出了soem填充表单，然后给了图标一个绝对位置。这是设置这个设置的唯一方法吗？

谢谢。

Answer 1

您可以使用聚合物布局属性：

<div horizontal layout end>
    <core-icon icon="account-circle" style="margin: 0 10px 10px 0;"></core-icon>
    <paper-input-decorator floatingLabel label="Name *" flex>
        <input type="name">
    </paper-input-decorator>
</div>

http://jsfiddle.net/aswoy1og/

确保导入布局html，例如：

<link rel="import" href="http://www.polymer-project.org/components/polymer/layout.html">

Answer 2

将两者都包含在表格中，并为图标和输入提供display: table-cell。我会帮你的。然后你可以设计它以满足你的需求。