收缩垫工具栏 [英] Shrinkable mat-toolbar

问题描述

我使用此处提供的示例来设置响应式导航栏

I used the example provided here to set up a responsive navbar

https://theinfogrid.com/tech/开发人员/angular/response-navbar-angular-flex-layout/

和我的代码看起来非常相似

and my code looks pretty similar

<div style="height: 85vh;">

  <mat-toolbar color="primary" mat-scroll-shrink>
    <span>{{title}}</span>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Home</a>
      <a href="#" mat-button>About</a>
      <a href="#" mat-button>Services</a>
      <a href="#" mat-button>Portfolio</a>
      <a href="#" mat-button>Start</a>
      <a href="#" mat-button>FAQ</a>
      <a href="#" mat-button>Blog</a>
      <a href="#" mat-button>Contact</a>
    </div>

    <div fxShow="true" fxHide.gt-sm="true">
      <a href="#" (click)="sidenav.open()">Show Side Menu</a>
    </div>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a (click)="sidenav.close()" href="#" mat-button>Close</a>
        <a href="#" mat-button>Home</a>
        <a href="#" mat-button>About</a>
        <a href="#" mat-button>Services</a>
        <a href="#" mat-button>Portfolio</a>
        <a href="#" mat-button>Start</a>
        <a href="#" mat-button>FAQ</a>
        <a href="#" mat-button>Blog</a>
        <a href="#" mat-button>Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>

      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
      <p>Demoing some content to make this thing scroll</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

我想发生的事情是在向下滚动时使工具栏缩小，这在许多站点中很常见，例如:

What I would like to have happen is have the mat-toolbar shrink as I scroll down, which is common in a lot of sites, such as this one:

https://www.havealook.com.au/

我不会发布其余的角度5代码，只需按照示例进行重新创建-很快.

I won't post the rest of the angular 5 code, just follow the example to re-create - its pretty quick.

我已经在这里查看了材料网站

I've looked at the materials website here

https://material.angular.io/components/toolbar/overview

但是关于如何添加它的解释不多，我对这些东西还很陌生.有人知道我该如何自定义滚动条来缩小工具栏?

but there's not much explanation on how to add to it, and I'm pretty new to this stuff. Does anyone know how I might customise this to make the toolbar shrink, based on scrolling?

推荐答案

2018年11月更新

ScrollDispatchModule已被Angular CDK v7弃用.请使用ScrollingModule.

Update Nov 2018

The ScrollDispatchModule was deprecated with Angular CDK v7. Use the ScrollingModule instead.

我已经创建了 Stackblitz ，其工具栏在向下滚动时会缩小.

I've created a Stackblitz with a toolbar that shrinks when scrolling down.

1. 将ScrollDispatchModule导入模块中.

1. Import the ScrollDispatchModule in your module.

import {ScrollDispatchModule} from '@angular/cdk/scrolling';

1. 用指令cdkScrollable标记与滚动事件相关的容器，这里是mat-sidenav-content.

1. Mark the containers of which the scroll events are relevant with the directive cdkScrollable, here it is mat-sidenav-content.

 <mat-sidenav-content fxFlexFill cdkScrollable>

1. 做出反应以滚动组件ngOnInit中的事件，获得scrollTop位置并设置一个大于某个阈值的标志:

1. React to scroll events in the ngOnInit of your component, get the scrollTop position and set a flag if it is larger than a certain threshold:

private readonly SHRINK_TOP_SCROLL_POSITION = 50;
shrinkToolbar = false;

constructor(private scrollDispatcher: ScrollDispatcher,
            private ngZone: NgZone) { }

ngOnInit() {
  this.scrollDispatcher.scrolled()
    .pipe(
      map((event: CdkScrollable) => event.getElementRef().nativeElement.scrollTop)
    )
    .subscribe(scrollTop => this.ngZone.run(() => this.shrinkToolbar = scrollTop > this.SHRINK_TOP_SCROLL_POSITION ? true : false));
}

您需要使用ngZone运行此程序，因为默认情况下ScrollDispatcher的scrolled()事件在Angular之外运行.没有它，ChangeDetection将无法运行，您的模板也将不会更新.

You need to run this with ngZone because scrolled() events of the ScrollDispatcher are run outside of Angular by default. Without it, the ChangeDetection won't run and your templates won't be updated.

1. 当容器向下滚动时，添加一个收缩css类

<mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}">

1. 为缩小的布局定义css类.

1. Define the css class for the shrinked layout.

.shrink-toolbar {
  height: 32px;
}

在官方文档中找到有关滚动服务的更多信息.

Find more information about the scroll service in the official docs.

这篇关于收缩垫工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！