Angular Material Design - Feste Seitenleiste

Wie erstelle ich eine feste Seitenleiste und einen scrollbaren Inhalt. Wie auf ihrer Website gezeigt.Angular Material Design - Feste Seitenleiste

https://material.angular.io/components/

Ich habe versucht, mit diesen - https://material.angular.io/components/sidenav/examples

Aber es zwingt Sie die Breite und die Höhe einzustellen, die möchte ich nicht tun, wie ich die volle Browser-Breite verwendet werden soll und es ansprechen.

.example-sidenav-fab-container { 
    width: 500px; 
    height: 300px; 
    border: 1px solid rgba(0, 0, 0, 0.5); 
}

Quelle

2017-10-05 KHAN

Was redest du da? es zwingt Sie nicht, die Breite und Höhe einzustellen. Der '.example-sidenav-fab-container' css ist für den CONTAINER des side-nav und content. Die Höhe des Sitenavs füllt immer seinen Container. Die Breite entspricht standardmäßig der Größe des Inhalts. Lesen Sie ihre [Dokumentation] (https://material.angular.io/components/sidenav/overview#sizing-the-sidenav) –

Wenn Sie das Beispiel in Plunker versuchen und die Breite und die Höhe entfernen. Die Funktionalität von Sitenav, die mit Scroll-fähigen Inhalten behoben wird, funktioniert nicht. @JunKang Hier klicken https://plnr.co/edit/4abHHqpiH2xkvFynLTk9?p=preview. Das Seiten-Nav ist nicht festgelegt. Alles was getan wurde, war mehr Inhalt hinzuzufügen und die Breite und Höhe zu entfernen. –

und wenn Sie diese Seite ihrer offiziellen Website betrachten. https://material.angular.io/components/input/overview die Funktionalität der festen Seitenleiste und Inhalt mit beiden seperat scrollable, Dies ist, was ich nach. –

Position fixierte nicht auf der Seite nav wie erwartet, so dass Sie die Breite und Höhe zu festen Betrag für die Seite nav gesetzt muss mit einem scrollbaren Inhalt fixiert werden.

Das Problem ist dokumentiert und soll in der nächsten Version behoben werden. https://github.com/angular/material2/issues/998

Temporary fix:

.mat-sidenav-content, 
.mat-sidenav-container, 
.mat-drawer-content { 
    transform: none !important; 
}

Quelle

2017-10-05 20:25:32

Angular Material Design - Feste Seitenleiste

Antwort

Verwandte Themen