速撥按鈕

按下時，浮動操作按鈕可以速撥按鈕的形式顯示三到六個相關操作。

如果需要超過六個操作，則應使用 FAB 以外的其他元件來呈現它們。

基本速撥按鈕

浮動操作按鈕可以顯示相關操作。

<SpeedDial
  ariaLabel="SpeedDial basic example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

<SpeedDial
  ariaLabel="SpeedDial basic example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

按下 Enter 鍵開始編輯

範例展示

受控速撥按鈕

元件的開啟狀態可以使用 `open` / `onOpen` / `onClose` 屬性來控制。

自訂關閉圖示

您可以使用 `SpeedDialIcon` 元件的 `icon` 和 `openIcon` 屬性，為關閉和開啟狀態提供替代圖示。

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

按下 Enter 鍵開始編輯

持續顯示操作工具提示

可以持續顯示 SpeedDialActions 工具提示，以便使用者不必長按即可在觸控裝置上看到工具提示。

為了示範目的，此處已在所有裝置上啟用，但在生產環境中，可以使用 `isTouch` 邏輯來有條件地設定屬性。

無障礙功能

ARIA

必要

您應該為速撥按鈕元件提供 `ariaLabel`。
您應該為每個速撥按鈕操作提供 `tooltipTitle`。

已提供

Fab 具有 `aria-haspopup`、`aria-expanded` 和 `aria-controls` 屬性。
速撥按鈕操作容器具有 `role="menu"` 和根據方向設定的 `aria-orientation`。
速撥按鈕操作具有 `role="menuitem"`，以及一個引用相關工具提示的 `aria-describedby` 屬性。

鍵盤

速撥按鈕在獲得焦點時開啟。
空格鍵和 Enter 鍵觸發選定的速撥按鈕操作，並切換速撥按鈕的開啟狀態。
游標鍵將焦點移動到下一個或上一個速撥按鈕操作。（請注意，任何游標方向最初都可用於開啟速撥按鈕。這為速撥按鈕的實際或感知方向啟用了預期行為，例如對於將速撥按鈕視為下拉選單的螢幕閱讀器使用者而言。）
Escape 鍵關閉速撥按鈕，如果焦點在速撥按鈕操作上，則將焦點返回到 Fab。

API

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