Адаптивная навигация по материалам Angular

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

Использование 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 для создания навигационного компонента с помощью этой команды:

ng generate @angular/material:nav navigation

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

Подробнее о схемах Angular Material читайте здесь

Теперь, если мы добавим элемент app-navigation в наш файл app.component.html

и зайдите в наш браузер, мы должны увидеть это:

Отображение компонента навигации, который выглядит так:

Скрытие Sidenav

Теперь давайте сделаем его более отзывчивым, скрыв боковую навигацию на больших экранах. Для этого мы должны добавить этот ng-class к элементу mat-sidenav:

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

И добавьте для свойства display значение hidden class в none в файле navigation.component.css.

.hidden : { 
           display : none;
}

Теперь, если бы мы вернулись в наш браузер, мы бы обнаружили, что боковая навигация скрыта на средних экранах и отображается только при нажатии на значок гамбургера на маленьком экране. Но давайте посмотрим, как это произошло.

isHandset $

Это точка останова (менее 600 пикселей), обеспечиваемая угловой компоновкой материала. Есть другие точки останова, такие как tablet, 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