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 classes 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 } | {} | 用于内部每个 slot 的 props。 |
| slots | { fab?: elementType, staticTooltip?: elementType, staticTooltipLabel?: elementType, tooltip?: elementType } | {} | 用于内部每个 slot 的组件。 |
| sx | Array<func | object | bool> | func | object | - | 允许定义系统 overrides 以及其他 CSS 样式的系统 prop。 有关更多详细信息，请参阅 `sx` 页面。 |
| TooltipClasses | object | - | 应用于 |
| tooltipOpen | bool | false | 使 tooltip 在 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' | Tooltip 的位置。 |
| tooltipTitle | node | - | 要在 tooltip 中显示的标签。 |
ref 被转发到根元素。继承
虽然上面没有明确文档说明，但 Tooltip 组件的 props 也可在 SpeedDialAction 中使用。 您可以利用这一点来定位嵌套组件。
主题默认 props
您可以使用 MuiSpeedDialAction 通过主题更改此组件的默认 props。
| Slot 名称 | Class 名称 | 默认组件 | 描述 |
|---|---|---|---|
| fab | .MuiSpeedDialAction-fab | Fab | 渲染 fab 的组件。 |
| tooltip | Tooltip | 渲染 tooltip 的组件。 | |
| staticTooltip | .MuiSpeedDialAction-staticTooltip | 'span' | 渲染静态 tooltip 的组件。 |
| staticTooltipLabel | .MuiSpeedDialAction-staticTooltipLabel | 'span' | 渲染静态 tooltip 标签的组件。 |
这些 class 名称对于使用 CSS 设置样式很有用。 当特定状态被触发时，它们会被应用到组件的 slots。
| Class 名称 | 规则名称 | 描述 |
|---|---|---|
| .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"``，则应用于根元素的样式 |
您可以使用以下自定义选项之一来覆盖组件的样式
- 使用全局 class 名称。
- 使用规则名称作为自定义主题中组件的
styleOverrides属性的一部分。
源代码
如果您在此页面中没有找到所需的信息，请考虑查看组件的实现以获取更多详细信息。