【发布时间】：2017-06-12 11:29:24
【问题描述】：
最近开始学习材料 2 并跑到 issue。我的方法是像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:
在 angular material 文档中，我后来找到了我一直在寻找的示例：
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;
}
【问题讨论】：
-
您要解决的具体问题是什么？
-
问题是sidenav和header不粘，我希望在滚动时它们应该被修复......