代码之家  ›  专栏  ›  技术社区  ›  Jack T.Todua

如何将图标与纸张输入装饰符内联?

  •  0
  • Jack T.Todua  · 技术社区  · 10 年前

    这是我想要实现的。

    enter image description here

    尽管在使用此代码时。

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

    我最终得到了这个,

    enter image description here

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

    非常感谢。

    2 回复  |  直到 10 年前
        1
  •  2
  •   Xlikinho    10 年前

    可以使用聚合物布局属性:

    <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">
    
        2
  •  1
  •   sanjith edward    10 年前

    包括在一张表中,并给出 display: table-cell 图标和输入。这将有所帮助。然后你可以根据自己的需要来设计它。