Question

最近开始学习材料2并跑去发行。我的方法是在Youtube网站中进行sidenav。左边有一个汉堡包菜单，可以扩展/折叠侧边菜单。代码：

<md-toolbar class="fixed-header">
     <button class="app-icon-button" (click)="start.toggle()">
          <i class="material-icons app-toolbar-menu">menu</i>
     </button>
</md-toolbar>

<md-sidenav-container>
    <md-sidenav #start class="app-sidebar" mode="side">test</md-sidenav>

    <div class="text">
      {{ text }}
    </div>
</md-sidenav-container>

现在看来我已经实现了布局，但定位不是fixed，如果我滚动toolbar移动并且sidenav内容也会移动。

Edit:

在角度材料文档中，我后来找到了一个我一直在寻找的例子：

https://stackblitz.com/angular/rmjxrpxdgmx?file=app%2Fsidenav-responsive-example.html

如果链接将被删除，请输入以下代码：

HTML File:

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
  <mat-toolbar color="primary" class="example-toolbar">
    <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
    <h1 class="example-app-name">Responsive App</h1>
  </mat-toolbar>

  <mat-sidenav-container class="example-sidenav-container"
                         [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
                 [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <p *ngFor="let content of fillerContent">{{content}}</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

TS File:

import {MediaMatcher} from '@angular/cdk/layout';
import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';

/** @title Responsive sidenav */
@Component({
  selector: 'sidenav-responsive-example',
  templateUrl: 'sidenav-responsive-example.html',
  styleUrls: ['sidenav-responsive-example.css'],
})
export class SidenavResponsiveExample implements OnDestroy {
  mobileQuery: MediaQueryList;

  fillerNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);

  fillerContent = Array.from({length: 50}, () =>
      `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
       labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
       laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
       voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
       cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`);

  private _mobileQueryListener: () => void;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
}

CSS File:

.example-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.example-is-mobile .example-toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

h1.example-app-name {
  margin-left: 8px;
}

.example-sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
     causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.example-is-mobile .example-sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
     `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}

Answer 1

要将工具栏放在顶部，请使用position: fixed和z-index: 999。要将sidenav保留在可滚动区域之外，需要在md-sidenav-container之外进行

感谢您创建了一个plnkr演示，它有助于快速找到解决方案。这是修改后的demo。

app.component.html:

<md-toolbar class="fixed-header">
      <button class="app-icon-button" (click)="start.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
      </button>
</md-toolbar>

<md-sidenav-container >
    <div class="text" style="min-height: 99vh">
      {{ text }}
    </div>
</md-sidenav-container>

<md-sidenav #start class="app-sidebar side-nav-style" mode="side" >
        test
</md-sidenav>

app.component.css:

.fixed-header {
  top: 0;
  position: fixed;
  z-index:999;

}

.text { 
  width: 5px;
}

.side-nav-style{
  background-color: grey;
  width: 6em;
  margin-top:62px;
  position: fixed
}

如果您正在寻找，请告诉我。

Answer 2

@Nehal示例仍有问题，<md-sidenav-container>位于更新的plnkr中此处显示的顶部工具栏下：

https://plnkr.co/edit/vXB6aUoJCkx8tAJkelbF?p=preview

如果您按照官方Angular文档进行操作，请参阅下面链接中的“Fixed sidenav”示例，您应该使用粘性工具栏获得所需的外观。

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

完整的stackblitz示例：

https://stackblitz.com/angular/qdpqnrlnpom?file=app%2Fsidenav-fixed-example.ts

Answer 3

我遇到了同样的问题。我用一些内联CSS修复它。现在我有：

固定工具栏标题
固定，可滚动的SideNav
可滚动内容

以下是代码：

<div style="position:absolute; top:0; bottom:0; left:0; right: 0; display: flex; flex-direction: column;">        
    <mat-toolbar color="primary">
        <button mat-icon-button (click)="sidenav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        TOOLBAR
    </mat-toolbar>

    <mat-sidenav-container style="flex: 1;">
        <mat-sidenav mode="side" opened="true" #sidenav>
            SIDENAV
        </mat-sidenav>
        <mat-sidenav-content>
            CONTENT
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

也许有人可以使用一些angular / flex-layout指令优化我的不良CSS：）

粘滞的工具栏材料2和sidenav

3 个答案: