FabAPI

React Fab 元件的 API 參考文件。瞭解此匯出模組的 props、CSS 和其他 API。

範例

如需此 React 元件的使用範例和詳細資訊，請造訪元件示範頁面

import Fab from '@mui/material/Fab';
// or
import { Fab } from '@mui/material';

ButtonBase 元件的 Props 也可使用。

名稱	類型	預設值	描述
children	node	-	元件的內容。
classes	object	-	覆寫或擴充套用至元件的樣式。請參閱下方CSS 類別 API 以瞭解更多詳細資訊。
color	'default' \| 'error' \| 'info' \| 'inherit' \| 'primary' \| 'secondary' \| 'success' \| 'warning' \| string	'default'	元件的顏色。它同時支援預設和自訂主題色彩，可以按照調色盤自訂指南中所示的方式新增。
component	elementType	-	用於根節點的元件。可以是使用 HTML 元素的字串或元件。
disabled	bool	false	若為 `true`，則元件停用。
disableFocusRipple	bool	false	若為 `true`，則鍵盤焦點漣漪效果停用。
disableRipple	bool	-	若為 `true`，則漣漪效果停用。
href	string	-	按一下按鈕時連結到的 URL。若有定義，則會使用 `a` 元素作為根節點。
size	'small' \| 'medium' \| 'large' \| string	'large'	元件的大小。`small` 等同於 dense 按鈕樣式。
sx	Array<func \| object \| bool> \| func \| object	-	允許定義系統覆寫以及其他 CSS 樣式的系統 prop。請參閱 `sx` 頁面以瞭解更多詳細資訊。
variant	'circular' \| 'extended' \| string	'circular'	要使用的變體。

ref 會轉發到根元素。

雖然上面未明確記錄，但 ButtonBase 元件的 props 也可在 Fab 中使用。您可以利用此優勢來鎖定巢狀元件。

您可以使用 MuiFab 來透過主題變更此元件的預設 props。

這些類別名稱對於使用 CSS 設定樣式很有用。它們會在觸發特定狀態時套用至元件的 slot。

類別名稱	規則名稱	描述
.Mui-disabled		若 `disabled={true}`，則套用至根元素的狀態類別。
.Mui-focusVisible		若按鈕具有鍵盤焦點，則套用至 ButtonBase 根元素的狀態類別。
.MuiFab-circular	circular	若 `variant="circular"`，則套用至根元素的樣式。
.MuiFab-colorInherit	colorInherit	若 `color="inherit"`，則套用至根元素的樣式。
.MuiFab-extended	extended	若 `variant="extended"`，則套用至根元素的樣式。
.MuiFab-primary	primary	若 `color="primary"`，則套用至根元素的樣式。
.MuiFab-root	root	套用至根元素的樣式。
.MuiFab-secondary	secondary	若 `color="secondary"`，則套用至根元素的樣式。
.MuiFab-sizeMedium	sizeMedium	若 `size="medium"``，則套用至根元素的樣式。
.MuiFab-sizeSmall	sizeSmall	若 `size="small"``，則套用至根元素的樣式。

您可以使用下列其中一個自訂選項覆寫元件的樣式

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。