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

Question

我正在浏览 material2 文档以了解如何创建导航栏的详细信息，例如 bootstrap 提供的导航栏，但找不到。任何人都可以分享使用material2 创建navbar 的文档吗？我的引导示例代码如下。我想创建这个在移动布局上自动转换为汉堡包的导航栏。想过使用<mat-toolbar>，但这不会在移动布局上呈现为汉堡包。知道如何在 Angular Material 中获得完整的功能吗？此引导模板的演示版可在此处获得：https://www.w3schools.com/bootstrap/trybs_theme_me_complete.htm。

引导代码：

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

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