убрать поле при разворачивании гармошкой Angular материал

Question

Заранее благодарим за помощь. Я пытаюсь удалить поле для аккордеона, как в этом примере stackblitz , но я не знаю, как использовать MatAccordionDisplayMode = 'flat' для удаления поля. Кто-нибудь может мне помочь?

Answer 1

Если я хорошо понимаю, вы хотите, чтобы ваши две панели были склеены вместе без каких-либо полей между ними.

Для этого добавьте это в свой компонент. css

.mat-expansion-panel-spacing{
  margin:0;
}

.mat-expansion-panel:not(:last-child){
  border-bottom-right-radius:0px;
  border-bottom-left-radius:0px;
}

Вот результат

Кроме того, добавляя border-bottom-right/left-radius:0px; для .mat-expansion-panel:not(:last-child), вы удаляете радиус границы, который может будет ужасно если наклеить гармошку панно.

Answer 2

Вы имели в виду поле слева от текстового поля Возраст?

Если да, вы можете просто сделать margin-left равным нулю .

<mat-form-field style="margin-left: 0">
  <mat-label>Age</mat-label>
  <input matInput type="number" min="1">
</mat-form-field>