ion-fab
FAB 是包含一个或多个 fab 按钮 的容器元素。它们应放置在不会随内容滚动的固定位置。FAB 应有一个主 fab 按钮。FAB 还可以包含一个或多个 fab 列表，这些列表包含相关的按钮，点击主 fab 按钮时会显示。
基本用法
列表侧边
fab 列表组件的 side 属性控制其相对于主 fab 按钮出现的位置。单个 fab 可以有多个 fab 列表，只要它们都有不同的 side 值。
定位
要将 fab 放置在固定位置，应将其分配给外部 content 组件的 fixed 插槽。使用 vertical 和 horizontal 属性来控制 fab 在视口中的对齐方式。edge 属性将使 fab 按钮与应用的头部或底部重叠。
安全区域
如果没有 ion-header 或 ion-footer 组件，fab 可能会被设备的刘海屏、状态栏或其他设备 UI 遮挡。在这些情况下，顶部和底部的安全区域不会被考虑在内。可以通过使用 --ion-safe-area-(dir) 变量进行调整。
当使用 vertical 设置为 "top" 但没有 ion-header 的 fab 时，需要设置顶部边距：
ion-fab {
margin-top: var(--ion-safe-area-top, 0);
}
当使用 vertical 设置为 "bottom" 但没有 ion-footer 的 fab 时，需要设置底部边距：
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
如果有 ion-header（对于 vertical 设置为 "top" 的 fab）或 ion-footer（对于 vertical 设置为 "bottom" 的 fab），则无需进行 CSS 调整，因为 fab 相对于头部或底部进行定位。
相对于无限列表
在视图中包含许多交互元素的场景中，例如无限滚动列表，如果浮动操作按钮（FAB）放置在 DOM 中所有项目的下方，用户可能难以导航到它。
通过将 Content 上的 fixedSlotPlacement 属性设置为 before，FAB 将放置在 DOM 中主要内容之前。这确保 FAB 在其他交互元素获得焦点之前接收键盘焦点，使用户更容易访问 FAB。
按钮大小
将主 fab 按钮的 size 属性设置为 "small" 将以迷你尺寸渲染它。请注意，此属性对内部 fab 按钮没有影响。
主题
颜色
CSS 自定义属性
CSS Shadow Parts
辅助功能
标签
由于 FAB 只能包含图标，开发人员必须在每个 ion-fab-button 实例上提供 aria-label。如果没有此标签，辅助技术将无法宣布每个按钮的用途。
属性
activated
| 说明 | If true, both the ion-fab-button and all ion-fab-list inside ion-fab will become active. That means ion-fab-button will become a close icon and ion-fab-list will become visible. |
| 属性 | activated |
| 类型 | boolean |
| 默认值 | false |
edge
| 说明 | If true, the fab will display on the edge of the header if vertical is "top", and on the edge of the footer if it is "bottom". Should be used with a fixed slot. |
| 属性 | edge |
| 类型 | boolean |
| 默认值 | false |
horizontal
| 说明 | Where to align the fab horizontally in the viewport. |
| 属性 | horizontal |
| 类型 | "center" ｜ "end" ｜ "start" ｜ undefined |
| 默认值 | undefined |
vertical
| 说明 | Where to align the fab vertically in the viewport. |
| 属性 | vertical |
| 类型 | "bottom" ｜ "center" ｜ "top" ｜ undefined |
| 默认值 | undefined |
事件
该组件没有可用的事件。
方法
close
| 说明 | Close an active FAB list container. |
| 签名 | close() => Promise<void> |
CSS Shadow Parts
该组件没有可用的 CSS 阴影部分。
CSS 自定义属性
该组件没有可用的 CSS 自定义属性。
插槽
该组件没有可用的插槽。