Angular Material Responsive Navigation

В тази статия ще създадем отзивчиво навигационно меню с помощта на Angular Material. За разлика от vuetify с Vuejs, който идва с готова адаптивна навигационна тема с лента за навигация и компонент sidenav, Angular Material идва с много малки градивни елементи като sidenav и лента с инструменти които комбинирани заедно могат да направят отзивчиво навигационно меню.

Използване на Angular-cli

Опаковката на Angular Material npm се доставя с редица схеми. Тези схеми правят създаването на градивни блокове за приложение Angular Material малко по-лесно.

След като инсталирате пакета Angular Material чрез тази команда npm:

npm install --save @angular/material @angular/cdk @angular/animations

или чрез командатаAngular-cli:

ng add @angular/material

Вече можете да използвате схеми на Angular Material, за да създадете компонент за навигация с тази команда:

ng generate @angular/material:nav navigation

което създава нов компонент, наречен навигация с 4 файла:

Прочетете повече за схемите на Angular Material тук

Сега, ако добавим елемента app-navigation към нашия файл app.component.html

и отидете в нашия браузър, трябва да видим това:

Показване на компонента за навигация, който изглежда така:

Скриване на Sidenav

Сега нека го направим по-отзивчив, като скрием страничната навигация на големи екрани. За да направим това, бихме добавили този ng-class към елемента mat-sidenav:

[ngClass]="{'hidden': !(isHandset$ | async)}"

И добавете задаване на свойството за показване наскритклас на няма във файла navigation.component.css

.hidden : { 
           display : none;
}

Сега, ако се върнахме в нашия браузър, щяхме да открием, че sidenav е скрит на средни екрани и се показва само при щракване върху иконата на Хамбургер на малък екран. НО ДА ВИДИМ КАК СЕ СЛУЧИ ТОВА.

isHandset$

Това еточка на прекъсване (по-малко от 600 пиксела), предоставена отъглово оформление на материала . Има повече точки на прекъсване като таблет, tabletPortrait, handsetPortrait и други ..

Можете да проверите всички точки на прекъсване на материала тук.

Беше дефинирано по подразбиране като наблюдаемо в navigation.component.ts

Така че нашият sidenav get е скрит, когато isHandset$ върне false (т.е. когато екранът не е по-малък от 600px).

Добавяне на съдържание

Сега нека добавим съдържание към нашия елемент на съдържание sidenav чрез добавяне

<ng-content></ng-content>

в нашия елемент ‹mat-sidenav-content› като този:

Сега, когато добавим елемента app-navigation към нашия app.component.html, можем да напишем съдържание вътре в него и то ще се покаже в съдържанието на sidenav:

Angular Material Responsive Navigation