Мат-расширительная панель без кузова

Question

Угловой 6 ... У меня есть аккордеонная группировка нескольких панелей расширения матов.

Панели представляют пункты меню, которые при раскрытии имеют список навигации подменю.

Некоторые пункты меню (например, некоторые панели расширения матов) не имеют подменю.Они могут быть выбраны сами по себе, щелкнув по заголовку, и ничего не должны открываться.

Я исключил выписывание любого содержимого панели (поэтому не имею элементов nav-list после заголовка) с использованием * ngIf,но все же, тело вставляется и, щелкая заголовок, открывает пустое тело примерно на 10 пикселей.

Как сделать так, чтобы заголовок панели можно было щелкать, но без отображения содержимого тела?

Спасибо

Answer 1

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

Вы не можете эффективно отключить расширение, кроме как путем отключения расширенияпанель, но это сделает заголовок отключенным.Если вы заставляете содержимое заголовка не выглядеть отключенным, тогда вы можете использовать:

<mat-expansion-panel disabled>

В противном случае, вы можете попробовать эти хаки:

Подделка внешнего вида панели расширения

<div class="mat-expansion-panel" style="height: 48px; border-radius: 0;">
  <div class="mat-expansion-panel-header" style="height: 48px;">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </div>
</div>

Чтобы панель расширения выглядела как не развернутая (или расширяемая):

<mat-expansion-panel class="no-body">
  <mat-expansion-panel-header class="no-body">
    <mat-panel-title>
      Title
    </mat-panel-title>
    <mat-panel-description>
      Description
    </mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-panel>

.no-body {
  max-height: 48px;
}
.no-body.mat-expansion-panel-header >>> .mat-expansion-indicator {
  display: none;
}