Как сдвинуть элементы mat-list-вниз, не используя абсолютную позицию в Angular Material?

Question

Я только начал использовать Angular Material, и я хотел внедрить sidenav, чтобы элементы находились внизу страницы. Сейчас я могу сделать это с помощью CSS.

position: absolute;
left: 0;
bottom: 0; 

Есть ли способ поставить пробелы между предметами? Моя проблема возникает, когда я изменяю размер страницы, нижние элементы перекрываются с элементами выше.

Я включил скриншоты и код ниже. Спасибо.

<mat-sidenav-container class="h-screen w-screen">
<mat-sidenav #sidenav class="shadow border-0" fixedInViewport mode="side" opened>  
    <mat-toolbar>
        <button mat-mini-fab color="warn" (click)="navigation.toggle()">
            <mat-icon inline=true fontSet="fa" fontIcon="fa-fire" aria-label="SLMC Logo"></mat-icon>
        </button>
    </mat-toolbar>
    <mat-nav-list>
        <a mat-list-item>
            <button mat-icon-button>
                <mat-icon inline=true fontSet="fa" fontIcon="fa-users-cog" aria-label="Administrator"></mat-icon>
            </button>
        </a>
        <a mat-list-item>
            <button mat-icon-button>
                <mat-icon inline=true fontSet="fa" fontIcon="fa-tachometer-alt" aria-label="Services"></mat-icon>
            </button>
        </a>
        <a mat-list-item>
            <button mat-icon-button>
                <mat-icon inline=true fontSet="fa" fontIcon="fa-chart-bar" aria-label="Analytics"></mat-icon>
            </button>
        </a>
        <a mat-list-item>
            <button mat-icon-button>
                <mat-icon inline=true fontSet="fa" fontIcon="fa-plus" aria-label="Compose"></mat-icon>
            </button>
        </a>

        <!-- This is where the bottom items reside.-->
        <div class="absolute bottom-0 left-0"> 
            <a mat-list-item>
                <button mat-icon-button>
                    <mat-icon inline=true fontSet="fa" fontIcon="fa-bell" aria-label="Notifications"></mat-icon>
                </button>
            </a>
            <a mat-list-item>
                <button mat-icon-button>
                    <mat-icon inline=true fontSet="fa" fontIcon="fa-user" aria-label="User Account"></mat-icon>
                </button>
            </a>
            <a mat-list-item>
                <button mat-icon-button>
                    <mat-icon inline=true fontSet="fa" fontIcon="fa-cog" aria-label="Settings"></mat-icon>
                </button>
            </a>
        </div>
    </mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
    <mat-sidenav-container>
        <mat-sidenav #navigation class="shadow border-0" fixedInViewport mode="side" opened>
            <app-navigation (toggleNavigation)="navigation.toggle()"></app-navigation>
        </mat-sidenav>
        <mat-sidenav-content class="page-wrap">
            <app-header></app-header>
            <main class="flex-1">
                <router-outlet></router-outlet>
            </main>
            <app-footer></app-footer>
        </mat-sidenav-content>
    </mat-sidenav-container>
</mat-sidenav-content>

Answer 1

Очень интересный и логичный вопрос ... для того, чтобы 3 нижние иконки прилипли к нижней части, требуется position:absolute, что приводит к эффекту перекрытия (это именно тот эффект, который ожидается при абсолютном позиционировании).

Чтобы получить наш идеальный сценарий, мы должны переключить position:relative между position:absolute в зависимости от точки останова, в которой переопределение начинает действовать. Вот где нам нужен JavaScript / TypeScript, так как CSS не может сделать это в одиночку ...

Вы можете проверить полный рабочий стек стека здесь

это соответствующий TS файл:

import {Component} from '@angular/core';
import {HostListener} from '@angular/core';

/** @title Sidenav open & close behavior */
@Component({
  selector: 'sidenav-open-close-example',
  templateUrl: 'sidenav-open-close-example.html',
  styleUrls: ['sidenav-open-close-example.css'],
})
export class SidenavOpenCloseExample {
  events: string[] = [];
  opened: boolean;
  appropriateClass:string = '';

  @HostListener('window:resize', ['$event'])
  getScreenHeight(event?){
    //console.log(window.innerHeight);
    if(window.innerHeight<=412){
      this.appropriateClass = 'bottomRelative';
    }else{
      this.appropriateClass = 'bottomStick';
    }
  }
  constructor(){
    this.getScreenHeight();
  }

  shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
}

обратите внимание на ngClass в соответствующем HTML ниже:

  <mat-nav-list>
        <div class=""> 
          <a mat-list-item>
              <button mat-icon-button>
                  <mat-icon inline=true fontSet="fa" fontIcon="fa-users-cog" aria-label="Administrator"></mat-icon>
              </button>
          </a>
          <a mat-list-item>
              <button mat-icon-button>
                  <mat-icon inline=true fontSet="fa" fontIcon="fa-tachometer-alt" aria-label="Services"></mat-icon>
              </button>
          </a>
          <a mat-list-item>
              <button mat-icon-button>
                  <mat-icon inline=true fontSet="fa" fontIcon="fa-chart-bar" aria-label="Analytics"></mat-icon>
              </button>
          </a>
          <a mat-list-item>
              <button mat-icon-button>
                  <mat-icon inline=true fontSet="fa" fontIcon="fa-plus" aria-label="Compose"></mat-icon>
              </button>
          </a>
        </div>
        <!-- This is where the bottom items reside.-->
          <div [ngClass]='appropriateClass'> 
              <a mat-list-item>
                  <button mat-icon-button>
                      <mat-icon inline=true fontSet="fa" fontIcon="fa-bell" aria-label="Notifications"></mat-icon>
                  </button>
              </a>
              <a mat-list-item>
                  <button mat-icon-button>
                      <mat-icon inline=true fontSet="fa" fontIcon="fa-user" aria-label="User Account"></mat-icon>
                  </button>
              </a>
              <a mat-list-item>
                  <button mat-icon-button>
                      <mat-icon inline=true fontSet="fa" fontIcon="fa-cog" aria-label="Settings"></mat-icon>
                  </button>
              </a>
          </div>

    </mat-nav-list>

релевантно CSS :

button {border:1px solid red}
.bottomStick{/*border-top:1px solid green;border-bottom:1px solid green;*/position:absolute; bottom:0}
.bottomRelative{position:relative;}