如何在不使用 Angular Material 中的絕對位置的情況下將 mat-list-items 推到底部？

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:absolute之間切換position:relative 。 這就是我們需要 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));
}

請注意以下相關HTML中的ngClass ：

  <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;}

Answer 2

我使用 flex-layout 並設法在項目之間添加一個空元素。 沒有添加 CSS。 容器需要有 100% 的高度，在我的情況下，我必須添加 FxFill，您可以按照自己喜歡的方式管理。

// 側導航組件

<div fxLayout="column" fxFill>
  <mat-toolbar color="primary" class="mat-elevation-z5">
    <h2 >Menu</h2>
  </mat-toolbar>

  <mat-list  fxLayout="column" fxFlex>
    <mat-list-item fxLayoutAlign="center center" >
      <h4 routerLink="/">Home</h4>
    </mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item fxLayoutAlign="center center" >
      <h4 routerLink="/admin">Admin</h4>
    </mat-list-item>
    <mat-divider></mat-divider>

    <span fxFlex></span>

    <mat-divider></mat-divider>
    <mat-list-item fxLayoutAlign="center center" >
      <h4 (click)="logout()">Logout</h4>
    </mat-list-item>
    <mat-divider></mat-divider>
  </mat-list>
</div>