ion-fab
Fab 是包含一个或多个 精美按钮 的容器元素。它们应该放置在不随内容滚动的固定位置。晶圆厂应该有一个晶圆厂主按钮。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
晶圆厂清单 组件的 side 属性控制它相对于主 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 属性来控制 fab 在视口中的对齐方式。edge 属性将导致 fab 按钮与应用的页眉或页脚重叠。
¥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 组件，晶圆厂可能会被设备的缺口、状态栏或其他设备 UI 覆盖。在这些情况下，不考虑顶部和底部的 安全区。这可以通过使用 --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.
当使用 vertical 设置为 "top" 而没有 ion-header 的晶圆厂时，需要设置上边距：
¥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" 而没有 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" 的 fab）或 ion-footer（对于 vertical 设置为 "bottom" 的 fab），则不需要 CSS 调整，因为 fab 是相对于页眉或页脚定位的。
¥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.
通过将 内容 上的 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
将主 fab 按钮的 size 属性设置为 "small" 会将其渲染为迷你尺寸。请注意，与内部 fab 按钮一起使用时，此属性不会产生任何效果。
¥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.