Как я могу автоматически сказать Angular, чтобы получить Стили для Drag & Drop от родителя - PullRequest
Новая
       11

Как я могу автоматически сказать Angular, чтобы получить Стили для Drag & Drop от родителя

0 голосов
/ 10 января 2019

Я пытаюсь использовать функцию Angulars Drag & Drop CDK. У меня только одна проблема, это касается материального оформления списков. Я попытался создать список, который выглядит примерно так:

https://imgur.com/download/JZw7bcb

Но как только я захочу перетащить его, я получу:

https://imgur.com/download/wTCY7xy

Мне не удалось найти информацию о том, как скопировать все стили 1: 1.

Если мне нужно стилизовать его вручную, каков наилучший способ получить все стили, которые мне нужны? Ручное копирование стилей, которые браузер сообщает мне об элементе, не помогает. Это очень много времени, и я также не добился успеха.

Код для списка выглядит примерно так: 

<mat-list cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
<h3 mat-subheader>List</h3>
<div class="list-content">
    <mat-list-item *ngFor="let favourite of favourites" cdkDrag class="example-box">
      <mat-icon mat-list-icon><img style="width: 28px; border-radius: 14px;" src="https://example.com/img/profileicon/{{favourite.profileIconId}}.png"></mat-icon>
      <h4 mat-line>{{favourite.name}}</h4>
      <p mat-line>{{favourite.informationText}}</p>
      <button mat-icon-button>
          <mat-icon style="color: red;">fiber_manual_record</mat-icon>
      </button>
      <button mat-icon-button routerLink="/profile/{{favourite.name}}">
          <mat-icon>send</mat-icon>
      </button>
    </mat-list-item>
    <h4 class="center" mat-line *ngIf="favourites === null || favourites.length <= 0">Add favorites to see them here.</h4>
</div>

В этом списке вы видите своих любимых людей, которые вам нравятся, и вы сможете сортировать их с помощью функции перетаскивания.

Я хочу, чтобы стандартные стили угловых материалов использовались вместо общих стилей по умолчанию.

...