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

Question

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

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

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

---

问题

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

顶部栏应该滚动，标签应该在顶部。 这不是 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 （ 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{height: 100%;position: fixed;} ...但您会看到mat-group比mat-看起来有点难看的工具栏...所以我们将它们设置为相同的宽度...但现在我们遇到了另一个问题，边距很奇怪，那是因为主体设置为 8px 的边距，所以最后我们覆盖了绝对数字 8px 和 1vw ......所以它看起来很漂亮。

希望这能回答你的问题。

Answer 3

我对你的问题有点困惑，但如果你想在向下滚动时将标签页头贴在顶部。

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

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