Angular Mater 2正常输入

Question

有没有办法用 angular material 2 实现正常的输入输出 biox？比如图片

每当我参考文档时，我只看到点击占位符文本时浮动的输入。

Answer 1

您可以在垫子表单字段上使用 floatLabel="never"：

<mat-form-field appearance="legacy" floatLabel="never">
    <mat-label>Search here</mat-label>
    <input matInput>
    <mat-icon matSuffix>search</mat-icon>
</mat-form-field>

您不能像 docs:

中所述的示例图像那样将其与 appearance="outline" 结合使用

Note: only the legacy appearance supports the never option. never was originally added as a way to make the floating label emulate the behavior of a standard input placeholder. However the form field now supports both floating labels and placeholders. Therefore in the non-legacy appearances the never option has been disabled in favor of just using the placeholder.

Answer 2

我在我的项目中使用了这段代码它与您的输入相同，但在输入的底部有一个下划线

我只是在 mat-form-field 风格上做了一些改动

<mat-form-field   style="padding:3px;border-radius:60px;border-style:solid; border-color:#c0bfbf91;border-width:1px">
    <input matInput  value="Sushi">
  <mat-icon  matSuffix>search</mat-icon>
      <mat-placeholder style="margin-left:20px">Favorite food</mat-placeholder>
  </mat-form-field>

Angular Mater 2正常输入

Angular Mater 2 Normal Input

angular

angular-material2

angular-material-5

angular-material-6