Изменения макета Angular Mat-List-Option при использовании CDK Drag and Drop - PullRequest
Новая
       1

Изменения макета Angular Mat-List-Option при использовании CDK Drag and Drop

1 голос
/ 08 октября 2019

Я занимаюсь разработкой веб-приложения для Angular 7 и борюсь с Mat-Selection-List, где я позволяю пользователю перетаскивать элементы mat-list-option.

Каждый элемент mat-list-option содержит divкоторый использует Flex Layout для упорядочения своих компонентов следующим образом: 

          <mat-selection-list #taskGroupSelectionList
                              cdkDropList
                              [(ngModel)]="selectedOptions"
                              (ngModelChange)="onNgModelChange($event)"
                              (selectionChange)="onSelectionChange($event)"
                              class="task-group-list"
                              (cdkDropListDropped)="drop($event)">

            <mat-list-option class="task-group-box" checkboxPosition="after" *ngFor="let taskGroup of taskGroups" [value]="taskGroup" cdkDrag>

              <!-- Task Group Item -->
              <div fxLayout="row" *ngIf="taskGroup" fxLayoutAlign="start center" style="width: 100%; height: 100%;">

                <!-- Move Handle -->
                <div fxFlex="32px" style="padding: 0 0 0 4px;">
                  <mat-icon class="summary-channel-handle">menu</mat-icon>
                </div>

                <!-- Index -->
                <div fxFlex="24px;">
                  <p style="margin: 0; text-align: right;">
                    {{taskGroup.orderId}}:
                  </p>
                </div>

                <!-- Title -->
                <div fxFlex="nogrow">
                  <p style="margin: 0; padding: 0 0 0 8px; text-overflow: ellipsis; white-space: nowrap;">
                    {{taskGroup.title}}
                  </p>
                </div>

              </div>

            </mat-list-option>

          </mat-selection-list>

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

.task-group-list {
  width: 100%;
  height: 100%;
  display: block;
  background: white;
}

.task-group-box {
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  border-radius: 4px;
  height: 48px;
  color: rgba(0, 0, 0, 0.87);
  box-sizing: border-box;
  cursor: move;
  background: white;
}

.task-group-box:first-child {
  border: solid 1px #ddd;
}

.task-group-list.cdk-drop-list-dragging .task-group-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.cdk-drag-preview {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.cdk-drag-placeholder {
  box-sizing: border-box;
  border-radius: 4px;
  height: 48px;
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

Функционально я могу перетаскивать элементы спискаоднако при перетаскивании флажок mat-list-option, который я поместил справа checkboxPosition="after", перемещается в верхний левый угол и толкает элементы mat-list-option вниз.

Кто-нибудь знает, почему изменяется макетпри перетаскивании, пожалуйста?

1 Ответ

0 голосов
/ 31 октября 2019

Перетаскиваемый элемент может быть найден как последний дочерний элемент тела в DOM (только при перетаскивании), и это создает довольно много проблем, поскольку вы можете прочитать здесь .

Есливаш элемент mat-list-option не очень сложен, только флажок и немного текста, вы можете решить эту проблему, добавив немного CSS в глобальный файл styles.css, например: 

/* Checkbox and text inline and vertically centered */
.cdk-drag-preview .mat-list-item-content {
    display: flex;
    align-items: center;
}

/* Checkbox margin from text */
.cdk-drag-preview .mat-pseudo-checkbox {
  margin-right: 10px;
}

Вы можете увидеть DEMO в этом стеке, который я создал.

Если содержимое вашего элемента mat-list-option немного сложнее, вам потребуется проверить элемент и добавить необходимые стили. Вы можете сделать это, перетащив параметр mat-list-option и щелкнув правой кнопкой мыши при перетаскивании, осмотреть элемент и найти классы, которые можно использовать для его стилизации.

...