web-dev-qa-db-ja.com

収縮可能なマットツールバー

ここで提供されている例を使用して、レスポンシブナビゲーションバーを設定しました

https://theinfogrid.com/tech/developers/angular/responsive-navbar-angular-flex-layout/

私のコードはかなり似ています

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

私がしたいのは、下にスクロールするとマットツールバーが縮小することです。これは、次のような多くのサイトで一般的です。

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

残りのangular 5コードは投稿しません。例に従って、再作成してください。非常に高速です。

こちらの資料サイトを見てきました

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

しかし、それに追加する方法についてはあまり説明がなく、私はこのようなものにかなり慣れていません。スクロールに基づいてツールバーを縮小するためにこれをカスタマイズする方法を知っている人はいますか？

javascriptangulartypescriptangular-materialangular-flex-layout
7
Michael Coxon

2018年11月の更新

ScrollDispatchModuleはAngular CDKv7で非推奨になりました。代わりにScrollingModuleを使用してください。

下にスクロールすると縮小するツールバーを備えた Stackblitz を作成しました。

主な手順

CdkScrollDispatcherサービスを使用して、スクロールイベントに対応します

  1. モジュールにScrollDispatchModuleをインポートします。
_import {ScrollDispatchModule} from '@angular/cdk/scrolling';
_
  1. スクロールイベントが関連するコンテナをディレクティブcdkScrollableでマークします。ここでは、_mat-sidenav-content_です。
_ <mat-sidenav-content fxFlexFill cdkScrollable>
_
  1. コンポーネントのngOnInitでイベントをスクロールし、scrollTopの位置を取得し、特定のしきい値より大きい場合はフラグを設定します。
_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のscrolled()イベントはデフォルトでAngular）の外部で実行されるため、これをScrollDispatcherで実行する必要があります。 ChangeDetectionは実行されず、テンプレートは更新されません。

スクロール時にツールバーのレイアウトを変更する

  1. コンテナが下にスクロールされたときに、shrinkcssクラスを追加します
_<mat-toolbar color="primary" [ngClass]="{'shrink-toolbar': shrinkToolbar}">
_
  1. のcssクラスを定義します 縮んだ レイアウト。
_.shrink-toolbar {
  height: 32px;
}
_

スクロールサービスの詳細については、 公式ドキュメント をご覧ください。

12
Kim Kern