ion-fab
Fabs 是包含一个或多个 fab 按钮 的容器元素。它们应该放置在固定位置，不会随着内容滚动。Fabs 应该有一个主要的 fab 按钮。Fabs 也可以包含一个或多个 fab 列表，其中包含在单击主要 fab 按钮时显示的相关按钮。
基本用法
列表侧边
fab 列表 组件的 side 属性控制它相对于主要 fab 按钮的位置。只要它们对 side 都有不同的值，单个 fab 就可以有多个 fab 列表。
定位
为了将 fab 放在固定位置，它应该被分配到外部 内容 组件的 fixed 插槽。使用 vertical 和 horizontal 属性控制 fab 在视窗中的对齐方式。edge 属性将导致 fab 按钮与应用程序的页眉或页脚重叠。
安全区域
如果没有 ion-header 或 ion-footer 组件，fab 可能会被设备的凹槽、状态栏或其他设备 UI 遮挡。在这种情况下，不会考虑顶部和底部的 安全区域。这可以通过使用 --ion-safe-area-(dir) 变量 进行调整。
当将 fab 与 vertical 设置为 "top" 但没有 ion-header 一起使用时，需要设置顶部边距
ion-fab {
margin-top: var(--ion-safe-area-top, 0);
}
当将 fab 与 vertical 设置为 "bottom" 但没有 ion-footer 一起使用时，需要设置底部边距
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
如果有 ion-header（对于 vertical 设置为 "top" 的 fab）或 ion-footer（对于 vertical 设置为 "bottom" 的 fab），则不需要进行 CSS 调整，因为 fab 会相对于页眉或页脚进行定位。
相对于无限列表
在视图包含许多交互式元素（例如无限滚动的列表）的情况下，如果浮动操作按钮 (FAB) 被放置在 DOM 中所有项目下方，用户可能难以导航到它。
通过将 内容 上的 fixedSlotPlacement 属性设置为 before，FAB 将放置在 DOM 中主要内容之前。这将确保 FAB 在其他交互式元素获得焦点之前获得键盘焦点，使用户更容易访问 FAB。
按钮大小
将主要 fab 按钮的 size 属性设置为 "small" 将以迷你大小渲染它。请注意，此属性在与内部 fab 按钮一起使用时无效。
主题
颜色
CSS 自定义属性
CSS 阴影部件
可访问性
标签
由于 FAB 只能包含图标，因此开发人员必须在每个 ion-fab-button 实例上提供 aria-label。如果没有这个标签，辅助技术将无法宣布每个按钮的目的。
属性
activated
| 描述 | 如果为 true，ion-fab-button 和 ion-fab 中的所有 ion-fab-list 都将变为活动状态。这意味着 ion-fab-button 将变为 close 图标，而 ion-fab-list 将变为可见状态。 |
| 属性 | activated |
| 类型 | boolean |
| 默认值 | false |
edge
| 描述 | 如果为 true，fab 将在 vertical 为 "top" 时显示在页眉的边缘，而在 vertical 为 "bottom" 时显示在页脚的边缘。应与 fixed 插槽一起使用。 |
| 属性 | edge |
| 类型 | boolean |
| 默认值 | false |
horizontal
| 描述 | 在视窗中水平对齐 fab 的位置。 |
| 属性 | horizontal |
| 类型 | "center" ｜ "end" ｜ "start" ｜ undefined |
| 默认值 | undefined |
vertical
| 描述 | 在视窗中垂直对齐 fab 的位置。 |
| 属性 | vertical |
| 类型 | "bottom" ｜ "center" ｜ "top" ｜ undefined |
| 默认值 | undefined |
事件
此组件没有可用事件。
方法
close
| 描述 | 关闭活动的 FAB 列表容器。 |
| 签名 | close() => Promise<void> |
CSS 阴影部件
此组件没有可用 CSS 阴影部件。
CSS 自定义属性
此组件没有可用 CSS 自定义属性。
插槽
此组件没有可用插槽。