SpeedDial API
API documentation for the React SpeedDial component. Learn about the available props, and the CSS API.
Import
import SpeedDial from '@material-ui/core/SpeedDial';
// или
import { SpeedDial } from '@material-ui/core';Component name
The nameMuiSpeedDial can be used when providing default props or style overrides in the theme.Props
Props of the native component are also available.
| Имя | Тип | По-умолчанию | Описание |
|---|---|---|---|
| ariaLabel* | string | The aria-label of the button element. Also used to provide the id for the SpeedDial element and its children. | |
| children | node | SpeedDialActions to display when the SpeedDial is open. | |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| direction | 'down' | 'left' | 'right' | 'up' | 'up' | The direction the actions open relative to the floating action button. |
| FabProps | object | {} | Props applied to the Fab element. |
| hidden | bool | false | If true, the SpeedDial is hidden. |
| icon | node | The icon to display in the SpeedDial Fab. The SpeedDialIcon component provides a default Icon with animation. | |
| onClose | func | Callback fired when the component requests to be closed. Signature: function(event: object, reason: string) => voidevent: The event source of the callback. reason: Can be: "toggle", "blur", "mouseLeave", "escapeKeyDown". | |
| onOpen | func | Callback fired when the component requests to be open. Signature: function(event: object, reason: string) => voidevent: The event source of the callback. reason: Can be: "toggle", "focus", "mouseEnter". | |
| open | bool | false | Control the popup` open state. |
| openIcon | node | The icon to display in the SpeedDial Fab when the SpeedDial is open. | |
| sx | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| TransitionComponent | elementType | Zoom | Компонент, используемый в анимации сворачивания. Прочтите это руководство, чтобы узнать больше о требованиях к этому компоненту. |
| transitionDuration | number | { appear?: number, enter?: number, exit?: number } | { enter: duration.enteringScreen, exit: duration.leavingScreen, } | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
| TransitionProps | object | Свойства, передаваемые в анимируемый компонент. По умолчанию элемент основывается на компоненте Transition. |
The
ref is forwarded to the root element.CSS
| Rule name | Global class | Описание |
|---|---|---|
| root | .MuiSpeedDial-root | Styles applied to the root element. |
| fab | .MuiSpeedDial-fab | Styles applied to the Fab component. |
| directionUp | .MuiSpeedDial-directionUp | Styles applied to the root element if direction="up" |
| directionDown | .MuiSpeedDial-directionDown | Styles applied to the root element if direction="down" |
| directionLeft | .MuiSpeedDial-directionLeft | Styles applied to the root element if direction="left" |
| directionRight | .MuiSpeedDial-directionRight | Styles applied to the root element if direction="right" |
| actions | .MuiSpeedDial-actions | Styles applied to the actions (`children` wrapper) element. |
| actionsClosed | .MuiSpeedDial-actionsClosed | Styles applied to the actions (`children` wrapper) element if open={false}. |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.