我想使图标和搜索字段应该在同一行。
<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代码..
我写了很多css,但我无法帮助我前进...
不确定为什么其他答案如此复杂。只需使用matPrefix
或matSuffix
与mat-button
(测试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>
试试这个,
<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中。
希望这能解决问题。
应用此css,它将排成一行
.mat-form-field-label {
top: 12px;
}
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label{
top:18px;
}