角材料工具栏.材料行为

Question

我在一个项目中使用角度和角度的材料。因为这个项目的设计是以材料为基础的，所以我是用角度材料来设计它的部件。

我通过<mat-toolbar>创建了一个工具栏，通过mat-tab-group创建了一个选项卡列表。这一页看起来如下：

​

​

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

问题

根据材料设计的说法，当您通常向下滚动列表时：

​

顶部的条形应该滚动，标签应该在顶部。这不是角质材料的标准行为，我想知道这是否有可能重现？

我在stackblitz中重新创建了默认行为。

我的版本

• 角度：7.2.6
• 角材料：7.3.3

Answer 1

我已经通过使用headroom.js库来实现它。我不拥有这个库，但是我已经在几个项目中使用过它，它运行得很好。

安装：

npm install headroom.js --save

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

.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提供一些填充

body {
  padding-top: 56px;
}

然后，我们将Headroom.js附加到mat-toolbar元素。库将在向下滚动时向该元素添加一个特定的css类，并在向上滚动上添加另一个css类。但我们也需要相应地更新mat-tab-header的立场：

<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添加的类，我们还需要以下样式：

.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

Answer 2

使用现有的app.component.ts，将其添加到您的stackblitz中

.mat-tab-group{height: 100%;position: fixed; width:98vw;}
.mat-toolbar.mat-primary { width:98vw; }

将此添加到styles.css中

body { margin:1vw !important; }

您要寻找的效果的关键是.tab制表符组{高度:100%；位置:固定；}.但是你会看到mat组会比看起来有点丑的mat工具栏更短.所以我们把它们设为相同的宽度..。但是现在我们有了另一个问题，这个边距很奇怪，因为身体被设置为8px，所以最后我们用1vw覆盖绝对数8px .所以看起来很漂亮。

希望这能回答你的问题。

Answer 3

我对你的问题有点困惑，但是如果你想把标签头放在顶部，当它向下滚动的时候。

将下面的代码添加到现有的stackblitz CSS文件中。这些肯定有效。

.mat-tab-group .mat-tab-header
{
  position: sticky;
  top:0;
}