ion-fab

shadow

FAB（浮动操作按钮）是包含一个或多个fab 按钮的容器元素。它们应放置在固定位置，不随内容滚动。FAB 应有一个主 fab 按钮。FAB 还可以包含一个或多个fab 列表，其中包含相关按钮，当点击主 fab 按钮时显示。

基本用法

列表方向

fab 列表组件的 side 属性控制其相对于主 fab 按钮出现的位置。单个 fab 可以有多个 fab 列表，只要它们都有不同的 side 值。

定位

为了将 fab 放置在固定位置，应将其分配给外部内容组件的 fixed 插槽。使用 vertical 和 horizontal 属性控制 fab 在视口中的对齐方式。edge 属性将使 fab 按钮与应用的头部或底部重叠。

安全区域

如果没有 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 相对于头部或底部定位。

按钮尺寸

将主 fab 按钮的 size 属性设置为 "small" 将以迷你尺寸渲染。请注意，此属性在内部 fab 按钮上无效。

主题

颜色

CSS 自定义属性

CSS 阴影部分

无障碍访问

标签

由于 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 阴影部分

该组件没有可用的 CSS 阴影部分。

CSS 自定义属性

该组件没有可用的 CSS 自定义属性。

插槽

该组件没有可用的插槽。