responsywna strona internetowa wykorzystująca materiał kątowy 2 - kątowy, responsywny, kątowy

Mam stronę wykonaną przy użyciu kątowej 1, która mamenu na górze strony w formie poziomej. To menu zwija się na urządzeniach z małym ekranem i pojawia się (wyskakuje) po naciśnięciu przycisku. Teraz chcę zamienić moją sieć na kątową 2 z materiałem, ale nie znajduję dokładnego przykładu, ponieważ wiele próbek ma znacznie inny cel niż potrzebuję. Co więcej, niektóre przykłady pokazują, że aby uzyskać responsywny układ, musisz użyć flex. Więc teraz pomyliłem się, czy powinienem użyć flexu czy materiału 2.

ten jest dla mnie zły, ponieważ nie rozszerza ekranu. możesz mi pomóc? Jestem nowy w kącie 2 i materiale.

Odpowiedzi:

Myślę, że zrobiłem coś bliskiego temu, co próbujesz osiągnąć.

@angular/flex-layout umożliwia subskrybowanie zmian wielkości ekranu.

Możesz więc programowo otworzyć lub zamknąć program sidenav na podstawie rozmiaru ekranu.

Oto jest przykład gdzie definiuję, że sidenav powinien znajdować się na boku lub unosić zawartość: (ponieważ chcę na telefonie komórkowym)

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

Jeśli chcesz go otworzyć / zamknąć, po prostu użyj odnośnika sidenav i .close().