Speed Dial

按下浮动操作按钮时，可以 Speed Dial 的形式显示三到六个相关操作。

如果需要超过六个操作，则应使用 FAB 以外的其他方式来呈现它们。

基本 speed dial

浮动操作按钮可以显示相关操作。

<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>

按 Enter 开始编辑

Playground

受控 speed dial

组件的打开状态可以通过 open/onOpen/onClose 属性来控制。

自定义关闭图标

您可以使用 SpeedDialIcon 组件的 icon 和 openIcon 属性为关闭和打开状态提供备用图标。

<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>

按 Enter 开始编辑

持久操作工具提示

SpeedDialActions 工具提示可以持久显示，以便用户不必长按即可在触摸设备上看到工具提示。

为了演示目的，此处在所有设备上都启用了它，但在生产环境中，可以使用 isTouch 逻辑来有条件地设置该属性。

无障碍访问

ARIA

必需

您应该为 speed dial 组件提供 ariaLabel。
您应该为每个 speed dial 操作提供 tooltipTitle。

已提供

Fab 具有 aria-haspopup、aria-expanded 和 aria-controls 属性。
speed dial 操作容器根据方向设置了 role="menu" 和 aria-orientation。
speed dial 操作具有 role="menuitem" 和 aria-describedby 属性，该属性引用关联的工具提示。

键盘

speed dial 在获得焦点时打开。
空格键和 Enter 键触发选定的 speed dial 操作，并切换 speed dial 打开状态。
光标键将焦点移动到下一个或上一个 speed dial 操作。（请注意，最初可以使用任何光标方向来打开 speed dial。这为 speed dial 的实际或感知方向启用了预期行为，例如对于将 speed dial 视为下拉菜单的屏幕阅读器用户。）
Escape 键关闭 speed dial，如果 speed dial 操作已获得焦点，则将焦点返回到 Fab。

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。