Speed dial

Quando pressionado, um botão de ação flutuante pode exibir de três a seis ações relacionadas na forma de um acesso rápido.

Se mais de seis ações forem necessárias, algo diferente de um BAF deve ser usado para apresentá-las.

Acesso rápido simples

O botão de ação flutuante pode exibir ações relacionadas.

<SpeedDial
  ariaLabel="SpeedDial basic example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

<SpeedDial
  ariaLabel="SpeedDial basic example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

Press Enter to start editing

Área de exemplos

Ícone de fechamento customizado

Você pode fornecer um ícone alternativo para os estados de aberto e fechado usando as propriedades icon e openIcon do componente SpeedDialIcon.

Ícone de fechamento customizado

Você pode fornecer um ícone alternativo para os estados de aberto e fechado usando as propriedades icon e openIcon do componente SpeedDialIcon.

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

<SpeedDial
  ariaLabel="SpeedDial openIcon example"
  sx={{ position: 'absolute', bottom: 16, right: 16 }}
  icon={<SpeedDialIcon openIcon={<EditIcon />} />}
>
  {actions.map((action) => (
    <SpeedDialAction
      key={action.name}
      icon={action.icon}
      tooltipTitle={action.name}
    />
  ))}
</SpeedDial>

Press Enter to start editing

Dicas de ação fixadas

Os SpeedDialActions podem exibir dicas de forma fixadas para que os usuários não precisem manter as ações pressionadas para ver a dica nos dispositivos de toque.

A dica é ativada aqui em todos os dispositivos para fins de demonstração, mas em produção pode se usar uma lógica para definir condicionalmente a propriedade isTouch.

Acessibilidade

ARIA

Requerido

Você deve fornecer um ariaLabel para o componente de acesso rápido.
Você deve fornecer um tooltipTitle para cada ação do acesso rápido.

Fornecido

O Fab possui os atributos aria-haspopup, aria-expanded e aria-controls.
As ações de acesso rápido tem role="menu" e aria-direction definidos de acordo com a direção.
As ações de acesso rápido tem role="menuitem", e um atributo aria-describedby que faz referência à dica associada.

Teclado

O acesso rápido abre ao receber foco.
As teclas de Espaço e Enter ativam a ação selecionado no acesso rápido, e alteram o estado de aberto do acesso rápido.
As teclas do cursor movem o foco para a ação seguinte ou anterior do acesso rápido. (Note que qualquer direção do cursor pode ser usada inicialmente para abrir o acesso rápido. Isto permite o comportamento esperado para a orientação atual ou percebida do acesso rápido, por exemplo, para um leitor de tela que entende o acesso rápido como um menu suspenso.)
A tecla de Escape fecha o acesso rápido e se uma ação do acesso rápido foi focada, retorna o foco para o seu botão de ação flutuante.

Speed dial

Acesso rápido simples

Área de exemplos

Ícone de fechamento customizado

Ícone de fechamento customizado

Dicas de ação fixadas

Acessibilidade

ARIA

Requerido

Fornecido

Teclado

API