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

问题描述

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

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

和我的代码看起来很相似

<mat-toolbar color="primary" mat-scroll-shrink><span>{{title}}</span><span class="example-spacer"></span><div fxShow="true" fxHide.lt-md="true"><!-- 以下菜单项将在 SM 和 XS 屏幕尺寸上隐藏--><a href="#" mat-button>首页</a><a href="#" mat-button>关于</a><a href="#" mat-button>服务</a><a href="#" mat-button>作品集</a><a href="#" mat-button>开始</a><a href="#" mat-button>常见问题</a><a href="#" mat-button>博客</a><a href="#" mat-button>联系方式</a>
<div fxShow="true" fxHide.gt-sm="true"><a href="#" (click)="sidenav.open()">显示侧边菜单</a>

</mat-toolbar><mat-sidenav-container fxFlexFill class="example-container"><mat-sidenav #sidenav fxLayout="column"><div fxLayout="列"><a (click)="sidenav.close()" href="#" mat-button>关闭</a><a href="#" mat-button>首页</a><a href="#" mat-button>关于</a><a href="#" mat-button>服务</a><a href="#" mat-button>作品集</a><a href="#" mat-button>开始</a><a href="#" mat-button>常见问题</a><a href="#" mat-button>博客</a><a href="#" mat-button>联系方式</a>

</mat-sidenav><mat-sidenav-content fxFlexFill><p>演示一些内容让这个东西滚动

我希望在向下滚动时让垫子工具栏缩小，这在很多网站中都很常见，例如这个:

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

我不会发布 angular 5 代码的其余部分，只需按照示例重新创建 - 非常快.

我在这里查看了材料网站

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

但是关于如何添加它没有太多解释，而且我对这些东西很陌生.有谁知道我可以如何自定义它以根据滚动缩小工具栏?

解决方案

2018 年 11 月更新

ScrollDispatchModule 在 Angular CDK v7 中被弃用.改用 ScrollingModule.

<小时>

我创建了一个 Stackblitz 带有向下滚动时会缩小的工具栏.

主要步骤

使用 CdkScrollDispatcher 服务响应滚动事件

1. 在您的模块中导入 ScrollDispatchModule.

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

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

3. 响应组件的 ngOnInit 中的滚动事件，获取 scrollTop 位置并在大于某个阈值时设置标志:

private readonly SHRINK_TOP_SCROLL_POSITION = 50;收缩工具栏 = 假；构造函数(私有 scrollDispatcher: ScrollDispatcher,私人 ngZone: NgZone) { }ngOnInit() {this.scrollDispatcher.scrolled().管道(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 将不会运行，您的模板也不会更新.

在滚动时更改工具栏布局

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

2. 为 shrinked 布局定义 css 类.

.shrink-toolbar {高度:32px；}

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

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

https://theinfogrid.com/tech/developers/angular/responsive-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/

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?

解决方案

Update Nov 2018

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

---

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

Main Steps

Use the CdkScrollDispatcher service to react to scroll events

1. Import the ScrollDispatchModule in your module.

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

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

3. 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));
}

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.

Change the toolbar layout on scroll

1. Add a shrink css class, when the container is scrolled down

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

2. Define the css class for the shrinked layout.

.shrink-toolbar {
  height: 32px;
}

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

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