SpeedDial API
Importação
import SpeedDial from '@mui/material/SpeedDial';
// ou
import { SpeedDial } from '@mui/material';Nome do componente
The nameMuiSpeedDial can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente nativo também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| 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 | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| 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 | Array<func | object | bool> | func | 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 | The component used for the transition. Follow this guide to learn more about the requirements for this component. |
| transitionDuration | number | { appear?: number, enter?: number, exit?: number } | { enter: theme.transitions.duration.enteringScreen, exit: theme.transitions.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 | Props applied to the transition element. By default, the element is based on this Transition component. |
O
ref é encaminhado para o elemento raiz.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiSpeedDial-root | Estilos aplicados ao elemento raiz. |
| fab | .MuiSpeedDial-fab | Estilos aplicados a 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 | Estilos aplicados a the actions (`children` wrapper) element. |
| actionsClosed | .MuiSpeedDial-actionsClosed | Estilos aplicados para the actions (`children` wrapper) element se open={false}. |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.