Angular Material 2 – Wie man die Mat-Toolbar und die Mat-Tabs oben fixiert

Für mein Webseite Ich versuche, die oben auf dem Bildschirm zu sperren und dann direkt darunter möchte ich die sperren.

Das Problem, auf das ich stoße, ist diese Position: Fixed in CSS sperrt es überhaupt nicht, und wenn ich tatsächlich zur Site gehe und das Element inspiziere, füge ich ein < div > ein

Wie soll ich diese beiden Elemente oben sperren, wie soll ich dieses automatisch erstellte Div umgehen? Ich hatte eine ähnliche Frage wie diese, aber ich habe sie mit der festen und absoluten Positionierung gelöst, was in dieser neueren Version von Angular / Angular Material nicht zutrifft.

Quellcode für meine Website

Meinten Sie eine klebrige Symbolleiste?

Fügen Sie einfach eine Klasse zur Symbolleiste hinzu und machen Sie sie klebrig (mit der position Attribut gesetzt auf sticky):

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

Notiz: Es gibt keine Unterstützung für position: sticky auf IE 11. Weitere Informationen zur Browserunterstützung für position: stickysehen Sie sich das an kann ich benutzen Seite.

Sie können dies wahrscheinlich erreichen, indem Sie den Stil mit ::ng-deep festlegen:

::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

Sogar ich stand bei meinem Projekt vor dem gleichen Problem. Es ist sehr schwierig, die Symbolleiste zu fixieren, wenn sie drinnen deklariert ist <mat-sidenav-container>.

Der Grund, warum es schwierig ist, ist, weil beides <mat-sidenav-container> und <mat-toolbar> Verwendet transform: translate3d(0,0,0).

Der beste Weg wäre also, zu entfernen <mat-toolbar> aus <mat-sidenav-container> und schreiben Sie ein externes CSS für die Symbolleiste.

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

Diese Lösung hat bei mir funktioniert.

Hier ist die Lösung Jungs.

1) Gehen Sie zur Toolbar-Komponente und fügen Sie diese zu ihrer CSS/SCSS-Datei hinzu:

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

2) Gehen Sie nun zu Ihrer Root-App, die sowohl die obere Leiste als auch das Router-Outlet (standardmäßig app.component) enthält, und geben Sie Folgendes in ihre CSS-/SCSS-Datei ein:

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

Hat ein paar Stunden gedauert, aber endlich die Lösung gefunden.

Das funktioniert bei mir:

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