如何使用材质在同一行中制作图标和占位符? [英] How can i make icon and placeholder in same line using material?

问题描述

我要使图标和搜索字段位于同一行.

I want to make icon and search field should be in same line .

<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代码..

Above i added my html code ..

演示

我写了很多CSS，但是我听不懂 帮助我前进..

i wrote lot of css but i could't get this help me out to move forward..

推荐答案

不确定其他答案为何如此复杂.只需将matPrefix或matSuffix与mat-button一起使用(已针对Angular材质v7测试).

Not sure why other answers are so complicated. Just use matPrefix or matSuffix with mat-button (tested for Angular-material v7).

直接从文档中获取:

<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>

这篇关于如何使用材质在同一行中制作图标和占位符?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！