SpeedDialActionAPI
React SpeedDialAction 元件的 API 參考文件。了解此匯出模組的 props、CSS 和其他 API。
示範
匯入
import SpeedDialAction from '@mui/material/SpeedDialAction';
// or
import { SpeedDialAction } from '@mui/material';透過閱讀這篇關於最小化 bundle size 的指南，了解差異。
Tooltip 元件的 Props 也可使用。
| 名稱 | 類型 | 預設 | 描述 |
|---|---|---|---|
| classes | object | - | 覆寫或擴展套用至元件的樣式。 請參閱下方的CSS 類別 API 以了解更多詳細資訊。 |
| delay | number | 0 | 新增轉場延遲，以允許 SpeedDialActions 系列元件進行動畫。 |
| FabProps | object | {} | 套用至 |
| icon | node | - | 要在 SpeedDial Fab 中顯示的圖示。 |
| id | string | - | 此 prop 用於協助實作無障礙邏輯。如果您未提供此 prop。它會回退到隨機產生的 id。 |
| open | bool | - | 如果 |
| slotProps | { fab?: func | object, staticTooltip?: func | object, staticTooltipLabel?: func | object, tooltip?: func | object } | {} | 用於內部每個插槽的 props。 |
| slots | { fab?: elementType, staticTooltip?: elementType, staticTooltipLabel?: elementType, tooltip?: elementType } | {} | 用於內部每個插槽的元件。 |
| sx | Array<func | object | bool> | func | object | - | 允許定義系統覆寫以及額外 CSS 樣式的系統 prop。 請參閱 `sx` 頁面 以了解更多詳細資訊。 |
| TooltipClasses | object | - | 套用至 |
| tooltipOpen | bool | false | 在 SpeedDial 開啟時，使工具提示始終可見。 |
| tooltipPlacement | 'auto-end' | 'auto-start' | 'auto' | 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top' | 'left' | 工具提示的位置。 |
| tooltipTitle | node | - | 要在工具提示中顯示的標籤。 |
ref 會轉發到根元素。繼承
雖然上面未明確記錄，但 Tooltip 元件的 props 也可在 SpeedDialAction 中使用。您可以利用此優勢來定位巢狀元件。
主題預設 props
您可以使用 MuiSpeedDialAction 來變更此元件的預設 props 透過主題。
| 插槽名稱 | 類別名稱 | 預設元件 | 描述 |
|---|---|---|---|
| fab | .MuiSpeedDialAction-fab | Fab | 呈現 fab 的元件。 |
| tooltip | Tooltip | 呈現工具提示的元件。 | |
| staticTooltip | .MuiSpeedDialAction-staticTooltip | 'span' | 呈現靜態工具提示的元件。 |
| staticTooltipLabel | .MuiSpeedDialAction-staticTooltipLabel | 'span' | 呈現靜態工具提示標籤的元件。 |
這些類別名稱對於使用 CSS 設定樣式很有用。它們在觸發特定狀態時套用至元件的插槽。
| 類別名稱 | 規則名稱 | 描述 |
|---|---|---|
| .MuiSpeedDialAction-fabClosed | fabClosed | 如果 open={false}，則套用至 Fab 元件的樣式。 |
| .MuiSpeedDialAction-staticTooltipClosed | staticTooltipClosed | 如果 tooltipOpen={true} 且 open={false}，則套用至根元素的樣式。 |
| .MuiSpeedDialAction-tooltipPlacementLeft | tooltipPlacementLeft | 如果 tooltipOpen={true} 且 `tooltipPlacement="left"``，則套用至根元素的樣式 |
| .MuiSpeedDialAction-tooltipPlacementRight | tooltipPlacementRight | 如果 tooltipOpen={true} 且 `tooltipPlacement="right"``，則套用至根元素的樣式 |
您可以使用以下其中一種客製化選項來覆寫元件的樣式
- 使用全域類別名稱。
- 使用規則名稱作為自訂主題中元件的
styleOverrides屬性的一部分。
原始碼
如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。