Angular：使用material2创建类似navbar的引导程序

Question

我正在浏览bootstrap个文档，了解如何创建类似navbar提供的导航栏的详细信息，但无法找到。任何人都可以使用material2分享创建<mat-toolbar>的文档吗？我的bootstrap示例代码如下。我想创建这个导航栏，在移动布局上自动转换为汉堡包。考虑使用<!-- Navbar --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Me</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">WHO</a></li> <li><a href="#">WHAT</a></li> <li><a href="#">WHERE</a></li> </ul> </div> </div> </nav> ，但这不会在移动布局上呈现为汉堡包。知道如何在Angular Material中获得完整的功能吗？此引导程序模板的演示版本可在此处获取：https://www.w3schools.com/bootstrap/trybs_theme_me_complete.htm。

Bootstrap代码：

(NSAllowsArbitraryLoads, NSAllowsArbitraryLoadsForMedia,
NSAllowsArbitraryLoadsInWebContent)

Answer 1

md-toolbar是您的朋友（来自here）。

<md-toolbar color="primary">
  <button md-button routerLink="/"><md-icon>home</md-icon>{{title}}</button>
  <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <button md-button routerLink="/products">Products</button>
      <button md-button routerLink="/dashboard">Dashboard</button>
  </div>
  <button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
     <md-icon>menu</md-icon>
  </button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
    <button md-menu-item routerLink="/products">Products</button>
    <button md-menu-item routerLink="/dashboard">Dashboard</button>
    <button md-menu-item>Help</button>
</md-menu>

不要忘记在TypeScript代码中导入适当的模块。

如果你想让它粘在上面 - 你可以申请：

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100% !important;
}