Angular material 工具栏 - Material 行为

Question

我正在为一个项目使用 Angular 和 Angular Material。由于这个项目的设计是基于 Material，我使用 Angular material 作为它的组件。

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

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

问题

当您正常向下滚动列表时，根据 material design：

顶部栏应该滚开，标签应该在顶部。这不是 Angular Material 的标准行为，我想知道是否可以重新创建？

我在 stackblitz.

中重新创建了默认行为

我的版本

Angular: 7.2.6
Angular Material: 7.3.3

Answer 1

使用您现有的 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-toolbar 短，看起来有点丑...所以我们将它们设置为相同的宽度...但现在我们得到了另一个问题，边距很奇怪，那是因为body设置了8px的边距，所以最后我们用1vw覆盖了绝对数8px ...所以看起来很漂亮。

希望这能回答您的问题。

Answer 2

我对你的问题有点困惑，但如果你想在向下滚动时将选项卡 header 粘在顶部。

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

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

Answer 3

我已经使用 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 class，在向上滚动时添加另一个 css class。但是我们还需要相应地更新 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 添加的 classes 的以下样式：

.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

Angular material 工具栏 - Material 行为

Angular material toolbar - Material behavior

angular

sass

angular-material

material-design

angular-material2

问题

我的版本