Отображение изображения внутри материала Progress Spinner - PullRequest
Новая
       50

Отображение изображения внутри материала Progress Spinner

0 голосов
/ 08 мая 2019

Я хочу добавить в свой проект Angular 7 счетчик материального прогресса и изображение человека в нем; с указанием процента голосов, полученных человеком. Пока я не мог этого сделать. Любой способ справиться? Или есть какая-нибудь альтернативная библиотека спиннеров, которую вы знаете для обработки этого варианта использования?

Вот изображение, которое мне нужно:

image inside material progress spinner

Спасибо.

Ответы [ 2 ]

1 голос
/ 09 мая 2019

Вы можете добавить класс CSS к вашему мат-спиннеру:

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>
1 голос
/ 09 мая 2019

Вы можете манипулировать свойством 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>

Демонстрация, показывающая изображение внутри углового материала Spinner

...