Pular para o conteúdo
Ajude a traduzir esta página

SpeedDialAction API

Documentação da API para o componente React SpeedDialAction . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import SpeedDialAction from '@mui/material/SpeedDialAction';
// ou
import { SpeedDialAction } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiSpeedDialAction can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente Tooltip também estão disponíveis.

NomeTipoPadrãoDescrição
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
delaynumber0
Adds a transition delay, to allow a series of SpeedDialActions to be animated.
FabPropsobject{}
Props applied to the Fab component.
iconnode
The Icon to display in the SpeedDial Fab.
idstring
This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id.
openboolfalse
Control the popup` open state.
sxArray<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.
TooltipClassesobject
classes prop applied to the Tooltip element.
tooltipOpenboolfalse
Make the tooltip always visible when the SpeedDial is open.
tooltipPlacement'bottom-end'
| 'bottom-start'
| 'bottom'
| 'left-end'
| 'left-start'
| 'left'
| 'right-end'
| 'right-start'
| 'right'
| 'top-end'
| 'top-start'
| 'top'		'left'
Placement of the tooltip.
tooltipTitlenode
Label to display in the tooltip.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente Tooltip também estão disponíveis em SpeedDialAction. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
fab.MuiSpeedDialAction-fabEstilos aplicados a the Fab component.
fabClosed.MuiSpeedDialAction-fabClosedEstilos aplicados para the Fab component se open={false}.
staticTooltip.MuiSpeedDialAction-staticTooltipEstilos aplicados para o elemento raiz se tooltipOpen={true}.
staticTooltipClosed.MuiSpeedDialAction-staticTooltipClosedEstilos aplicados para o elemento raiz se tooltipOpen={true} and open={false}.
staticTooltipLabel.MuiSpeedDialAction-staticTooltipLabelEstilos aplicados para the static tooltip label se tooltipOpen={true}.
tooltipPlacementLeft.MuiSpeedDialAction-tooltipPlacementLeftStyles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="left"``
tooltipPlacementRight.MuiSpeedDialAction-tooltipPlacementRightStyles applied to the root element if `tooltipOpen={true}` and `tooltipPlacement="right"``

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações