时间戳

首页 > 解决方案 > 如何在 Angular 材料中出现垫子错误之前正确对齐图像？

html - 如何在 Angular 材料中出现垫子错误之前正确对齐图像？

问题描述

我在我的应用程序中使用有角度的材料，但遇到了一个问题。我无法将图像与垫子错误消息对齐。

HTML

<mat-form-field appearance="outline">
  <mat-label>Card Number</mat-label>
  <input type="tel"
         id="cc-number"
         formControlName="cardNumber">
  <mat-error *ngIf="cardError[0]"><img [src]="getAlertImage()">{{cardError[1]}}</mat-error>
</mat-form-field>

对于上述角度材质代码，其呈现如下

我不能使用 matprefix 因为它只与 mat-form-field 相关联。我试图弄清楚如何将图像与文本对齐。有人可以在这方面帮助我吗？

标签： htmlcssangularangular-material

解决方案

就我个人而言，我建议不要将图像用于此类事情，并在元素上的伪元素中使用您可能已经使用的一种字体，如下所示mat-error。

我包含了Material Icons和FontAwesome Icons的示例，但我无法让 Material Icons 字体在代码片段编辑器中工作，但如果您使用 Material Icons 字体，相同的 CSS 将在您的项目上工作。只是为了提供选择。

但是....如果您真的只想坚持使用图像，请添加显示的 css 以mat-error进行 flex 对齐。

mat-error {
  display: flex;
  align-items: center;
}

mat-error:before {
  /* If Font Awesome Icon font */
  font-family: "Font Awesome 5 Free";
  font-weight: 600;
  content: "\f071";
  
  /* If Material Icon font */
  /*
  font-family: "Material Icons";
  content: "warning"
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  */
  
  color: #f00;
  margin-right: .5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">


<mat-error>Hey I'm an error with an icon.</mat-error>

<br><br>

<mat-error>Ooooh, another error without need for an additional image file.</mat-error>

推荐阅读