我正在尝试与Angular结合使用Material,以便以后可以将Material Design模式应用于我的应用程序。浏览后,我发现Material2 for Angular并通过NPM将其安装在我的计算机上。该网站描述了它拥有的所有组件,我首先尝试从导航组件开始。经过一番摆弄之后,我发现这些组件没有响应。经过一些研究,我发现弹性布局可以使组件与Material2结合使用。我在Material2网站上注意到的一件事是,当我将浏览器缩小到移动设备的大小时,它将把导航栏(带有一些按钮)更改为:
我用一个红色框(组件,CDK,指南)标记了三个按钮。这是我要重新创建的内容,但据我所知,没有Material2的导航栏组件。导航栏上总共有Material2按钮:
我想知道他们是如何做到的,要做到这一点需要什么?可以在Material2中构建它还是应该使用其他东西?
谢谢。
答案 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/”