浮動操作按鈕

浮動操作按鈕 (FAB) 執行螢幕上的主要或最常見的操作。

浮動操作按鈕出現在所有螢幕內容的前方，通常為中心帶有圖示的圓形。FAB 有兩種型別：一般和延伸。

僅在浮動操作按鈕是最適合呈現螢幕主要操作的方式時才使用。建議每個螢幕僅使用一個元件來表示最常見的操作。

基本 FAB

<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon sx={{ mr: 1 }} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>

<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon sx={{ mr: 1 }} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>

按下 Enter 開始編輯

尺寸

預設情況下，尺寸為 large。使用 size 屬性以取得較小的浮動操作按鈕。

<Fab size="small" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab size="medium" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="add">
  <AddIcon />
</Fab>

<Fab size="small" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab size="medium" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="add">
  <AddIcon />
</Fab>

按下 Enter 開始編輯

<Fab variant="extended" size="small" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

<Fab variant="extended" size="small" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

按下 Enter 開始編輯

動畫

預設情況下，浮動操作按鈕以展開的 Material 片段動畫方式進入螢幕。

跨越多個橫向螢幕（例如分頁螢幕）的浮動操作按鈕應短暫消失，然後在其操作變更時重新出現。

縮放轉場可用於實現此目的。請注意，由於退出和進入動畫是同時觸發的，因此我們使用 enterDelay 以允許傳出的浮動操作按鈕的動畫在新的浮動操作按鈕進入之前完成。

項目一

API

請參閱以下文件，以完整參考此處提及之元件的所有屬性和類別。

<Fab />