角度材料工具栏 - 材料行为

问题描述

我正在为一个项目使用 Angular 和 Angular Material.由于该项目的设计基于 Material，因此我将 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-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

推荐答案

我已经通过使用 headroom.js 库.我不拥有这个库，但我已经在几个项目中使用过它并且运行良好.

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('headroom--unpinned');
      tabHeaderEl.classList.add('headroom--pinned');
    },
    onUnpin : () => {
      tabHeaderEl.classList.remove('headroom--pinned');
      tabHeaderEl.classList.add('headroom--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

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