粘性工具栏材料 2 和 sidenav [英] Sticky toolbar material 2 and sidenav
本文介绍了粘性工具栏材料 2 和 sidenav的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
最近开始学习材料2，跑到issue了.我的方法是在 Youtube 网站上做一个 sidenav.左侧有一个汉堡菜单，可以展开/折叠侧边菜单.代码:
<button class="app-icon-button" (click)="start.toggle()"><i class="material-icons app-toolbar-menu">menu</i></md-工具栏><md-sidenav-container><md-sidenav #start class="app-sidebar" mode="side">test</md-sidenav><div class="text">{{ 文本 }} </md-sidenav-container>
现在看起来我实现了布局，但是定位不是固定，如果我滚动toolbar移动并且sidenav内容也移动.
在角度材料文档中，我后来找到了我一直在寻找的示例:
https://stackblitz.com/angular/rmjxrpxdgmx?file=app%2Fsidenav-responsive-example.html
如果链接将被删除，这里是代码:
HTML 文件:
<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">响应式应用</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 offillerNav">{{nav}}</a></mat-nav-list></mat-sidenav><mat-sidenav-content><p *ngFor="let content offillerContent">{{content}}</p></mat-sidenav-content></mat-sidenav-container>TS 文件:
从'@angular/cdk/layout'导入{MediaMatcher}；从@angular/core"导入 {ChangeDetectorRef, Component, OnDestroy};/** @title 响应式sidenav */@成分({选择器:'sidenav-responsive-example'，templateUrl: 'sidenav-responsive-example.html',styleUrls: ['sidenav-responsive-example.css'],})导出类 SidenavResponsiveExample 实现 OnDestroy {mobileQuery: MediaQueryList;fillNav = Array.from({length: 50}, (_, i) => `Nav Item ${i + 1}`);fillContent = Array.from({length: 50}, () =>` Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utLabore et dolore magna aliquaUt enim ad minim veniam, quis nostrud exeritation ullamcoLaboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderitvoluptate velit esse cillum dolore eu fugiat nulla pariatur.例外圣 occaecatcupidatat non proident，sunt in culpa qui officia deserunt mollit anim id est labourum.`);私人 _mobileQueryListener: () =>空白;构造函数(changeDetectorRef:ChangeDetectorRef，媒体:MediaMatcher){this.mobileQuery = media.matchMedia('(max-width: 600px)');this._mobileQueryListener = () =>changeDetectorRef.detectChanges();this.mobileQuery.addListener(this._mobileQueryListener);}ngOnDestroy(): 无效 {this.mobileQuery.removeListener(this._mobileQueryListener);}}CSS 文件:
.example-container {显示:弹性；弹性方向:列；位置:绝对；顶部:0；底部:0；左:0；右:0；}.example-is-mobile .example-toolbar {位置:固定；/* 确保工具栏在滚动时停留在内容的顶部.*/z-索引:2；}h1.example-app-name {左边距:8px；}.example-sidenav-container {/* 当 sidenav 不固定时，拉伸 sidenav 容器以填充可用空间.这个导致 `<mat-sidenav-content>` 作为我们桌面布局的滚动元素.*/弹性:1；}.example-is-mobile .example-sidenav-container {/* 当sidenav固定时，不限制sidenav容器的高度.这允许`<body>` 是我们用于移动布局的滚动元素.*/弹性:1 0 自动；} 解决方案
要使工具栏保持在顶部，请使用 position: fixed 和 z-index: 999.要将 sidenav 保持在可滚动区域之外，需要将其置于 md-sidenav-container
感谢您创建 plnkr 演示，它对快速找到解决方案有很大帮助.这是修改后的演示.
app.component.html:
<button class="app-icon-button" (click)="start.toggle()"><i class="material-icons app-toolbar-menu">menu</i></md-工具栏><md-sidenav-container ><div class="text" style="min-height: 99vh">{{ 文本 }} </md-sidenav-container><md-sidenav #start class="app-sidebar side-nav-style" mode="side" >测试</md-sidenav>
app.component.css:
.fixed-header {顶部:0；位置:固定；z-索引:999；}.文本 {宽度:5px；}.side-nav-style{背景颜色:灰色；宽度:6em；边距顶部:62px;位置:固定}如果这就是您要找的，请告诉我.
Started recently learning material 2 and ran to issue. My approach is to do a sidenav as in Youtube website. There is a hamburger menu on left which expands/collapses side menu.
Code:
<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>
Now seems like I achieved the layout, but the positioning is not fixed, if i scroll toolbar moves and sidenav content also moves.
Edit:
On angular material documentation I later found the example which one I have been looking for:
https://stackblitz.com/angular/rmjxrpxdgmx?file=app%2Fsidenav-responsive-example.html
if link will be removed, here is the code:
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;
}
解决方案
To keep the toolbar on top, use position: fixed and z-index: 999. To keep the sidenav outside of scrollable area, it needs to be taken outside of md-sidenav-container
Thanks for creating a the plnkr demo, it helped a lot to quickly find a solution. Here's the modified 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
}
Let me know if that's what you are looking for.
这篇关于粘性工具栏材料 2 和 sidenav的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
