Angular Material 2 – Wie man die Mat-Toolbar und die Mat-Tabs oben fixiert
Lesezeit: 3 Minuten
Daniel Türcich
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.
Sie können nicht an dieser automatisch erstellten vorbeigehen div. Sie können versuchen, den Inhalt Ihrer App zu verschachteln mat-sidenav-contentaber ich bin mir nicht sicher, ob es eine erstellen wird div auch.
– Edric
7. November 2017 um 7:45 Uhr
Edric
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.
position: sticky funktioniert nicht mehr mit angle 11.
– Pavindu
7. Juli 2021 um 11:22 Uhr
funktioniert auf Winkel 12
– Ismaeel Scherif
30. November 2021 um 12:15 Uhr
funktioniert bei mir in ng14
– C. Alonso C. Ortega
22. Juli um 17:46 Uhr
Weg
Sie können dies wahrscheinlich erreichen, indem Sie den Stil mit ::ng-deep festlegen:
@Vega Ich vermute, er will eine klebrige Symbolleiste.
– Edric
7. November 2017 um 7:46 Uhr
Das ist ausgezeichnet! Damit die Laschen jedoch in der regulären Position sitzen, musste ich einstellen margin-top zu 64px Anstatt von 55px.
– David Poxon
6. Januar 2018 um 3:38 Uhr
Vielen Dank! Ich hatte Probleme, a zu reparieren mat-toolbar in einem mat-sidenav, Ihre Demo rockt!. Es ist erwähnenswert ::ng-deep .mat-toolbar { ... } sollte in die CSS-Datei der Komponente geschrieben werden und nicht in die allgemeine styles.css eines.
– Sieben
10. September 2018 um 10:55 Uhr
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.
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.
Sie können nicht an dieser automatisch erstellten vorbeigehen
div
. Sie können versuchen, den Inhalt Ihrer App zu verschachtelnmat-sidenav-content
aber ich bin mir nicht sicher, ob es eine erstellen wirddiv
auch.– Edric
7. November 2017 um 7:45 Uhr