Гибкая строка с проблемой расстояния между панелями расширения - PullRequest
Новая
       4

Гибкая строка с проблемой расстояния между панелями расширения

1 голос
/ 05 ноября 2019

У меня проблема с расстоянием между панелями расширения внутри гибкого ряда

У меня есть несколько Mat-Expansion-Panel внутри ngFor, внутри есть несколько элементов, и каждая панель имеет различную длину элемента.

Теперь, когда я раскрываю одну панель, та, которая находится рядом с ней, также будет расширяться до той же высоты, но без отображения элемента (поскольку он на самом деле не развернут)

flex with panels

Я создал стек стека: https://stackblitz.com/edit/mat-expansion-panel-x8qz9z

Поскольку мой эксперт является отдельным компонентом и используется многократно с разным расположением, действительно ли мне нужно сделать 2 отдельных столбца внутри *ngForсделать эту работу?

Edit1: я пробовал height:max-content на the mat-expansion-panel, но проблема в том, что панель 3 должна двигаться вверх под панелью 1.

Та же проблема существует для align-items:baseline; в контейнере

enter image description here

С уважением

1 Ответ

2 голосов
/ 05 ноября 2019

Это можно сделать только с 2 отдельными столбцами. Вы можете разбить ваш массив на два столбца, или сколько вам может понадобиться, например: 

columns = [
  this.panels.slice(0, Math.ceil(this.panels.length / 2)),
  this.panels.slice(Math.ceil(this.panels.length / 2))
];

Вы можете использовать этот массив в своем шаблоне: 

<div class="panel-container">
  <div class="panel-column" *ngFor="let columnPanels of columns">
    <mat-expansion-panel class="panel" *ngFor="let panel of columnPanels">
      <mat-expansion-panel-header>
        {{panel.name}}
      </mat-expansion-panel-header>

      <div *ngFor="let item of panel.items">{{item}}</div>
    </mat-expansion-panel>
  </div>
</div>

и обновить свой css:

.panel-container {
  display:flex;
  flex-direction:row;
}

.panel-column {
  flex: 1;
}

.panel {
  margin: 10px;
  height: max-content;
}

стек

...