Speed Dial 组件是 Material UI 提供的一个浮动操作按钮，允许用户快速访问一组相关的操作。它通常用于移动应用程序中，以便在用户界面中节省空间，同时提供便利的操作选项。本文将详细介绍 Speed Dial 组件的使用，包括其属性、方法、示例代码以及与其他组件的结合使用。

1. 什么是 Speed Dial？

Speed Dial 是一种 UI 组件，通常呈现为一个浮动按钮，点击后会展开出一系列的操作选项。这种设计使得界面更加整洁，同时又能提供多种功能。

2. 安装 Material UI

确保你的项目中已经安装了 Material UI。如果尚未安装，请使用以下命令：

npm install @mui/material @emotion/react @emotion/styled

3. 基本用法

示例：基础的 Speed Dial

import React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function BasicSpeedDial() {
  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <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}
          onClick={() => alert(action.name)}
        />
      ))}
    </SpeedDial>
  );
}

export default BasicSpeedDial;

示例解析：

• SpeedDial: 组件的主要容器。
• ariaLabel: 用于无障碍访问的标签。
• sx: 用于自定义样式，这里设置了浮动按钮的位置。
• icon: Speed Dial 的主图标。
• SpeedDialAction: 每个具体的操作项，包含图标和名称。

4. Speed Dial 的属性

常用属性

• ariaLabel: 用于无障碍访问，标识 Speed Dial 的用途。
• icon: 设置 Speed Dial 的主图标。
• onClose: 当 Speed Dial 关闭时调用的回调函数。
• onOpen: 当 Speed Dial 打开时调用的回调函数。
• open: 控制 Speed Dial 是否展开的布尔值。
• direction: 控制展开方向，值可以是 "up"、"down"、"left" 或 "right"。
• sx: 自定义样式。

5. Speed Dial 与其他组件结合使用

示例：结合 Tooltip 使用

import React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import Tooltip from '@mui/material/Tooltip';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function SpeedDialWithTooltip() {
  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <SpeedDial
      ariaLabel="SpeedDial with Tooltip"
      sx={{ position: 'absolute', bottom: 16, right: 16 }}
      icon={<SpeedDialIcon />}
    >
      {actions.map((action) => (
        <Tooltip title={action.name} key={action.name}>
          <SpeedDialAction
            icon={action.icon}
            onClick={() => alert(action.name)}
          />
        </Tooltip>
      ))}
    </SpeedDial>
  );
}

export default SpeedDialWithTooltip;

示例解析：

• 使用 Tooltip 组件为每个操作添加悬浮提示。

6. 控制 Speed Dial 的状态

示例：使用状态控制 Speed Dial 展开

import React, { useState } from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function ControlledSpeedDial() {
  const [open, setOpen] = useState(false);
  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <>
      <Button variant="outlined" onClick={() => setOpen(!open)}>
        Toggle Speed Dial
      </Button>
      <SpeedDial
        ariaLabel="Controlled SpeedDial"
        sx={{ position: 'absolute', bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
        onClose={() => setOpen(false)}
        onOpen={() => setOpen(true)}
        open={open}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => alert(action.name)}
          />
        ))}
      </SpeedDial>
    </>
  );
}

export default ControlledSpeedDial;

示例解析：

• 使用 Button 控制 Speed Dial 的展开和关闭状态。

7. 自定义样式

示例：自定义 Speed Dial 样式

import React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import { styled } from '@mui/material/styles';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

const CustomSpeedDial = styled(SpeedDial)(({ theme }) => ({
  '& .MuiSpeedDial-fab': {
    backgroundColor: theme.palette.primary.main,
    '&:hover': {
      backgroundColor: theme.palette.primary.dark,
    },
  },
}));

function StyledSpeedDial() {
  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <CustomSpeedDial
      ariaLabel="Styled SpeedDial"
      sx={{ position: 'absolute', bottom: 16, right: 16 }}
      icon={<SpeedDialIcon />}
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
          onClick={() => alert(action.name)}
        />
      ))}
    </CustomSpeedDial>
  );
}

export default StyledSpeedDial;

示例解析：

• 使用 styled API 自定义 Speed Dial 的样式。

8. Speed Dial 的动画效果

示例：使用动画效果

import React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import Grow from '@mui/material/Grow';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function AnimatedSpeedDial() {
  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <SpeedDial
      ariaLabel="Animated SpeedDial"
      sx={{ position: 'absolute', bottom: 16, right: 16 }}
      icon={<SpeedDialIcon />}
    >
      {actions.map((action) => (
        <Grow in timeout={500} key={action.name}>
          <SpeedDialAction
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => alert(action.name)}
          />
        </Grow>
      ))}
    </SpeedDial>
  );
}

export default AnimatedSpeedDial;

示例解析：

• 使用 Grow 组件为 Speed Dial 的操作项添加动画效果。

9. 结合其他组件

示例：与对话框结合使用

import React, { useState } from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent

 from '@mui/material/DialogContent';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/Delete';

function SpeedDialWithDialog() {
  const [open, setOpen] = useState(false);
  const [dialogContent, setDialogContent] = useState('');
  
  const handleClickOpen = (action) => {
    setDialogContent(action);
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  const actions = [
    { icon: <AddIcon />, name: 'Add' },
    { icon: <EditIcon />, name: 'Edit' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];

  return (
    <>
      <SpeedDial
        ariaLabel="SpeedDial with Dialog"
        sx={{ position: 'absolute', bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            onClick={() => handleClickOpen(action.name)}
          />
        ))}
      </SpeedDial>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>{dialogContent}</DialogTitle>
        <DialogContent>
          <p>You clicked {dialogContent}!</p>
          <Button onClick={handleClose} color="primary">
            Close
          </Button>
        </DialogContent>
      </Dialog>
    </>
  );
}

export default SpeedDialWithDialog;

示例解析：

• 点击 Speed Dial 的操作项会打开对话框，显示所选操作的内容。

10. 结论

在本文中，我们详细探讨了 Material UI 中的 Speed Dial 组件，包括其基本用法、属性、与其他组件（如 Tooltip、Dialog）的结合使用以及自定义样式。Speed Dial 是一个非常实用的组件，能够提升用户界面的交互性和美观性。

希望这些示例能够帮助你更好地理解和使用 Speed Dial 组件，增强你的应用用户体验。如果你对 Material UI 的其他组件感兴趣，欢迎继续关注我们的系列文章。