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

时间:2019-02-25 11:05:41

标签: html css angular angular-material navbar

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

enter image description here

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

enter image description here

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

谢谢。

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

在项目中通过npm安装FlexLayout。

安装FlexLayout的步骤:

npm install @angular/flex-layout –save

或与纱线

yarn add @angular/flex-layout

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