Angular 如何使用角材料2制作响应导航条？

我正在尝试创建一个导航栏，它可以折叠在移动设备和平板电脑等小屏幕上

---

我只能找到

md按钮

，但找不到

md菜单栏

，就像在Angular material中一样

看看github上的

angular2材料
项目。以下是他们迄今为止发布的材质设计组件列表：


另外，我认为
md-sidenav
或
md-toolbar
是您需要的

md侧导航
-

md工具栏
-

注意：该项目仍处于alpha版本，这意味着他们的API可能会有突破性的变化。不建议在生产中使用
 以下是我在
Angular2+Material 2和
angularcli
应用程序中使用flex布局构建响应式
nav bar

（请浏览）

1） 安装flex布局

npm install @angular/flex-layout -save

npm install @angular/flex-layout -save

2） 在您的
app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";

import {FlexLayoutModule} from "@angular/flex-layout";

3） 进口

app.component.html



家
{{title}}
产品
仪表板
菜单
产品
仪表板
从angular material 5.0.2开始，我尝试使用带有抽屉实现的工具栏修改答案，并使用新组件名称

要做的：需要得到所有标题链接的CSS修复。菜单图标应该是透明的



.mat sidenav容器{
背景：rgba（0,0,0,0.08）；
}
.空白生长{
flex:1自动；
}

家
家
备份
备份
菜单
大头球
家
家
备份
备份
您可以使用
mat工具栏
、
mat侧导航
和
flex布局
（
fxFlexFill
，…）构建响应菜单


创建具有材质的响应导航条的最简单方法是使用角度CLI


或者创建一个新项目
ng添加@角度/材质
ng生成@角度/材质：材质导航--名称=我的导航

（如果在运行ng add@angular/material时获得“Collection”@angular/material“无法解析”，请参阅）

然后使用生成的组件

低分辨率响应性折叠菜单：

这最初是在上看到的。
我编辑了user2662006的答案，并在下面进行了一些修复和代码优化。请注意，我的StackOverflow点数目前太低，甚至无法授予我提交评论的权限，更不用说编辑了

(一)

2） 安装flex布局

npm install @angular/flex-layout -save

npm install @angular/flex-layout -save

3） 在您的
app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";

import {FlexLayoutModule} from "@angular/flex-layout";

4） 导入相关材料和flex模块

imports: [
 ...,
 FlexLayoutModule,
 MatToolbarModule,
 MatIconModule,
 MatMenuModule,
 MatButtonModule,
],

app.component.html


家
{{title}}
产品
仪表板
菜单
产品
仪表板

app.component.css

。填充剩余空间{
/*这将使用flexbox填充剩余空间。
每个工具栏行都使用flexbox行布局*/
flex:1自动；
}

注:


调整页面大小以测试响应性布局
看一看
我的演示文稿介绍了角材料的一些模式。StackBlitz示例的链接在演讲者笔记中

带有溢出菜单的响应按钮栏：
可将其放置在TopNav内或下方。

动态嵌套TopNav菜单：
请注意，此菜单不是完全可访问的。需要更多的工作来充分支持良好的a11y体验。

动态嵌套侧导航菜单：
如果使用转换模式将TopNav切换到移动设备上的SideNav，这将显示如何构建动态SideNav菜单。
以下是我最喜欢的在Angular中创建响应导航栏的方法。如果使用Angular 6，请确保使用版本6.1+

Stackblitz的工作示例：

小屏幕上的示例：

大屏幕上的示例：

下面是具体的操作步骤：

1） 安装必要的软件包。输入您的终端：

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2） 在app.module.ts中导入必要的模块

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';

请记住将这些模块添加到下面的导入数组中

3） 将材质图标链接添加到index.html

链接必须位于任何角度内容之前

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

5） 在app.component.HTML中添加工具栏HTML代码


菜单
站点名称
关于我们
价格
起始页
提供
接触
关于我们
价格
起始页
提供
接触
精彩内容

6） 在app.component.css中设置工具栏样式

.companyName{
字体大小：150%；
}
div{
溢出：继承；
}
a{
文字装饰：无；
字体大小：110%；
空白：正常；
}
钮扣{
字体大小：110%；
最小宽度：最小内容；
}
.示例图标{
填充：0 14px；
}
.垫片示例{
flex:1自动；
}
.mat sidenav内容{
字体大小：200%；
文本对齐：居中；
}
效果很好。感谢大家对flex布局的关注。没听说过。很酷的解决方案。请记住FlexLayoutModule.forRoot（）已被弃用。我们现在只需使用FlexLayoutModuleWant来提出一个小建议：当折叠的三角形材质更改了大多数组件的名称时，可能适合在显示的菜单中使用
md菜单项
。此片段在Angle material 5.0中不起作用。2@Ruben好问题。。我也这么想，Angular推出的第一件事就是简单的响应菜单，对吗？谢谢！