SpeedDialAPI

React SpeedDial 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

有关此 React 组件的用法示例和详细信息，请访问组件演示页面

Speed Dial

导入

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

通过阅读关于最小化 bundle size 的指南，了解它们之间的区别。

Props

原生组件的 Props 也可用。

名称	类型	默认值	描述
ariaLabel*	string	-	按钮元素的 aria-label。也用于为 `SpeedDial` 元素及其子元素提供 `id`。
children	node	-	当 SpeedDial 为 `open` 状态时要显示的 SpeedDialActions。
classes	object	-	覆盖或扩展应用于组件的样式。有关更多详细信息，请参见下方的 CSS 类 API。
direction	'down' \| 'left' \| 'right' \| 'up'	'up'	操作相对于浮动操作按钮打开的方向。
FabProps	object	{}	应用于 `Fab` 元素的 Props。
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 }	{}	用于内部每个 slot 的 props。
slots	{ root?: elementType, transition?: elementType }	{}	用于内部每个 slot 的组件。
sx	Array<func \| object \| bool> \| func \| object	-	允许定义系统覆盖以及其他 CSS 样式的系统 prop。有关更多详细信息，请参见 `sx` 页面。
TransitionComponent	elementType	Zoom * @deprecated 请改用 `slots.transition`。此 prop 将在 v7 中移除。 [如何迁移](/material-ui/migration/migrating-from-deprecated-apis/)	用于过渡的组件。请遵循本指南以了解有关此组件要求的更多信息。已弃用－请改用 `slots.transition`。此 prop 将在 v7 中移除。如何迁移
transitionDuration	number \| { appear?: number, enter?: number, exit?: number }	{ enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.duration.leavingScreen, }	过渡的持续时间，以毫秒为单位。您可以为所有过渡指定单个超时，也可以使用对象单独指定。
TransitionProps	object	-	应用于过渡元素的 Props。默认情况下，该元素基于此 `Transition` 组件。已弃用－请改用 `slotProps.transition`。此 prop 将在 v7 中移除。如何迁移

ref 被转发到根元素。

主题默认 Props

您可以使用 MuiSpeedDial 通过主题更改此组件的默认 props。

Slots

Slot 名称	类名	默认组件	描述
root	.MuiSpeedDial-root	`'div'`	渲染 root slot 的组件。
transition		`Zoom`	渲染过渡效果的组件。请遵循本指南以了解有关此组件要求的更多信息。

CSS 类

这些类名对于使用 CSS 进行样式设置很有用。当触发特定状态时，它们将应用于组件的 slots。

类名	规则名称	描述
.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 属性的一部分。

源代码

如果您在此页面中找不到所需信息，请考虑查看组件的实现以获取更多详细信息。