如何在Angular Material侧边导航边缘添加/替换浮动操作按钮？

我刚好做过类似的效果，咱们一步步来实现你想要的功能：

第一步：准备基础布局与模块导入 #

首先确保你已经在项目中导入了所需的Angular Material模块，在你的组件模块里添加：

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [
    // 其他模块...
    MatSidenavModule,
    MatButtonModule,
    MatIconModule
  ]
})
export class YourModule { }

第二步：调整HTML结构 #

我们需要把侧边导航、按钮和主内容放在一个相对定位的容器里，这样按钮可以精准定位在侧边导航的边缘：

<!-- 主容器，设置相对定位作为按钮的定位参照 -->
<div class="sidenav-container" fxLayout="row">
  <!-- 侧边导航 -->
  <mat-sidenav #sidenav mode="side" opened class="custom-sidenav">
    <!-- 侧边导航原有内容 -->
    <h3>导航菜单</h3>
    <mat-nav-list>
      <a mat-list-item href="#">菜单项1</a>
      <a mat-list-item href="#">菜单项2</a>
    </mat-nav-list>
  </mat-sidenav>

  <!-- Cancel按钮 - 嵌入侧边导航与主内容之间 -->
  <button mat-fab color="warn" class="cancel-fab" (click)="sidenav.close()">
    <mat-icon>close</mat-icon>
  </button>

  <!-- 替换后的现有功能FAB - 同样嵌入边缘，可调整垂直位置 -->
  <button mat-fab color="primary" class="action-fab" (click)="handleYourAction()">
    <mat-icon>edit</mat-icon>
  </button>

  <!-- 主内容区域 -->
  <div class="main-content" fxFlex>
    <h2>主内容</h2>
    <p>这里是页面的主要内容区域</p>
  </div>
</div>

第三步：编写CSS样式实现嵌入效果 #

关键就是通过绝对定位和精确的位置计算，让按钮刚好卡在侧边导航和主内容之间，就像你看到的粉色按钮那样：

.sidenav-container {
  position: relative;
  height: 100vh; /* 占满视口高度，可根据你的需求调整 */
}

.custom-sidenav {
  width: 260px; /* 自定义侧边导航宽度 */
  box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

/* Cancel按钮样式 */
.cancel-fab {
  position: absolute;
  left: calc(260px - 28px); /* 侧边宽度减去按钮半径（mat-fab默认56px宽，半径28px） */
  top: 24px; /* 垂直位置，按需调整 */
  z-index: 100; /* 确保按钮在侧边导航和主内容之上 */
}

/* 现有功能替换后的FAB样式 */
.action-fab {
  position: absolute;
  left: calc(260px - 28px);
  top: 88px; /* 垂直位置和Cancel按钮错开 */
  z-index: 100;
}

.main-content {
  padding: 24px;
}

第四步：组件逻辑补充 #

在你的组件类里添加按钮对应的处理函数，比如关闭侧边导航和原有按钮的功能：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 原有按钮的功能逻辑
  handleYourAction() {
    // 这里写你原来按钮的业务代码
    console.log("执行原有按钮的操作");
  }
}

额外提示 #

• 如果你的侧边导航是可折叠的（mode="over"），可以监听sidenav.openedChange事件，动态调整按钮的位置或者显示隐藏
• 可以根据需求调整按钮的颜色、图标和垂直位置，mat-fab也可以换成mat-mini-fab做更小的按钮
• 如果用Flexbox的方式而不是绝对定位，可以给主容器设置align-items: flex-start，然后给按钮设置margin-left: -28px，不过绝对定位的方式更精准可控

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