在 Material 进度微调器中显示图像

Question

我想在我的 Angular 7 项目中添加一个 material 进度条和其中的人物图像；表示该人获得的投票百分比。现在，我做不到。有什么办法处理吗？或者您是否知道处理此用例的其他微调器库？

这是我需要的图像表示：

谢谢。

Answer 1

您可以操纵 css clip-path: circle(45% at 50% 49%); 属性来调整微调器周围的图像。

//------component.css
.basic-container {
  display: inline-block;
  position: relative;
}

img {
  max-width: 100%;
  position: absolute;
  max-height: 100%;
  top: 0;
  height: 100%;
  width: 100%;
  clip-path: circle(45% at 50% 49%);
}

//------component.html
<div class="basic-container">
    <mat-spinner strokeWidth="2" [diameter]="100"></mat-spinner>
    <img src="https://www.gstatic.com/webp/gallery/2.jpg">
</div>

Demo showing image inside Angular Material Spinner

Answer 2

您可以将 css class 添加到您的 mat-spinner:

CSS:

avatar {
    background-image: url(https://cdn.iconscout.com/icon/free/png-256/avatar-372-456324.png);
    animation: none;
    background-size: 100px;
    width: 100px;
    height: 100px
}

HTML:

<mat-spinner class="avatar"></mat-spinner>

如果想每次都显示不同的头像，可以加style

<mat-spinner class="avatar" style="background-image: url({{myImageUrl}}></mat-spinner>

在 Material 进度微调器中显示图像

Showing an image inside Material Progress Spinner

progress

spinner

material-design

angular-material

angular7