如何在Angular Material 18中实现Material 3的Navigation Rail组件？

由于Angular Material 18暂未提供官方的Navigation Rail组件，我们可以通过组合现有基础组件并适配Material 3规范来实现。以下是完整的实现方案：

1. 基础组件结构 #

利用mat-nav-list、mat-list-item和mat-icon搭建核心布局，结合Angular Router实现页面跳转：

<div class="navigation-rail">
  <mat-nav-list>
    <!-- 首页导航项 -->
    <a mat-list-item 
       [routerLink]="['/home']" 
       routerLinkActive="active"
       [routerLinkActiveOptions]="{ exact: true }">
      <mat-icon>home</mat-icon>
      <span class="rail-label">首页</span>
    </a>
    <!-- 仪表盘导航项 -->
    <a mat-list-item 
       [routerLink]="['/dashboard']" 
       routerLinkActive="active">
      <mat-icon>dashboard</mat-icon>
      <span class="rail-label">仪表盘</span>
    </a>
    <!-- 设置导航项 -->
    <a mat-list-item 
       [routerLink]="['/settings']" 
       routerLinkActive="active">
      <mat-icon>settings</mat-icon>
      <span class="rail-label">设置</span>
    </a>
  </mat-nav-list>
</div>

2. Material 3样式适配 #

通过Material 3系统颜色变量和CSS过渡效果，匹配官方设计规范：

.navigation-rail {
  background: var(--md-sys-color-surface-container);
  border-right: 1px solid var(--md-sys-color-outline);
  height: 100vh;
  padding: 16px 8px;
  width: 80px;
  transition: width 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
}

/* 鼠标悬停展开显示标签 */
.navigation-rail:hover {
  width: 200px;
}

.mat-list-item {
  justify-content: center;
  padding: 12px 8px;
  margin-bottom: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

/* 激活状态高亮 */
.mat-list-item.active {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

.rail-label {
  opacity: 0;
  transition: opacity 0.3s ease;
  margin-left: 16px;
  white-space: nowrap;
}

.navigation-rail:hover .rail-label {
  opacity: 1;
}

/* 小屏幕固定仅显示图标 */
@media (max-width: 600px) {
  .navigation-rail {
    width: 64px;
  }
  .navigation-rail:hover {
    width: 64px;
  }
  .rail-label {
    display: none;
  }
}

3. 组件配置（Standalone模式） #

在组件类中导入所需的Angular Material模块：

import { Component } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-navigation-rail',
  standalone: true,
  imports: [RouterModule, MatListModule, MatIconModule],
  templateUrl: './navigation-rail.component.html',
  styleUrls: ['./navigation-rail.component.scss']
})
export class NavigationRailComponent {}

4. 可选优化 #

• 手动折叠控制：添加切换按钮替代hover展开，适合需要用户主动控制的场景
• 垂直居中布局：通过flex-direction: column和justify-content: center将导航项居中显示
• 通知徽章：集成mat-badge组件显示未读通知数量
• 深色模式适配：利用Material 3的颜色系统自动适配深色/浅色主题

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