ion-fab
Fabs 是包含一个或多个 fab 按钮 的容器元素。它们应放置在固定位置，不随内容滚动。Fabs 应该有一个主 fab 按钮。Fabs 还可以包含一个或多个 fab 列表，这些列表包含在点击主 fab 按钮时显示的相关按钮。
🌐 Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fabs should have one main fab button. Fabs can also contain one or more fab lists which contain related buttons that show when the main fab button is clicked.
基本用法
🌐 Basic Usage
列表侧
🌐 List Side
fab 列表 组件的 side 属性控制它相对于主 fab 按钮的位置。单个 fab 可以有多个 fab 列表，只要它们的 side 值各不相同。
🌐 The side property of the fab list component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for side.
定位
🌐 Positioning
为了将浮动操作按钮固定在一个位置，应将其分配到外部 content 组件的 fixed 插槽。使用 vertical 和 horizontal 属性来控制浮动操作按钮在视口中的对齐方式。edge 属性将导致浮动操作按钮与应用的头部或底部重叠。
🌐 In order to place the fab in a fixed position, it should be assigned to the fixed slot of the outer content component. Use the vertical and horizontal props to control the alignment of the fab in the viewport. The edge prop will cause the fab button to overlap with the app's header or footer.
安全区
🌐 Safe Area
如果没有 ion-header 或 ion-footer 组件，浮动操作按钮可能会被设备的刘海、状态栏或其他设备界面覆盖。在这些情况下，不会考虑顶部和底部的安全区域。可以通过使用--ion-safe-area-(dir) 变量来进行调整。
🌐 If there is no ion-header or ion-footer component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the safe area on the top and bottom is not taken into account. This can be adjusted by using the --ion-safe-area-(dir) variables.
在没有 ion-header 的情况下使用 vertical 设置为 "top" 的 fab 时，需要设置顶部边距：
🌐 When using a fab with vertical set to "top" without an ion-header, the top margin needs to be set:
ion-fab {
margin-top: var(--ion-safe-area-top, 0);
}
当使用设置了 vertical 为 "bottom" 的 fab 且没有 ion-footer 时，需要设置底部边距：
🌐 And when using a fab with vertical set to "bottom" without an ion-footer, the bottom margin needs to be set:
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
如果存在 ion-header（对于 vertical 设置为 "top" 的浮动操作按钮）或 ion-footer（对于 vertical 设置为 "bottom" 的浮动操作按钮），则不需要调整 CSS，因为浮动操作按钮会相对于页眉或页脚定位。
🌐 If there is an ion-header (for a fab with vertical set to "top") or ion-footer (for a fab with vertical set to "bottom"), no CSS adjustment is needed because the fab gets positioned relative to the header or footer.
相对于无限列表
🌐 Relative to Infinite List
在视图包含许多交互元素（例如无限滚动列表）的场景中，如果浮动操作按钮 (FAB) 位于 DOM 中所有项目的下方，那么用户导航到该按钮可能会遇到困难。
🌐 In scenarios where a view contains many interactive elements, such as an infinitely-scrolling list, it may be challenging for users to navigate to the Floating Action Button (FAB) if it is placed below all the items in the DOM.
通过在 Content 上设置 fixedSlotPlacement 属性为 before，FAB 将在 DOM 中被放置在主要内容之前。这确保了 FAB 在其他交互元素获得焦点之前获得键盘焦点，使用户更容易访问 FAB。
🌐 By setting the fixedSlotPlacement property on Content to before, the FAB will be placed before the main content in the DOM. This ensures that the FAB receives keyboard focus before other interactive elements receive focus, making it easier for users to access the FAB.
按钮尺寸
🌐 Button Sizing
将主浮动操作按钮的 size 属性设置为 "small" 将使其渲染迷你尺寸。请注意，当与内层浮动操作按钮一起使用时，此属性不会生效。
🌐 Setting the size property of the main fab button to "small" will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons.
主题化
🌐 Theming
颜色
🌐 Colors
CSS 自定义属性
🌐 CSS Custom Properties
CSS 阴影部分
🌐 CSS Shadow Parts
无障碍
🌐 Accessibility
标签
🌐 Labels
由于浮动操作按钮（FAB）仅允许包含图标，开发者必须在每个 ion-fab-button 实例上提供一个 aria-label。如果没有这个标签，辅助技术将无法宣布每个按钮的用途。
🌐 Since FABs are allowed to contain only icons, developers must provide an aria-label on each ion-fab-button instance. Without this label, assistive technologies will not be able to announce the purpose of each button.
属性
🌐 Properties
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 |
事件
🌐 Events
No events available for this component.
方法
🌐 Methods
close
| Description | Close an active FAB list container. |
| Signature | close() => Promise<void> |
CSS 阴影部分
🌐 CSS Shadow Parts
No CSS shadow parts available for this component.
CSS 自定义属性
🌐 CSS Custom Properties
No CSS custom properties available for this component.
插槽
🌐 Slots
No slots available for this component.