ion-fab
浮動操作按鈕是包含一個或多個 浮動操作按鈕 的容器元素。它們應放置在不隨內容捲動的固定位置。浮動操作按鈕應有一個主要浮動操作按鈕。浮動操作按鈕也可以包含一個或多個 浮動操作清單，其中包含在點擊主要浮動操作按鈕時顯示的相關按鈕。
基本用法
清單側邊
浮動操作清單 元件的 side 屬性控制其相對於主要浮動操作按鈕的顯示位置。只要它們的 side 值不同，單一浮動操作按鈕可以有多個浮動操作清單。
定位
為了將浮動操作按鈕放置在固定位置，應將其分配給外部 內容 元件的 fixed 插槽。使用 vertical 和 horizontal 屬性來控制浮動操作按鈕在檢視區中的對齊方式。edge 屬性會使浮動操作按鈕與應用程式的頁首或頁尾重疊。
安全區域
如果沒有 ion-header 或 ion-footer 元件，浮動操作按鈕可能會被裝置的螢幕缺口、狀態列或其他裝置 UI 覆蓋。在這些情況下，不會考慮頂部和底部的安全區域。可以使用--ion-safe-area-(dir) 變數來調整。
當使用 vertical 設定為 "top" 的浮動操作按鈕，且沒有 ion-header 時，需要設定頂部邊距
ion-fab {
margin-top: var(--ion-safe-area-top, 0);
}
當使用 vertical 設定為 "bottom" 的浮動操作按鈕，且沒有 ion-footer 時，需要設定底部邊距
ion-fab {
margin-bottom: var(--ion-safe-area-bottom, 0);
}
如果有 ion-header (對於 vertical 設定為 "top" 的浮動操作按鈕) 或 ion-footer (對於 vertical 設定為 "bottom" 的浮動操作按鈕)，則不需要進行 CSS 調整，因為浮動操作按鈕會相對於頁首或頁尾定位。
相對於無限列表
在檢視畫面包含許多互動式元素 (例如無限滾動列表) 的情況下，如果浮動操作按鈕 (FAB) 放置在 DOM 中所有項目下方，則使用者可能難以導覽至該按鈕。
將 Content 上的 fixedSlotPlacement 屬性設定為 before，FAB 將放置在 DOM 中主要內容之前。這可確保 FAB 在其他互動式元素接收焦點之前接收鍵盤焦點，讓使用者更容易存取 FAB。
按鈕大小
將主要浮動操作按鈕的 size 屬性設定為 "small" 會以迷你尺寸呈現。請注意，此屬性與內部浮動操作按鈕搭配使用時不會產生作用。
主題化
色彩
CSS 自訂屬性
CSS 陰影部分
協助工具
標籤
由於允許浮動操作按鈕僅包含圖示，開發人員必須在每個 ion-fab-button 執行個體上提供 aria-label。如果沒有此標籤，輔助技術將無法宣告每個按鈕的用途。
屬性
activated
| 描述 | 如果為 true，則 ion-fab-button 和 ion-fab 內的所有 ion-fab-list 都會變成活動狀態。這表示 ion-fab-button 將變成 close 圖示，而 ion-fab-list 將變成可見狀態。 |
| 屬性 | activated |
| 類型 | boolean |
| 預設 | false |
edge
| 描述 | 如果為 true，則當 vertical 為 "top" 時，浮動操作按鈕將顯示在頁首邊緣；當為 "bottom" 時，則顯示在頁尾邊緣。應與 fixed 插槽搭配使用。 |
| 屬性 | edge |
| 類型 | boolean |
| 預設 | false |
horizontal
| 描述 | 要在檢視區中水平對齊浮動操作按鈕的位置。 |
| 屬性 | horizontal |
| 類型 | "center" ｜ "end" ｜ "start" ｜ undefined |
| 預設 | undefined |
vertical
| 描述 | 要在檢視區中垂直對齊浮動操作按鈕的位置。 |
| 屬性 | vertical |
| 類型 | "bottom" ｜ "center" ｜ "top" ｜ undefined |
| 預設 | undefined |
事件
此元件沒有可用的事件。
方法
close
| 描述 | 關閉活動的浮動操作清單容器。 |
| 簽名 | close() => Promise<void> |
CSS 陰影部分
此元件沒有可用的 CSS 陰影部分。
CSS 自訂屬性
此元件沒有可用的 CSS 自訂屬性。
插槽
此元件沒有可用的插槽。