角度材质工具栏-材质行为 [英] Angular material toolbar - Material behavior

问题描述

我正在为项目使用Angular和Angular材质.由于该项目的设计基于材质，因此我将Angular材质用作其组件.

I am using Angular and Angular Material for a project. Since this project's design is based on Material, I am using Angular material for it's components.

我已经通过<mat-toolbar>创建了一个工具栏，并通过mat-tab-group创建了一个选项卡列表.该页面如下所示:

I have created a toolbar via <mat-toolbar> and a tab list via mat-tab-group. And the page looks as follows:

这没关系.第一个选项卡还包含一个列表，这是问题开始的地方.

This is all ok. The first tab also contains a list And this is where the problem starts..

通常，根据材料设计向下滚动列表:

When you normally scroll down the list, according to material design:

顶部栏应滚动离开，并且选项卡应在顶部.这不是Angular Material的标准行为，我想知道是否可以重新创建?

the top bar should scroll away and the tabs should be on top. This is not the standard behavior of Angular Material and I am wondering if this is possible to recreate?

我已经在 stackblitz 中重新创建了默认行为.

I've recreated the default behavior in a stackblitz.

• 角度:7.2.6
• 角材料:7.3.3

• Angular: 7.2.6
• Angular Material: 7.3.3

推荐答案

我已经使用

I've implemented it by using the headroom.js library. I do not own this library, but I've used it in several projects and it worked perfectly.

安装:

npm install headroom.js --save

首先，我们需要将.mat-toolbar和.mat-tab-header元素设置为position: fixed. .mat-toolbar将固定在文档的顶部(top: 0)，.mat-tab-header将固定在工具栏的下方(top: 56px-因为56px是工具栏的默认高度):

Firstly, what we need is to set up the .mat-toolbar and .mat-tab-header elements to position: fixed. .mat-toolbar will be fixed to the top of the document (top: 0), and .mat-tab-header will be fixed below the toolbar (top: 56px - because 56px is the default height of the toolbar):

.mat-toolbar {
  position: fixed;
  top: 0;
  z-index: 9;
}

.mat-tab-group {
  padding-top: 48px;
}

.mat-tab-group ::ng-deep .mat-tab-header {
  position: fixed;
  top: 56px;
  width: 100%;
  z-index: 10;
}

上面的css代码是在组件级别提供的，这就是为什么我需要使用::ng-deep选择器.我们还需要为body提供一些填充:

The css code above is provided at component level, and that's why I need to use ::ng-deep selector. We also need to give some padding for body:

body {
  padding-top: 56px;
}

然后，我们将Headroom.js附加到mat-toolbar元素.该库将在向下滚动时向此元素添加特定的css类，而在向上滚动时将添加另一个css类.但是我们还需要相应地更新mat-tab-header的位置:

Then, we'll attach Headroom.js to the mat-toolbar element. The library will add a specific css class to this element on scroll down, and another css class on scroll up. But we also need to update the position of the mat-tab-header accordingly:

<mat-toolbar color="primary" role="toolbar" aria-label="toolbar" #toolbar>
  ...
</mat-toolbar>

<mat-tab-group backgroundColor="primary" color="accent" mat-stretch-tabs #tabgroup> 
  ...
</mat-tab-group>

@ViewChild('toolbar') toolbar: MatToolbar;
@ViewChild('tabgroup') tabgroup: MatTabGroup;

ngAfterViewInit(): void {
  const toolbarEl = this.toolbar._elementRef.nativeElement;
  const tabHeaderEl = this.tabgroup._elementRef.nativeElement;

  const headroomOptions = {
  onPin : () => {
    tabHeaderEl.classList.remove('header-unpinned');
    tabHeaderEl.classList.add('header-pinned');
  },
  onUnpin : () => {
    tabHeaderEl.classList.remove('header-pinned');
    tabHeaderEl.classList.add('header-unpinned')
  }
}; 

  const headroom = new Headroom(toolbarEl, headroomOptions);
  headroom.init();
}

对于Headroom.js添加的类，我们还需要以下样式:

We also need the following styles for the classes that are added by Headroom.js:

.mat-toolbar.headroom {
  will-change: transform;
  transition: transform 200ms linear;
}

.mat-toolbar.headroom--pinned {
  transform: translateY(0%);
}

.mat-toolbar.headroom--unpinned {
  transform: translateY(-100%);
}

.mat-tab-group ::ng-deep .mat-tab-header {
  will-change: transform;
  transition: transform 200ms linear;
}

.mat-tab-group.headroom--pinned ::ng-deep .mat-tab-header {
  transform: translateY(0%);
}

.mat-tab-group.headroom--unpinned ::ng-deep .mat-tab-header {
  transform: translateY(-56px);
}

Stackblitz演示:

https://stackblitz.com/edit/angular-gqhwcr

这篇关于角度材质工具栏-材质行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！