ion-fab
浮动操作按钮（FAB）是包含一个或多个浮动操作按钮的容器元素。它们应放置在固定位置，不随内容滚动。FAB 应有一个主要的浮动操作按钮。FAB 还可以包含一个或多个浮动操作列表，这些列表包含在主浮动操作按钮被点击时显示的相关按钮。
基本用法
列表位置
浮动操作列表组件的 side 属性控制其相对于主浮动操作按钮的位置。只要所有浮动操作列表的 side 值不同，一个 FAB 可以包含多个浮动操作列表。
定位
为了将 FAB 放置在固定位置，应将其分配给外层内容组件的 fixed 插槽。使用 vertical 和 horizontal 属性来控制 FAB 在视口中的对齐方式。edge 属性将使浮动操作按钮与应用标题栏或页脚重叠。
安全区域
如果没有 ion-header 或 ion-footer 组件，FAB 可能会被设备的刘海屏、状态栏或其他设备 UI 遮挡。在这些情况下，不会考虑顶部和底部的安全区域。这可以通过使用 --ion-safe-area-(dir) 变量 来调整。
当使用 vertical 设置为 "top" 的 FAB 而没有 ion-header 时，需要设置顶部边距：
ion-fab {
margin-top: var(--ion-safe-area-top, 0);
}
当使用 vertical 设置为 "bottom" 的 FAB 而没有 ion-footer 时，需要设置底部边距：
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
如果有 ion-header（对于 vertical 设置为 "top" 的 FAB）或 ion-footer（对于 vertical 设置为 "bottom" 的 FAB），则无需 CSS 调整，因为 FAB 会相对于标题栏或页脚定位。
按钮尺寸
将主浮动操作按钮的 size 属性设置为 "small" 会将其渲染为迷你尺寸。请注意，此属性在内部浮动操作按钮上使用时不产生效果。
主题定制
颜色
CSS 自定义属性
CSS 阴影部件
无障碍访问
标签
由于 FAB 仅允许包含图标，开发人员必须在每个 ion-fab-button 实例上提供 aria-label。没有此标签，辅助技术将无法传达每个按钮的用途。
属性
activated
| Description | 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. |
| Attribute | activated |
| Type | boolean |
| Default | false |
edge
| Description | 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. |
| Attribute | edge |
| Type | boolean |
| Default | false |
horizontal
| Description | Where to align the fab horizontally in the viewport. |
| Attribute | horizontal |
| Type | "center" ｜ "end" ｜ "start" ｜ undefined |
| Default | undefined |
vertical
| Description | Where to align the fab vertically in the viewport. |
| Attribute | vertical |
| Type | "bottom" ｜ "center" ｜ "top" ｜ undefined |
| Default | undefined |
事件
No events available for this component.
方法
close
| Description | Close an active FAB list container. |
| Signature | close() => Promise<void> |
CSS 阴影部件
No CSS shadow parts available for this component.
CSS 自定义属性
No CSS custom properties available for this component.
插槽
No slots available for this component.