如何创建类似于Angular Material 2网站的导航栏？

Question

我正在尝试与Angular结合使用Material，以便以后可以将Material Design模式应用于我的应用程序。浏览后，我发现Material2 for Angular并通过NPM将其安装在我的计算机上。该网站描述了它拥有的所有组件，我首先尝试从导航组件开始。经过一番摆弄之后，我发现这些组件没有响应。经过一些研究，我发现弹性布局可以使组件与Material2结合使用。我在Material2网站上注意到的一件事是，当我将浏览器缩小到移动设备的大小时，它将把导航栏（带有一些按钮）更改为：

我用一个红色框（组件，CDK，指南）标记了三个按钮。这是我要重新创建的内容，但据我所知，没有Material2的导航栏组件。导航栏上总共有Material2按钮：

我想知道他们是如何做到的，要做到这一点需要什么？可以在Material2中构建它还是应该使用其他东西？

谢谢。

Answer 1

FlexLayout提供了Responsive 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>

Answer 2

在项目中通过npm安装FlexLayout。

安装FlexLayout的步骤：

npm install @angular/flex-layout –save

或与纱线

yarn add @angular/flex-layout

如果不想使用FlexLayout，则可以使用Bootstrap4和材料设计，请参考“ https://mdbootstrap.com/docs/angular/navigation/navbar/”