Как добиться двухуровневого макета приложения с Angular Material 7?

Question

Я пытаюсь заставить мое приложение выглядеть и вести себя подобно веб-сайту Angular Material: https://material.angular.io/components/categories

Я клонировалhttps://github.com/angular/material.angular.io и запустить его локально, но я изо всех сил пытаюсь найти правильные стили, которые мне нужно применить к каким элементам (и я не хочу просто копировать все из этого проекта, я бы лучше узнал, какчтобы достичь того, чего я хочу, чтобы я мог применить его тогда и к другим проектам).Я проверил элементы и стили с помощью инструментов разработчика Chrome, но мне не удалось воспроизвести все это в моем примере Stackblitz:

Я начал проект на Stackblitz, просто клонировав пример Sidenav и добавивмоя собственная основная панель инструментов:

https://stackblitz.com/edit/material-angular-io-behavior?file=app%2Fsidenav-overview-example.html

Мои основные цели:

• Панель прокрутки содержимого не должна охватывать основную панель инструментов на широких экранах, но разрешена для этогона экранах меньшего размера
• Держите первичные и вторичные панели инструментов «подключенными» при изменении размера (ширина меньше 600 пикселей)
• Для широких экранов:
  • Фиксированный Sidenav (в коробке))
  • Узкая полоса прокрутки для содержимого sidenav

Рекомендуется ли использовать flexbox для макета всего приложения?И возможно ли разместить полосы прокрутки, как предполагалось, с помощью flexbox?

ОБНОВЛЕНИЕ:

окончательная версия:
https://stackblitz.com/edit/material-angular-io-behavior-with-bootstrap

Ресурсы, которые помогли мне добраться туда:

• Введение вCSS
• Бесплатное изучение переменных CSS
• Бесплатное обучение Flexbox
• Обучение CSS Grid длябесплатно
• угловой / flex-layout

Answer 1

Относительно вашего кода на stackblitz, вы можете добавить приведенный ниже код в ваш текущий CSS:

@media (max-width: 600px) {
  .main-mat-toolbar {
    position: static !important;
  }
  .example-container {
    position: static !important;
  }
}

Подробнее о @media запросах в CSS можно прочитать на Использование медиазапросов

Answer 2

Хорошо, я попытался воспроизвести навигационную панель, аналогичную веб-сайту Angular Material, StackBlitz ЗДЕСЬ .

Содержимое страницы отделено от основной панели инструментов и sidenav. Вертикальная прокрутка страницы отличается от бокового меню и не влияет на основную панель инструментов. Содержание страницы осуществляется через.

И все это было сделано с помощью Flex-Layout. Я надеюсь, что это поможет вам.

DEMO: