如何让 floatingLabel 在聚合物 1.0 中工作？答案

【问题标题】：How to get floatingLabel working in polymer 1.0?如何让 floatingLabel 在聚合物 1.0 中工作？
【发布时间】：2015-09-03 16:47:05
【问题描述】：

我是 Polymer 的新手。当使用 paper-elements 0.5 时，当字段处于活动状态/用户输入输入字段时，我能够获得一个不错的 floatingLabel。

0.5
<paper-input-decorator id="searchText"
  floatingLabel
  label="find an author">
  <input is="core-input" id="sInput">
</paper-input-decorator>

但是，这与 1.0.0（纸张元素 1.0.5）不同。文档提到了一个属性alwaysFloat，它的工作方式与 0.5 不同（相反，它们一直在浮动标签）。我不明白这是否已被弃用。不胜感激。

【问题讨论】：

【解决方案1】：

您正在寻找<paper-input> 元素。默认情况下，此元素会产生这种效果。

<paper-input label="your label"></paper-input>

Here你可以找到有关它的文档。

【讨论】：

我去过那个页面很多次，但无法理解。你能提供一个可行的例子吗？
@Bala 上面的代码是一个工作示例。把它放在一个页面上，输入一些文本，标签就会浮动。这是paper-input 的默认行为。您可以通过添加 no-label-float 属性来关闭浮动。如果您希望标签浮动，即使 paper-input 为空，请添加 always-float-label。
@DirkGrappendorf 虽然接近但与 0.5 不同。这是我的意思/我想用 1.0 实现的目标，polymer-project.org/0.5/components/paper-input/demo.html
@Bala 所以如果输入获得焦点，即使它是空的，你希望标签浮动？这可能很棘手，因为 paper-input-decorator 仅在输入字段具有某些内容时才应用“label-is-floating”类。而且目前我们不能从自定义元素扩展，所以我们不能通过覆盖来改变这种行为。看来需要复制paper-input-decorator，修改_computeInputContentClass()函数。