向Angular Material输入中添加图标

debugcn 发表于 Dev

灵魂飞

我试图通过带有外观轮廓的角形材料输入来实现以下目的。

要在输入的右侧添加带有轮廓的图标，此图像也应位于“材质”选项卡中。到目前为止，我的代码看起来像这样：

<div class="bigInputDiv">
<mat-form-field class="inputSEARCH" appearance="outline">
<mat-label>WWW</mat-label>
<input matInput type="text" formControlName='piradiNomeri'>
<img (click)="moqalaqeSearch('You clicked moqalaqe')" [ngClass]="(moqalaqeTAB.get('piradiNomeri').invalid && moqalaqeTAB.get('piradiNomeri').touched)?'svg error':'svg'" [src]="iconPath + 'addPersonSearch.svg'">
</mat-form-field>
</div>

和风格

.bigInputDiv{
width: 100%;
max-width: 570px;
display: inline-flex;
width: 100%;
max-width: 700px;

.inputSEARCH {
  width: 100%;
  max-width: 565px;
  border-radius: 3px 0px 0px 3px!important;

  .svg {
    width: 48px;
    height: 47px;
    border-radius: 0px 4px 4px 0px;
    background-color: rgba(0,0,0,.12);
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    position:absolute;
    margin-top: -20px;
    margin-left: -39px;
    &.error{
      background-color: red;
    }
    &:hover {
      background-color: black;
    }
  }
  :hover ~ .svg {
    background-color: black;
  }
  :focus ~ .svg {
    background-color: blue;
  }
  .ng-touched.ng-invalid ~ .svg {
    background-color: red;
  }
}
}

我相信问题出在这部分

  .svg {
    width: 48px;
    height: 47px;
    border-radius: 0px 4px 4px 0px;
    background-color: rgba(0,0,0,.12);
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    position:absolute;
    margin-top: -20px;
    margin-left: -39px;
    &.error{
      background-color: red;
    }
    &:hover {
      background-color: black;
    }
  }

为了实现我的目标，我不得不使用很多不可靠的代码（带有边距和大小等），因为我的输入看起来不稳定，我的意思是在不同的屏幕上输入看起来确实很糟糕，垫输入字段。

亚历克斯

<mat-form-field appearance="outline">
    <mat-label>WWW</mat-label>
    <input matInput>
    <button type="button" mat-icon-button matSuffix>
        <mat-icon>search</mat-icon>
    </button>
</mat-form-field>

无需其他CSS，只需在按钮上使用带有matSuffix指令的mat-icon按钮即可。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。