Угловой материал Sidenav с динамической высотой

Я использую: Angular 9.1.4 с Angular / Material 9.2.4

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

https://material.angular.io/components/sidenav/overview

Я все это настроил, и он работает, за исключением нового запроса, который заключается в том, что если высота динамического компонента составляет, например, 400 пикселей, боковая навигация материала не расширяется вниз, а обрезается по высоте компонента.

Кто-нибудь знает чистый способ сделать это? В противном случае это могло быть и с трюками CSS.

Вот пример stackblitz https://stackblitz.com/angular/kknqvrklpgx?file=src%2Fapp%2Fsidenav-autosize-example.ts


angular angular-material mat-sidenav sidenav
person sdev95    schedule 20.05.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Создайте класс, описывающий ядро ​​боковой навигации, и создайте еще 2 класса, которые описывают 2 состояния навигационной панели. При дополнительном расширении просто измените состояние класса, применяемое на панели навигации, в зависимости от состояния вашего шоу-наполнителя.

  <mat-drawer #drawer class="example" [ngClass]="{'example-cropped': showFiller, 'example-full': !showFiller}"  mode="side">



.example{
 padding: 20;
}
.example-cropped{
  background-color:red;
}

.example-full {
  background-color:green;
  height: 200px;
}
person Robert    schedule 20.05.2020
comment
Это было просто :), вроде работает. Большое спасибо и приятного вам дня! - person sdev95; 20.05.2020
comment
Конечно, всегда делайте это просто. Рад, что смог вам помочь. - person Robert; 20.05.2020