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

问题描述

我想让图标和搜索字段在同一行.

<mat-form-field><mat-icon>搜索</mat-icon><input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter"></mat-form-field>

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

演示

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

解决方案

不知道为什么其他答案如此复杂.只需将 matPrefix 或 matSuffix 与 mat-button 一起使用(针对 Angular-material v7 进行了测试).

直接来自文档:

<input matInput type="text" placeholder="搜索"><button mat-button matPrefix mat-icon-button><mat-icon>搜索</mat-icon></mat-form-field><mat-form-field><input matInput type="text" placeholder="Clearable input"><button mat-button *ngIf="value" matSuffix mat-icon-button><mat-icon>关闭</mat-icon></mat-form-field>

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>

Above i added my html code ..

demo

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

解决方案

Not sure why other answers are so complicated. Just use matPrefix or matSuffix with mat-button (tested for 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>

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