Question

我需要在包含md-input，md-select，md-datepicker或md-autocomplete的每个md-input-container上显示一个固定的（无动画）浮动标签。我实际上通过在md-input-container上添加class =“md-input-has-placeholder”来设法让它在md-input上运行，但是它不能用于任何其他类型的输入。

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

result expected example

Answer 1

尝试将class =“active”添加到标签。

<md-input-container class="md-input-has-placeholder">
    <label style="font-size:15px;" class="active">Name</label>
    <input type="text" name="name" ng-model="user.name">
</md-input-container>

Answer 2

您必须覆盖angular-material中的某些CSS样式。这应该让你接近你想要实现的目标。

md-input-container label {
   -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
   transform: translate3d(0,6px,0) scale(.75) !important;
   -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
   transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
   opacity: 1 !important;
   top: auto !important;
}

md-input-container .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}

http://codepen.io/kuhnroyal/pen/BQMNyy

Answer 3

你可以在你的领域添加占位符=“”我已用输入和textarea测试过，不知道它是否适用于所有组件..希望有所帮助

<md-input-container>
        <label>Text (always floating)</label>
        <textarea ng-model="ngModel" rows="1" md-maxlength="150" placeholder=""></textarea>
    </md-input-container>

Answer 4

如果您不介意将标签着色，您可以随时将md-input-focused类添加到md-input-container。

Answer 5

对于@angular/material，您可以在＆lt; md-input-container＆gt;上设置属性 floatPlaceholder =＆＃34;始终＆＃34; 标签。从2.0.0-beta.2开始，此工作正常。我知道它与您的问题无关，但很多人会搜索此问题并找到您的问题（就像我一样）。

<md-input-container floatPlaceholder="always">
   <input mdInput type="text" id="username" formControlName="Username"
    class="form-control" placeholder="Login" required>
</md-input-container>

Answer 6

与@kuhnroyal的答案相比，这是一个略微的改进（支持！），考虑了输入中可能出现的ng-required，并提供了一个类，以便您只能在需要时应用此样式：

将以下CSS添加到您的页面：

md-input-container.floating-label-always label {
  -webkit-transform: translate3d(0,6px,0) scale(.75) !important;
  transform: translate3d(0,6px,0) scale(.75) !important;
  -webkit-transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1) !important;
  transition: transform .4s cubic-bezier(.25,.8,.25,1),width .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1) !important;
  opacity: 1 !important;
  top: auto !important;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon) {
  color: transparent;
}
md-input-container.floating-label-always .md-select-placeholder > span:not(.md-select-icon):after {
  content: none !important;
}

要应用它，请将floating-label-always类添加到您的md-input-container中。

Answer 7

您可以在https://material.angularjs.org/latest/api/directive/mdInputContainer#attributes中检出此指令 md-no-float。确保在输入中使用的是占位符，而不是实际的元素

角度材质输入标签始终为任何输入类型浮动

7 个答案: