Responsive Website mit eckigem 2 Material - eckiges, reaktionsfähiges Design, eckiges Material

Ich habe Website mit Winkel 1, die hatMenü auf der oberen Seite der Website in horizontaler Form. Dieses Menü wird auf Kleinbildgeräten ausgeblendet und erscheint (erscheint), wenn Sie die Taste drücken. Jetzt möchte ich mein Web mit Material auf eckig 2 umstellen, finde aber nicht das genaue Beispiel, da viele Beispiele viel andere Zwecke haben, als ich brauche. Einige Beispiele zeigen, dass Sie Flex verwenden müssen, um ein ansprechendes Layout zu erhalten. So, jetzt habe ich verwirrt, ob ich Flex oder Material 2 verwenden sollte.

dieses ist schlecht für mich, weil es sich nicht von Breitbild erstreckt. kannst du mir helfen? Ich bin neu in eckig2 und Material.

Antworten:

Ich denke, ich habe etwas getan, was dem entspricht, was Sie erreichen wollen.

@angular/flex-layout gibt Ihnen die Möglichkeit, Bildschirmgrößenänderungen zu abonnieren.

So könnten Sie das Sitenav basierend auf der Bildschirmgröße programmgesteuert öffnen oder schließen.

Hier ist ein Beispiel wo definiere ich, ob das Sideav auf der Seite sein soll oder den Inhalt schweben soll: (weil ich auf dem Handy vorbei will)

this.sidenavMode$ = this.media$
.asObservable()
.map((change: MediaChange) => {
const screenSize = change.mqAlias;
if (screenSize === "xs" || screenSize === "gt-xs" || screenSize === "sm") {
return `over`;
} else {
return `side`;
}
});

Wenn Sie es öffnen / schließen wollen, benutzen Sie einfach die Referenz von sidenav und .close().