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

Question

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

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

这没关系。第一个标签还包含一个列表，这是问题开始的地方。

---

问题

正常情况下，根据material design（向下滚动至#scrolling部分）向下滚动列表，顶部栏将滚动而标签应位于顶部。这不是Angular Material的标准行为，我想知道是否可以创建？

我已经在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

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

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

将此添加到您的 styles.css ：

body { margin:1vw !important; }

您要寻找的效果的关键是`.mat-tab-group {高度：100％；位置：已固定；} ...但是您会看到 mat-group < / strong>会比看起来很丑的 mat-toolbar 短。因此我们将它们设置为相同的宽度...但现在又遇到了另一个问题，即边距很奇怪是因为主体设置为8px的边距，所以最终我们用1vw覆盖了8px的绝对数字...因此看起来很漂亮。

希望这可以回答您的问题。

Answer 3

对于您的问题，我有些困惑，但是如果您想在向下滚动时将标签页标题放在顶部，那么

将以下代码添加到您现有的stackblitz CSS文件中。这些肯定可以工作。

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