Блог

На веб-сайте Angular Material (https://material.angular.io /) , вот как выглядит панель инструментов при отображении на рабочем столе

Когда он находится на мобильном устройстве, элементы меню Components, CDK, ссылки Guides находятся на второй строке, как это, но github, значок темы и выпадающий список номера версии все еще находятся в первой строке.

Как это делается? Ни в документации, ни в примерах не показано, как это сделать.

На самом деле на веб-сайте есть 2 панели навигации. И кнопка компонентов в дизайне рабочего стола отличается от мобильного дизайна. Они показывают полную панель навигации в режиме рабочего стола, скрывая некоторые компоненты и отображая мобильную вспомогательную панель навигации в мобильном режиме.

Итак, вы можете

• создайте 2 панели навигации — на рабочем столе и на мобильном устройстве
• показать панель навигации рабочего стола со всеми элементами навигации в дизайне рабочего стола
• показать панель навигации мобильного устройства и скрыть некоторые элементы навигации с панели навигации рабочего стола в мобильном дизайне

Вы можете создать функцию, которая проверяет, является ли устройство мобильным или нет, как это

 isMobileDisplay() {
  return (window.screen.width <= 576)
}
  

а в html вы можете использовать *ngIf для отображения шаблонов на основе размера экрана следующим образом

 <div *ngIf="!isMobileDisplay(); else smallDisplay">
</div>


<ng-template #smallDisplay>
</ng-template>
  

Вы можете написать 2 шаблона для обоих типов размеров экрана