Ionic 浮动框（Floating Action Button，简称 FAB）完整实战指南

（Ionic 7+，支持 Angular / React / Vue，一份代码全平台超漂亮）

1. 基础 FAB（最常用 3 种位置）

<!-- 右下角经典位置（微信、支付宝同款）-->
<ion-fab slot="fixed" vertical="bottom" horizontal="end">
  <ion-fab-button>
    < ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

<!-- 左下角 -->
<ion-fab slot="fixed" vertical="bottom" horizontal="start">
  <ion-fab-button color="success">
    <ion-icon name="camera"></ion-icon>
  </ion-fab-button>
</ion-fab>

<!-- 页面正中间（用于引导）-->
<ion-fab slot="fixed" vertical="center" horizontal="center">
  <ion-fab-button size="small" color="warning">
    <ion-icon name="help"></ion-icon>
  </ion-fab-button>
</ion-fab>

2. 带展开菜单的 FAB（超级实用！）

<ion-fab vertical="bottom" horizontal="end" slot="fixed">
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>

  <!-- 展开的子按钮（从下往上弹）-->
  <ion-fab-list side="top">
    <ion-fab-button (click)="takePhoto()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
    <ion-fab-button (click)="chooseAlbum()">
      <ion-icon name="image"></ion-icon>
    </ion-fab-button>
    <ion-fab-button (click)="recordVideo()">
      <ion-icon name="videocam"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

3. 所有位置 + 方向组合速查表（直接复制）

vertical	horizontal	side（展开方向）	实际位置
bottom	end	top	右下角（最常用）
bottom	start	top	左下角
top	end	bottom	右上角
top	start	bottom	左上角
center	center	–	正中间
bottom	center	top	底部正中

4. 不同样式和颜色（直接改 color）

<ion-fab-button color="primary">   <!-- 蓝 -->
<ion-fab-button color="secondary"> <!-- 紫 -->
<ion-fab-button color="success">   <!-- 绿 -->
<ion-fab-button color="warning">   <!-- 黄 -->
<ion-fab-button color="danger">    <!-- 红 -->
<ion-fab-button color="dark">      <!-- 黑灰 -->

<!-- 小尺寸 -->
<ion-fab-button size="small">
  <ion-icon name="share"></ion-icon>
</ion-fab-button>

5. 自动隐藏 FAB（滚动时隐藏，上滑显示）

<ion-content (ionScroll)="onScroll($event)">
  <!-- 内容很多会滚动 -->

  <ion-fab vertical="bottom" horizontal="end" slot="fixed" [edge]="shouldHide">
    <ion-fab-button>
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

shouldHide = false;
lastScrollTop = 0;

onScroll(event: any) {
  const scrollTop = event.detail.scrollTop;
  // 向下滚动隐藏，向上滚动显示
  this.shouldHide = scrollTop > this.lastScrollTop && scrollTop > 100;
  this.lastScrollTop = scrollTop;
}

6. 结合页面底部 TabBar（完美避开不重叠）

<!-- 正确写法：FAB 放在 ion-content 里 -->
<ion-content>
  <!-- 所有页面内容 -->

  <!-- FAB 放在 content 里，自动避开 tabbar -->
  <ion-fab vertical="bottom" horizontal="end" slot="fixed" edge>
    <ion-fab-button (click)="openPublish()">
      <ion-icon name="create"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>

关键属性 edge：自动把 FAB 往上抬，避免被底部 TabBar 遮挡！

7. 完整实战示例：微信式发布按钮

<ion-fab vertical="bottom" horizontal="end" slot="fixed" edge>
  <ion-fab-button color="success">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>

  <ion-fab-list side="top">
    <ion-fab-button (click)="publishMoment()">
      <ion-icon name="chatbubble"></ion-icon>
    </ion-fab-button>
    <ion-fab-button (click)="takePhoto()">
      <ion-icon name="camera"></ion-icon>
    </ion-fab-button>
    <ion-fab-button (click)="recordVideo()">
      <ion-icon name="videocam"></ion-icon>
    </ion-fab-button>
  </ion-fab-list>
</ion-fab>

8. 一句话总结最优雅写法（2025 推荐）

<ion-fab vertical="bottom" horizontal="end" slot="fixed" edge>
  <ion-fab-button>
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>

加一个 edge 属性 → 自动适配有无底部 TabBar
加一个 ion-fab-list → 秒变多功能菜单
在 iOS 是毛玻璃半透明，在 Android 是 Material 悬浮，完美！

需要我直接发你一个「带展开菜单 + 滚动隐藏 + 自动避让 TabBar」的完整页面模板吗？一句话就发～