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

问：

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

我用一个红色框标记了三个按钮（组件、CDK、指南）。这就是我想重新创建的，但据我所知，Material2 没有导航栏组件。尽管导航栏中有 Material2 按钮：

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

提前致谢。

html css angular angular-material 导航栏

<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>

0赞 Shilpa Soni 2/26/2019 #2

在项目中通过 npm 安装 FlexLayout。

安装 FlexLayout 的步骤：

npm install @angular/flex-layout –save

或用纱线

yarn add @angular/flex-layout

如果你不想使用 FlexLayout，你可以使用 Bootstrap4 和 Material Design，参考 'https://mdbootstrap.com/docs/angular/navigation/navbar/'

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

How to create a navbar similar to the Angular Material 2 website?

评论

评论