Как сделать так, чтобы иконка аватара перекрывалась? Любые ссылки, откуда я могу прочитать об этом - PullRequest
Новая
       29

Как сделать так, чтобы иконка аватара перекрывалась? Любые ссылки, откуда я могу прочитать об этом

0 голосов
/ 30 сентября 2019

введите описание изображения здесь введите описание изображения здесь

как это мне нужно сделать.

Я пробовал вот так ..

Я попробовал это с помощью mat-avatar, поместив все аватары в div, чтобы они стали компактными и накладывались друг на друга.

1 Ответ

0 голосов
/ 01 ноября 2019

Чтобы решить эту проблему, я не смог найти ни одного углового плагина, но с помощью CSS я смог сделать то же самое. Я обнаружил, что ресурс переполняется только в стеке. И из Angular я ограничил изображение Icon, чтобы показывать только три аватара, а остальные будут как (+ x больше), как (+10 больше) или (+ 11 больше) в зависимости от общего количества выбранных данных. Это будет выглядетьчто-то вроде этого ..

CSS

   .avatar-icons {
        display: inline-block;
        transform: scale(1, 1);
        padding-left: 35px;
        /* padding-bottom: 10px; */
    }

    .avatar-i {
        margin-left: -25px;
        position: relative;
        display: inline-block;
        border: 1px solid #fff;
        border-radius: 50%;
        overflow: hidden;
        width: 2.4em;
        height: 2.4em;
    }

    .avatar-i img {
        width: 50px;
        height: 50px;
        transform: scale(1, 1);
    } 

.avatar-count {
    padding-top: 16px;
    padding-left: 4px;
    font-size: 13px;
}

Angular Code

<div *ngIf="componentName=='dashboard'">
        <div matTooltip="People who attempted quiz" class="avatar-icons" *ngIf="quiz.arrayOfImageUrls !=null">
          <div *ngIf="quiz.arrayOfImageUrls.length >3 ; else elseBlock" class="avatar-icon">
            <span class="avatar-i" *ngFor="let avatarUrl of quiz.firstThreeAvatarIcon">
              <img src="{{avatarUrl}}">
            </span>
            <span class="avatar-count" *ngIf="quiz.arrayOfImageUrls.length > 3">
              + {{quiz.arrayOfImageUrls.length - 3 }} more
            </span>
          </div>
          <ng-template #elseBlock>
            <span class="avatar-i" *ngFor="let avatarUrl of quiz.arrayOfImageUrls">
              <img src="{{avatarUrl}}">
            </span>
          </ng-template>
        </div>
      </div>

Ссылка на источник, откуда я получил помощь: - Наложение / наложение нескольких встроенных изображений

...