如何用Angular Material实现类似Bootstrap的响应式导航栏？

要实现类似Bootstrap的响应式导航栏（小屏幕显示汉堡菜单），你需要结合Angular Material的核心组件与响应式布局技术，具体方案如下：

核心依赖组件 #

• MatToolbar：作为导航栏的基础容器，对应Bootstrap的navbar
• MatButton + MatIcon：制作汉堡菜单触发按钮，仅在小屏幕显示
• MatSidenav + MatSidenavContainer：侧边栏容器，用来展开/收起导航链接，替代Bootstrap的下拉菜单
• 响应式布局工具：可选Angular Flex Layout（官方推荐的响应式布局库）或原生CSS媒体查询，控制不同屏幕尺寸下元素的显示状态

实现步骤与示例代码 #

1. 导入必要模块 #

在你的Angular模块（比如AppModule）中导入所需的Material模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
// 若使用Flex Layout，需先安装并导入
import { FlexLayoutModule } from '@angular/flex-layout';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatIconModule,
    MatSidenavModule,
    MatListModule,
    FlexLayoutModule
  ],
  // ...其他配置
})
export class AppModule { }

2. 组件模板实现 #

以下是结合Flex Layout的响应式导航栏模板，小屏幕自动显示汉堡按钮，点击展开侧边栏：

<mat-sidenav-container class="sidenav-container">
  <!-- 侧边导航栏 -->
  <mat-sidenav #sidenav mode="over" position="end" class="sidenav">
    <mat-nav-list>
      <a mat-list-item routerLink="/home">首页</a>
      <a mat-list-item routerLink="/about">关于我们</a>
      <a mat-list-item routerLink="/services">服务</a>
      <a mat-list-item routerLink="/contact">联系我们</a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- 顶部导航栏 -->
  <mat-toolbar color="primary" class="toolbar">
    <span class="brand">我的品牌</span>
    
    <!-- 大屏幕显示的导航链接（大于600px显示） -->
    <div class="nav-links" fxShow fxHide.xs>
      <a mat-button routerLink="/home">首页</a>
      <a mat-button routerLink="/about">关于我们</a>
      <a mat-button routerLink="/services">服务</a>
      <a mat-button routerLink="/contact">联系我们</a>
    </div>

    <!-- 小屏幕显示的汉堡按钮（小于600px显示） -->
    <button mat-icon-button (click)="sidenav.toggle()" fxHide fxShow.xs aria-label="打开导航菜单">
      <mat-icon>menu</mat-icon>
    </button>
  </mat-toolbar>

  <!-- 页面主内容区域 -->
  <main class="content">
    <router-outlet></router-outlet>
  </main>
</mat-sidenav-container>

3. 样式补充 #

添加基础CSS确保布局正常：

.sidenav-container {
  height: 100vh;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  font-size: 1.2rem;
  font-weight: 600;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

.sidenav {
  width: 240px;
}

.content {
  padding: 1.5rem;
}

关键细节说明 #

• 侧边栏模式：mode="over"让侧边栏覆盖在页面内容上，和Bootstrap下拉菜单行为一致；若需要侧边栏推开内容，可改为mode="push"
• 断点适配：Angular Flex Layout的fxShow.xs/fxHide.xs对应小于600px的屏幕，和Bootstrap的sm断点接近，可根据需求调整为fxShow.sm等其他断点
• 无障碍支持：Material组件默认包含aria-label等无障碍属性，无需额外配置
• 动画效果：MatSidenav自带展开/收起的过渡动画，无需手动添加CSS动画

内容的提问来源于stack exchange，提问作者Ghiro68