粘性工具栏材料 2 和侧导航

最近开始学习材料 2 并运行到问题。我的方法是像Youtube网站一样做一个侧边导航。左侧有一个汉堡菜单，可以展开/折叠侧边菜单。法典：

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

要将工具栏保持在顶部，请使用 position: fixed 和 z-index: 999 。为了使sidenav保持在可滚动区域之外，需要将其置于md-sidenav-container之外

感谢您创建 plnkr 演示，它对快速找到解决方案有很大帮助。这是修改后的演示。

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
}

让我知道这是否是你要找的。

@Nehal该

示例仍然存在一个问题，即<md-sidenav-container>位于更新的 plnkr 中显示的顶部工具栏下：

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

如果您遵循官方的 Angular 文档，请参阅下面链接中的"固定侧导航"示例，您应该使用粘性工具栏获得所需的外观。

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

全栈闪电战示例：

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

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

固定工具栏标题
固定、可滚动的侧导航
可滚动内容

代码如下：

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

也许有人可以使用一些角度/弹性布局指令来优化我糟糕的 CSS :)

相关内容

最新更新

热门标签：