角度材质2 - 如何将垫子工具栏和垫子锁定到顶部

Question

对于我的网站,我试图将<Mat-Toolbar>锁定到屏幕顶部,然后直接在我想要锁定<Mat-Tabs>.

我遇到的问题是这个位置:固定在CSS中根本没有锁定它,当我实际去网站并检查元素时它放入了一个<div>

我怎么能把这两个元素锁定到顶部,我该如何绕过这个自动创建的Div？我有一个类似于此的先前问题,但我使用固定和绝对定位解决了这个问题,这不适用于这个较新版本的Angular/Angular Material.

我的网站的源代码

Answer 1

你的意思是粘性工具栏吗？

只需在工具栏中添加一个类并使其变为粘性:

.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 */
}

注意:position: sticky IE 11上不支持.有关浏览器支持的更多信息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;
}

DEMO

Answer 3

这是解决方案男孩。

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 4

甚至我的项目也面临同样的问题。当工具栏在内部声明时，要固定它是非常困难的<mat-sidenav-container>。

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

因此，最好的方法是<mat-toolbar>从<mat-sidenav-container>工具栏中删除并编写一个外部CSS。

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

这个解决方案对我有用。