Sticky工具栏材料2和sidenav

问题描述 投票：6回答：3

[最近开始学习材料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;
}
angular angular-material2
3个回答
8
投票

要使工具栏位于顶部，请使用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
}

让我知道您是否正在寻找它。

2
投票

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

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

如果您遵循Angular官方文档，请参见下面的链接中的“ Fixed sidenav”示例，则应使用粘性工具栏获得所需的外观。

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

完整的堆栈闪电示例：

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

-1
投票

我有同样的问题。我用一些内联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：）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.