Как создать навигационную панель, похожую на сайт Angular Material 2?

Question

Я пытаюсь выучить материал в комбинации с Angular, чтобы позже я смог применить шаблон Material Design к своим приложениям.После просмотра я нашел Material2 для Angular и установил его на свою машину через NPM.Веб-сайт описывает все компоненты, которые у него есть, и я сначала попытался начать с компонентов навигации.Немного покопавшись, я обнаружил, что компоненты не реагируют.После некоторых исследований я обнаружил, что гибкий макет может заставить компоненты работать в сочетании с Material2.Одна вещь, которую я заметил на веб-сайте Material2, заключалась в том, что, когда я сужаю браузер до размеров мобильных устройств, он меняет навигационную панель (с несколькими кнопками) на:

Я пометил три кнопки красной рамкой (Компоненты, CDK, Руководства).Это то, что я хочу воссоздать, но, насколько я знаю, для Material2 нет компонентов navbar.Хотя в навигационной панели есть кнопки Material2:

Мне было интересно, как они это сделали, что мне нужно для этого сделать?Это может быть встроено в Material2 или я должен использовать что-то еще?

Заранее спасибо.

Answer 1

Установите FlexLayout через npm в вашем проекте.

Шаги для установки FlexLayout:

npm install @angular/flex-layout –save

или с пряжей

yarn add @angular/flex-layout

А если вы не хотите использовать FlexLayout, вы можете использовать Bootstrap4 и дизайн материала, см. 'https://mdbootstrap.com/docs/angular/navigation/navbar/'

Answer 2

FlexLayout предлагает Отзывчивый API , который позволяет определять различные свойства макета на основе медиазапроса, например:

<div fxLayout='column' class="zero">

  <div fxFlex="33" [fxFlex.md]="box1Width" class="one" ></div>
  <div fxFlex="33" [fxLayout]="direction" fxLayout.md="row" class="two">

    <div fxFlex="22"    fxFlex.md="10px" fxHide.lg class="two_one"></div>
    <div fxFlex="205px" fxFlex.md="65" class="two_two"></div>
    <div fxFlex="30px"  fxFlex.md="25"   fxShow [fxHide.md]="hideBox" class="two_three"></div>

  </div>
  <div fxFlex class="three"></div>

</div>