陰影
浮動操作按鈕 (FAB) 代表應用程式中的主要動作。預設情況下，它們具有圓形形狀。按下按鈕時，可能會開啟更多相關操作。
顧名思義，FAB 通常以固定位置浮動在內容上方。這是透過將 fab 按鈕包裝在 fab 組件中來實現的。如果按鈕未以 fab 包裝，它將與內容一起滾動。
如需使用範例，請參閱 fab 文件。
| 說明 | 如果為 true，則浮動操作按鈕將顯示關閉圖示。 |
| 屬性 | activated |
| 類型 | boolean |
| 預設值 | false |
| 說明 | 用於關閉圖示的圖示名稱。當按下浮動操作按鈕時，將會顯示此圖示。僅當它是包含浮動操作列表的浮動操作內的主要按鈕時才適用。 |
| 屬性 | close-icon |
| 類型 | string |
| 預設值 | close |
| 說明 | 要從應用程式的調色盤中使用的顏色。預設選項為："primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium" 和 "dark"。如需有關顏色的更多資訊，請參閱 主題。 |
| 屬性 | color |
| 類型 | "danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined |
| 預設值 | undefined |
| 說明 | 如果為 true，則使用者無法與浮動操作按鈕互動。 |
| 屬性 | disabled |
| 類型 | boolean |
| 預設值 | false |
| 說明 | 此屬性指示瀏覽器下載 URL，而不是導覽至該 URL，因此系統會提示使用者將其儲存為本機檔案。如果該屬性具有值，則會將其用作「另存新檔」提示中的預先填入的檔案名稱 (使用者仍然可以根據需要變更檔案名稱)。 |
| 屬性 | download |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
| 說明 | 包含超連結指向的 URL 或 URL 片段。如果設定此屬性，則會呈現錨點標籤。 |
| 屬性 | href |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
| 說明 | 模式決定要使用哪個平台樣式。 |
| 屬性 | mode |
| 類型 | "ios" ｜ "md" |
| 預設值 | undefined |
| 說明 | 指定目標物件與連結物件之間的關係。此值是以空格分隔的 連結類型清單。 |
| 屬性 | rel |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
| 說明 | 使用路由器時，指定使用 href 導覽至另一頁面時的轉換動畫。 |
| 屬性 | undefined |
| 類型 | ((baseEl: any, opts?: any) => Animation) ｜ undefined |
| 預設值 | undefined |
| 說明 | 使用路由器時，指定使用 href 導覽至另一頁面時的轉換方向。 |
| 屬性 | router-direction |
| 類型 | "back" ｜ "forward" ｜ "root" |
| 預設值 | 'forward' |
| 說明 | 如果為 true，則在浮動操作列表中時將顯示浮動操作按鈕。 |
| 屬性 | show |
| 類型 | boolean |
| 預設值 | false |
| 說明 | 按鈕的大小。將其設定為 small 以擁有迷你浮動操作按鈕。 |
| 屬性 | size |
| 類型 | "small" ｜ undefined |
| 預設值 | undefined |
| 說明 | 指定要在哪裡顯示連結的 URL。僅當提供 href 時才適用。特殊關鍵字："_blank"、"_self"、"_parent"、"_top"。 |
| 屬性 | target |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
| 說明 | 如果為 true，則浮動操作按鈕將為半透明。僅當模式為 "ios" 且裝置支援 backdrop-filter 時才適用。 |
| 屬性 | translucent |
| 類型 | boolean |
| 預設值 | false |
| 說明 | 按鈕的類型。 |
| 屬性 | type |
| 類型 | "button" ｜ "reset" ｜ "submit" |
| 預設值 | 'button' |
| 名稱 | 說明 | 泡泡 |
|---|
ionBlur | 當按鈕失去焦點時發出。 | true |
ionFocus | 當按鈕取得焦點時發出。 | true |
此組件沒有可用的公用方法。
| 名稱 | 說明 |
|---|
close-icon | 當開啟浮動操作列表時顯示的關閉圖示（使用 ion-icon）。 |
native | 包裝所有子元素的原生 HTML 按鈕或錨點元素。 |
| 名稱 | 說明 |
|---|
--background | 按鈕的背景 |
--background-activated | 按下時按鈕的背景。注意：設定此值會干擾 Material Design 波紋。 |
--background-activated-opacity | 按下時按鈕背景的不透明度 |
--background-focused | 使用 Tab 鍵取得焦點時按鈕的背景 |
--background-focused-opacity | 使用 Tab 鍵取得焦點時按鈕背景的不透明度 |
--background-hover | 滑鼠懸停時按鈕的背景 |
--background-hover-opacity | 滑鼠懸停時按鈕背景的不透明度 |
--border-color | 按鈕的邊框顏色 |
--border-radius | 按鈕的邊框半徑 |
--border-style | 按鈕的邊框樣式 |
--border-width | 按鈕的邊框寬度 |
--box-shadow | 按鈕的陰影 |
--close-icon-font-size | 關閉圖示的字型大小 |
--color | 按鈕的文字顏色 |
--color-activated | 按下時按鈕的文字顏色 |
--color-focused | 使用 Tab 鍵取得焦點時按鈕的文字顏色 |
--color-hover | 滑鼠懸停時按鈕的文字顏色 |
--padding-bottom | 按鈕的底部邊距 |
--padding-end | 如果方向是從左到右，則為按鈕的右邊內距；如果方向是從右到左，則為按鈕的左邊內距 |
--padding-start | 如果方向是從左到右，則為按鈕的左邊內距；如果方向是從右到左，則為按鈕的右邊內距 |
--padding-top | 按鈕的上邊內距 |
--ripple-color | 按鈕漣漪效果的顏色 |
--transition | 按鈕的過渡效果 |
| 名稱 | 說明 |
|---|
--background | 按鈕的背景 |
--background-activated | 按下時按鈕的背景。注意：設定此值會干擾 Material Design 波紋。 |
--background-activated-opacity | 按下時按鈕背景的不透明度 |
--background-focused | 使用 Tab 鍵取得焦點時按鈕的背景 |
--background-focused-opacity | 使用 Tab 鍵取得焦點時按鈕背景的不透明度 |
--background-hover | 滑鼠懸停時按鈕的背景 |
--background-hover-opacity | 滑鼠懸停時按鈕背景的不透明度 |
--border-color | 按鈕的邊框顏色 |
--border-radius | 按鈕的邊框半徑 |
--border-style | 按鈕的邊框樣式 |
--border-width | 按鈕的邊框寬度 |
--box-shadow | 按鈕的陰影 |
--close-icon-font-size | 關閉圖示的字型大小 |
--color | 按鈕的文字顏色 |
--color-activated | 按下時按鈕的文字顏色 |
--color-focused | 使用 Tab 鍵取得焦點時按鈕的文字顏色 |
--color-hover | 滑鼠懸停時按鈕的文字顏色 |
--padding-bottom | 按鈕的底部邊距 |
--padding-end | 如果方向是從左到右，則為按鈕的右邊內距；如果方向是從右到左，則為按鈕的左邊內距 |
--padding-start | 如果方向是從左到右，則為按鈕的左邊內距；如果方向是從右到左，則為按鈕的右邊內距 |
--padding-top | 按鈕的上邊內距 |
--ripple-color | 按鈕漣漪效果的顏色 |
--transition | 按鈕的過渡效果 |
此元件沒有可用的插槽。