Question

我通过使用角形材质生成了一个sidenav，但是在sidenav上没有高程。我尝试使用mat-elevation-zx添加它，但没有成功。我还在CSS上尝试了boxshadow，但仍未成功。高程周围是否有任何工作，因为工具栏中的工作正常，但在固定的sidenav上却没有。

html：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav class="mat-elevation-z6" #drawer class="sidenav" fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar class="mat-elevation-z5" color="primary"><span class="logo">Logo</span></mat-toolbar>
    <mat-divider></mat-divider>
    <mat-nav-list class="nav-list">
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="" routerLinkActive="active-list-item" [routerLinkActiveOptions]="{ exact: true }">
          <mat-icon class="nav-icon">dashboard</mat-icon>
          Dashboard
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/question" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">contact_support</mat-icon>
          Questions
        </a>
      </div>
      <div class="nav-item">
        <div></div>
        <a class="nav-link" mat-list-item routerLink="/category" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">category</mat-icon>
          Categories
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/discipline" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">book</mat-icon>
          Discipline
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/template" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">format_align_justify</mat-icon>
          Template
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/level" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">equalizer</mat-icon>
          Level
        </a>
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="mat-elevation-z5" color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <div fxFlex></div>
      <div>
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>account_circle</mat-icon>
          <mat-icon>keyboard_arrow_down</mat-icon>
        </button>
        <mat-menu #menu="matMenu" yPosition="below">
          <p class="user-info" mat-menu-item disableRipple><span class="full-name">name surname</span></p>
          <p class="user-info" mat-menu-item disableRipple><span class="email">email</span></p>
          <mat-divider></mat-divider>
          <button class="menu-item" mat-menu-item>Profile</button>
          <mat-divider></mat-divider>
          <button mat-menu-item>Sign out</button>
        </mat-menu>
      </div>
    </mat-toolbar>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

css：

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 250px;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 4;
}

.logo {
  margin-left: 4%; 
  font-size: 30px;
}

.nav-item {
  width: 230px;
}

.nav-icon {
  margin-right: 10%; 
}

.nav-link {
  width: 200px;
  margin-top: 3%;
  margin-left: 3%;
}

.user-info:hover {
  background-color: transparent;
  cursor: text;
}

.user-info {
  line-height: 100%;
  height: 90%;
}

.full-name {
  font-weight: bold;
}

.email {
  font-size: 90%;
}

Answer 1

您的mat-sidenav dom元素具有两个类属性，按如下方式重构代码：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav mat-elevation-z6" fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar class="mat-elevation-z5" color="primary"><span class="logo">Logo</span></mat-toolbar>
    <mat-divider></mat-divider>
    <mat-nav-list class="nav-list">
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="" routerLinkActive="active-list-item" [routerLinkActiveOptions]="{ exact: true }">
          <mat-icon class="nav-icon">dashboard</mat-icon>
          Dashboard
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/question" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">contact_support</mat-icon>
          Questions
        </a>
      </div>
      <div class="nav-item">
        <div></div>
        <a class="nav-link" mat-list-item routerLink="/category" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">category</mat-icon>
          Categories
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/discipline" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">book</mat-icon>
          Discipline
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/template" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">format_align_justify</mat-icon>
          Template
        </a>
      </div>
      <div class="nav-item">
        <a class="nav-link" mat-list-item routerLink="/level" routerLinkActive="active-list-item">
          <mat-icon class="nav-icon">equalizer</mat-icon>
          Level
        </a>
      </div>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar class="mat-elevation-z5" color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <div fxFlex></div>
      <div>
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>account_circle</mat-icon>
          <mat-icon>keyboard_arrow_down</mat-icon>
        </button>
        <mat-menu #menu="matMenu" yPosition="below">
          <p class="user-info" mat-menu-item disableRipple><span class="full-name">name surname</span></p>
          <p class="user-info" mat-menu-item disableRipple><span class="email">email</span></p>
          <mat-divider></mat-divider>
          <button class="menu-item" mat-menu-item>Profile</button>
          <mat-divider></mat-divider>
          <button mat-menu-item>Sign out</button>
        </mat-menu>
      </div>
    </mat-toolbar>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

然后使用“ sidenav” css代码删除sidenav上的边框，如下所示：

.sidenav {
  width: 250px;
  border: none;
}

我缺少由角形材料生成的sidenav上的高程。有添加吗？

1 个答案: