material-design - paper-input - 单击输入字段时 float 标签

标签 material-design polymer-1.0 paper-elements

只有当用户输入第一个字符时,paper-input 才会 float 其标签。是否可以在用户点击后立即 float 标签?例如,引用 https://unacademy.in/登录屏幕输入字段。

最佳答案

您可以使用 always-float-label , no-label-float paper-input 的属性/属性 在一个on-click 事件中实现这一点。 paper-input demo展示了如何使用 always-float-labelno-label-float 属性。

演示可以是

<!DOCTYPE html>
<html>

<head>

    <title>Label float</title>

    <script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents.js"></script>
  
  <base href="https://cdn.rawgit.com/download/polymer-cdn/1.0.1/lib/">
  <link rel="import" href="paper-input/paper-input.html">
    

</head>

<body>

<my-form></my-form>  
  <dom-module id="my-form">  
   <template> 
  
     <paper-input name="name" id="name" label="name" on-click="_click" on-blur="_blur"></paper-input>
  
    </template> 
    <script type="text/javascript">
      Polymer({
        is:"my-form",
        _click:function (){
          //console.log(this.$.name.value);
          this.$.name.alwaysFloatLabel=true;
        },
        _blur:function(){
         this.$.name.alwaysFloatLabel=false;
       }
      })
    
    </script>
</dom-module>
</body>

</html>

关于material-design - paper-input - 单击输入字段时 float 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35666602/

相关文章:

dart - 更改 paper-input 元素的大小写

polymer - 控制纸复选框的状态

html - 过渡 SVG 过滤器

html - Angular Material layout-align center 不影响小模式下的文本

javascript - 不触发特定观察者的数组突变

javascript - polymer 自定义元素不服从父 html 元素

css - Polymer 中下拉菜单的位置和大小

android - 导入新的 Android 设计支持库

android - 在底部导航栏图标的顶部显示徽章

javascript - [dom-bind::_createEventHandler]:未定义监听器方法