Question

我正在写这里，因为我对Angular Material的Mat Toolbar和Mat-sidenav有疑问。我试图让Sidenav进入工具栏，而工具栏始终占据顶部，如下所示：

这是我的代码：

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport="true"
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'side' : 'push'"
      [opened]="(isHandset$ | async)">
      <mat-toolbar class="fixed-header">
        <img class="logooTest" src="data:image/gif;base64,test"/>
      </mat-toolbar>
   		<mat-nav-list>
			  <mat-list-item>
				<a routerLink="/dashboard">Test</a>
        <mat-icon mat-list-icon>home</mat-icon>
        </mat-list-item>
        <mat-list-item>
          <a routerLink="/dashboard">Test</a>
          <mat-icon mat-list-icon>home</mat-icon>
          </mat-list-item>
          <mat-list-item>
          <a routerLink="/test">Test</a>
          <mat-icon mat-list-icon>tune</mat-icon>
          </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>settings</mat-icon>
            </mat-list-item>
            <mat-list-item>
            <a routerLink="/#">Test</a>
            <mat-icon mat-list-icon>layers</mat-icon>
            </mat-list-item>
            <mat-list-item (click)="showSubmenu = !showSubmenu" class="parent">
              <span class="full-width" *ngIf="isExpanded || isShowing">Test dropdown</span>
              <mat-icon mat-list-icon>flash_on</mat-icon>
              <mat-icon class="menu-button" [ngClass]="{'rotated' : showSubmenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
            </mat-list-item>
			<div class="submenu" [ngClass]="{'expanded' : showSubmenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        <h2 matSubheader><mat-icon>account_balance</mat-icon>  Test</h2>
				<mat-list-item (click)="showSubSubMenu = !showSubSubMenu" class="parent">
					<span class="full-width" *ngIf="isExpanded || isShowing">Test</span>
					<mat-icon class="menu-button" [ngClass]="{'rotated' : showSubSubMenu}" *ngIf="isExpanded || isShowing">expand_more</mat-icon>
				</mat-list-item>
				<div class="submenu" [ngClass]="{'expanded' : showSubSubMenu}" *ngIf="isShowing || isExpanded">
          <mat-list-item>
            <a routerLink="/test">Test</a>
            </mat-list-item>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
            <h2 matSubheader><mat-icon>card_travel</mat-icon> Test</h2>
            <mat-list-item>
              <a routerLink="/#">Test</a>
              </mat-list-item>
              <mat-list-item>
                <a routerLink="/#">Test</a>
                </mat-list-item>
        </div>

			</div>
		</mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary" class="mat-elevation-z5">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
       <span class="spacer"></span>
       <div class="navigation">
        <a class="button" href="">
          <mat-icon class="logoutIcon">exit_to_app</mat-icon>
        <div class="logout"><span class="aligned-with-icon">Salir</span></div>
        </a>

      </div>
    </mat-toolbar>

  </mat-sidenav-content>
</mat-sidenav-container>

我正在使用5.6.0版的Angular和Angular材质。我尝试使用CSS并更改了代码结构的顺序，但是最后一个简单地给了我错误和更多的错误；阻止应用程序运行。

Answer 1

您放置在mat-sidenav-content内的所有内容均显示在菜单旁边。工具栏上方 sidenav菜单和内容的基本布局结构是：

<mat-toolbar>...</mat-toolbar>
<mat-sidenav-container>...</mat-sidenav-container>

这是StackBlitz上的一个例子。

Answer 2

.example-mat-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; 
    z-index: 10;
}
.example-sidenav-container {
    position: relative;
    height: 100%;
    display: block;
    transform: inherit;
}

Answer 3

对我来说，只需像G. Tranter一样更改html并将mat-sidenav中的object Extractor { import scala.reflect.ClassTag def extractFail[TNode, TMatch](list: List[TNode]) = list.filter { case _: TMatch => true case _ => false }.map(x => x.asInstanceOf[TMatch]) def extractUsingClassTag[TNode, TMatch](list: List[TNode])(implicit tag1: ClassTag[TNode], tag2: ClassTag[TMatch]) = list.filter { case _: TMatch => true case _ => false }.map(x => x.asInstanceOf[TMatch]) import scala.reflect.runtime.universe._ def recognizeUsingTypeTag[TNode, TMatch](list: List[TNode])(implicit tag1: TypeTag[TNode], tag2: TypeTag[TMatch], tag3: ClassTag[TNode], tag4: ClassTag[TMatch]) = list match { case _ if typeOf[TNode] =:= typeOf[TMatch] => { // // Why this does not get printed for List[String] // println("This should get printed when called for homogeneous") list.asInstanceOf[List[TMatch]] } case _ => extractUsingClassTag[TNode, TMatch](list) } } val homogeneous: List[String] = List("Hello", "World!") val heterogeneous: List[Any] = List("Hello", "World!", 123, false) println("extractFail") println(Extractor.extractFail[Any, String](homogeneous)) println(Extractor.extractFail[Any, String](heterogeneous) + "\n") println("extractUsingClassTag") println(Extractor.extractUsingClassTag[Any, String](homogeneous)) println(Extractor.extractUsingClassTag[Any, String](heterogeneous) + "\n") println("recognizeUsingTypeTag") println(Extractor.recognizeUsingTypeTag[Any, String](homogeneous)) println(Extractor.recognizeUsingTypeTag[Any, String](heterogeneous) + "\n")从extractFail List(Hello, World!) List(Hello, World!, 123, false) extractUsingClassTag List(Hello, World!) List(Hello, World!) recognizeUsingTypeTag List(Hello, World!) List(Hello, World!)设置为fixedInViewport

Answer 4

如果您在项目中使用Angular 6，则可以通过cli运行以下命令，轻松地为Mat-toolbar和Mat-sidenav生成样板：

ng generate @angular/material:materialNav --name myNav

使sidenav组件可见后，应该会看到以下结果

Mat Sidenav component

Answer 5

一种非常简单的方法是在mat-toolbar中将z-index添加到10。这是css。

.mat-toolbar-example{
  position: fixed;
  z-index:10;
}

<mat-toolbar class="mat-toolbar-example"></mat-toolbar>

如何在“ mat-sidenav”角材料5上放置“ mat-toolbar”

5 个答案: