SpeedDialAPI

React SpeedDial 元件的 API 參考文件。了解此匯出模組的屬性、CSS 和其他 API。

示範

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

Speed Dial

導入

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

閱讀這份關於最小化 bundle size 的指南，以了解差異。

屬性

原生元件的屬性也可用。

名稱	類型	預設	描述
ariaLabel*	string	-	按鈕元素的 aria-label。也用於為 `SpeedDial` 元素及其子元素提供 `id`。
children	node	-	當 SpeedDial 為 `open` 時要顯示的 SpeedDialActions。
classes	object	-	覆寫或擴展應用於元件的樣式。請參閱下方CSS 類別 API 以了解更多詳細資訊。
direction	'down' \| 'left' \| 'right' \| 'up'	'up'	相對於浮動操作按鈕，動作開啟的方向。
FabProps	object	{}	應用於 `Fab` 元素的屬性。
hidden	bool	false	如果為 `true`，則 SpeedDial 會隱藏。
icon	node	-	要在 SpeedDial Fab 中顯示的圖示。`SpeedDialIcon` 元件提供具有動畫效果的預設圖示。
onClose	func	-	當元件請求關閉時觸發的回呼。簽名：`function(event: object, reason: string) => void` `event` 回呼的事件來源。 `reason` 可以是：`"toggle"`、`"blur"`、`"mouseLeave"`、`"escapeKeyDown"`。
onOpen	func	-	當元件請求開啟時觸發的回呼。簽名：`function(event: object, reason: string) => void` `event` 回呼的事件來源。 `reason` 可以是：`"toggle"`、`"focus"`、`"mouseEnter"`。
open	bool	-	如果為 `true`，則會顯示元件。
openIcon	node	-	當 SpeedDial 開啟時，要在 SpeedDial Fab 中顯示的圖示。
slotProps	{ root?: func \| object, transition?: func \| object }	{}	用於內部每個插槽的屬性。
slots	{ root?: elementType, transition?: elementType }	{}	用於內部每個插槽的元件。
sx	Array<func \| object \| bool> \| func \| object	-	系統屬性，允許定義系統覆寫以及其他 CSS 樣式。請參閱 `sx` 頁面以了解更多詳細資訊。
TransitionComponent	elementType	Zoom * @deprecated 請改用 `slots.transition`。此屬性將在 v7 中移除。[如何遷移](/material-ui/migration/migrating-from-deprecated-apis/)	用於轉場效果的元件。請遵循本指南以了解有關此元件需求的更多資訊。已棄用－請改用 `slots.transition`。此屬性將在 v7 中移除。如何遷移
transitionDuration	number \| { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }	轉場效果的持續時間，以毫秒為單位。您可以為所有轉場效果指定單個逾時，也可以使用物件個別指定。
TransitionProps	object	-	應用於轉場效果元素的屬性。預設情況下，元素基於此 `Transition` 元件。已棄用－請改用 `slotProps.transition`。此屬性將在 v7 中移除。如何遷移

ref 會轉發到根元素。

主題預設屬性

您可以使用 MuiSpeedDial 透過主題變更此元件的預設屬性。

插槽

插槽名稱	類別名稱	預設元件	描述
root	.MuiSpeedDial-root	`'div'`	渲染根插槽的元件。
transition		`Zoom`	渲染轉場效果的元件。請遵循本指南以了解有關此元件需求的更多資訊。

CSS 類別

這些類別名稱對於使用 CSS 設定樣式很有用。當觸發特定狀態時，它們會應用於元件的插槽。

類別名稱	規則名稱	描述
.MuiSpeedDial-actions	actions	樣式應用於 actions (`children` 包裝器) 元素。
.MuiSpeedDial-actionsClosed	actionsClosed	如果 `open={false}`，則樣式應用於 actions (`children` 包裝器) 元素。
.MuiSpeedDial-directionDown	directionDown	如果 direction="down"，則樣式應用於根元素
.MuiSpeedDial-directionLeft	directionLeft	如果 direction="left"，則樣式應用於根元素
.MuiSpeedDial-directionRight	directionRight	如果 direction="right"，則樣式應用於根元素
.MuiSpeedDial-directionUp	directionUp	如果 direction="up"，則樣式應用於根元素
.MuiSpeedDial-fab	fab	樣式應用於 Fab 元件。

您可以使用以下自訂選項之一覆寫元件的樣式

使用全域類別名稱。
在自訂主題中使用規則名稱作為元件的 styleOverrides 屬性的一部分。

原始碼

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