Angular Material 2 - 如何将 mat-toolbar 和 mat-tabs 锁定到顶部

Question

对于我的网站，我试图将 < Mat-Toolbar > 锁定到屏幕顶部，然后直接在其下方锁定 < Mat-Tabs > 。

我遇到的问题是 position: fixed in CSS 根本没有锁定它，当我真正去网站并检查元素时，它会放入一个 < div >

我应该如何将这两个元素锁定到顶部，我应该如何绕过这个自动创建的 Div？ 我之前有一个类似的问题，但我使用固定和绝对定位解决了这个问题，这不适用于这个较新版本的 Angular/Angular Material。

我的网站的源代码

Answer 1

您是说粘性工具栏吗？

只需向工具栏添加一个类并使其具有粘性（使用设置为sticky的position属性）：

.app-toolbar {
    position: sticky;
    position: -webkit-sticky; /* For macOS/iOS Safari */
    top: 0; /* Sets the sticky toolbar to be on top */
    z-index: 1000; /* Ensure that your app's content doesn't overlap the toolbar */
}

---

注意： IE 11 不支持position: sticky 。有关浏览器支持position: sticky更多信息，请查看此caniuse页面。

Answer 2

您可以通过使用 ::ng-deep 设置样式来实现它：

::ng-deep .mat-toolbar{
  z-index: 998;
  position: fixed
}
::ng-deep .mat-tab-group{
  margin-top:55px !important;
}

::ng-deep .mat-tab-header{
      z-index: 999;
      width:100vw;
      position: fixed  !important;
      background-color: red !important;
}
::ng-deep .mat-tab-body-wrapper{
    position: relative !important;
    margin-top:55px;
}

演示

Answer 3

即使我的项目也面临同样的问题。 当工具栏在<mat-sidenav-container>声明时，很难修复它。

之所以困难，是因为<mat-sidenav-container>和<mat-toolbar>使用了transform: translate3d(0,0,0) 。

所以最好的方法是，从<mat-sidenav-container>删除<mat-toolbar> <mat-sidenav-container>并为工具栏编写一个外部 css。

mat-toolbar {
    height: 64px;
    position: fixed;
    z-index: 100;
    width: 100%  !important;
}

这个解决方案对我有用。

Answer 4

这是解决方案的男孩。

1) 转到工具栏组件并将其添加到其 css/scss 文件中：

:host {
  // position: sticky;
  // position: -webkit-sticky; /* For macOS/iOS Safari */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

2) 现在转到包含顶部栏和路由器出口（默认为 app.component）的根应用程序，并在其 css/scss 文件中键入以下内容：

:host {
    position: absolute;
    top: 64px;  // here you must specify the height of your topbar
    bottom: 0;
    left: 0;
    right: 0;
}

花了我几个小时，但终于找到了解决方案。

Answer 5

这对我有用：

应用程序组件.html

    <div class="app-container">
        <mat-sidenav-container>

            <mat-sidenav mode="over">
                <div>item 1</div>
                <div>item 2</div>
                <div>item 3</div>
            </mat-sidenav>

            <mat-toolbar>
                <i class="material-icons hamburger-menu">menu</i>
                <span>item A</span>
                <span>item B</span>
            </mat-toolbar>

            <div class="app-body">
                <router-outlet></router-outlet>
            </div>

        </mat-sidenav-container>
    <div>

样式文件

    .app-body {
        overflow: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 64px;
    }

    .app-container {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }