如何使用材料在同一行中制作图标和占位符？

Posted 2023-03-06

【中文标题】如何使用材料在同一行中制作图标和占位符？

【英文标题】：How can i make icon and placeholder in same line using material?

【发布时间】：2018-07-07 17:59:33

【问题描述】：

我想让图标和搜索栏在同一行。

<div class="example-header">
    <mat-form-field>
      <mat-icon>search</mat-icon>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

上面我添加了我的html代码..

demo

我写了很多 CSS，但我无法得到这个 帮助我前进..

【问题讨论】：

添加了一些 CSS，您现在可以查看更新的 stackblitz。图标和文本在同一行。 stackblitz.com/edit/angular-jd2l6y-rmdqfx?file=styles.css

需要帮助。如果用户开始输入，我需要隐藏占位符，我该怎么做？

【参考方案1】：

不知道为什么其他答案如此复杂。只需将matPrefix 或matSuffix 与mat-button 一起使用（针对Angular-material v7 测试）。

Straight from docs:

<mat-form-field>
  <input matInput type="text" placeholder="Search">
  <button mat-button matPrefix mat-icon-button>
    <mat-icon>search</mat-icon>
  </button>
</mat-form-field>


<mat-form-field>
  <input matInput type="text" placeholder="Clearable input">
  <button mat-button *ngIf="value" matSuffix mat-icon-button>
    <mat-icon>close</mat-icon>
  </button>
</mat-form-field>

【讨论】：

也可以直接在mat-icon上使用

【参考方案2】：

试试这个，

 <div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>      
     <input matInput (keyup)="applyFilter($event.target.value)" 
      placeholder="Filter">
    <mat-icon matPrefix>search</mat-icon>
  </mat-form-field>
 </div>
</div>

刚刚包含 matPrefix 到 mat-icon。

希望这能解决问题。

【讨论】：

我不会在小提琴中加入任何东西。刚刚包含 matPrefix。

我只添加了这个 matPrefix，但它并不完美，你能检查一下那个小提琴

【参考方案3】：

应用这个 css 它将在一行中对齐

.mat-form-field-label 
    top: 12px;

.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label
  top:18px;