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

Posted 2023-03-05

【中文标题】Angular Material 2 - 如何将 mat-toolbar 和 mat-tabs 锁定到顶部

【英文标题】：Angular Material 2 - How to lock mat-toolbar and mat-tabs to the top

【发布时间】：2018-04-19 02:21:24

【问题描述】：

对于我的Website，我正在尝试将 锁定到屏幕顶部，然后在我想要锁定 的正下方。

我遇到的问题是那个位置：fixed in CSS 根本没有锁定它，当我真正去网站检查元素时，它会放入一个

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

Source Code for my Website

【问题讨论】：

您无法超越自动创建的div。您可以尝试将应用的内容嵌套在mat-sidenav-content 中，但我不确定它是否也会创建div。

【参考方案1】：

你可以通过设置样式来实现它::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

【讨论】：

@Vega 我猜他想要一个粘性工具栏。

这太棒了！但是，为了使标签位于常规位置，我必须将 margin-top 设置为 64px 而不是 55px。

谢谢！我无法在mat-sidenav 中修复mat-toolbar，你的演示太棒了！值得注意的是::ng-deep .mat-toolbar ... 应该写在组件的CSS文件中，而不是一般的styles.css一个。

【参考方案2】：

您是说粘性工具栏吗？

只需将一个类添加到工具栏并使其具有粘性（使用设置为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 页面。

【讨论】：

position: sticky 不再适用于 angular 11。

适用于角度 12

【参考方案3】：

这对我有用：

app.component.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>

style.css

    .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;
    

【参考方案4】：

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

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

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

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

这个解决方案对我有用。

【参考方案5】：

这是解决方案男孩。

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;

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

【讨论】：

在第 2 部分）中，您应该直接转到工具栏下方的元素，而不是其父元素。另外，请使用 rem 而不是 px。 link否则不错的答案。