如何在项目中横向展开SpeedDial？可使用其他替代库

自定义Material UI SpeedDial方案 #

Material UI的SpeedDial默认是纵向展开，通过覆盖样式可以轻松改成横向布局：

1. 安装依赖：

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

2. 编写组件代码：

import React from 'react';
import SpeedDial from '@mui/material/SpeedDial';
import SpeedDialAction from '@mui/material/SpeedDialAction';
import CopyIcon from '@mui/icons-material/Copy';
import PrintIcon from '@mui/icons-material/Print';
import ShareIcon from '@mui/icons-material/Share';

const actions = [
  { icon: <CopyIcon />, name: '复制' },
  { icon: <PrintIcon />, name: '打印' },
  { icon: <ShareIcon />, name: '分享' },
];

const HorizontalSpeedDial = () => {
  return (
    <SpeedDial
      ariaLabel="横向快捷操作"
      sx={{
        // 覆盖默认纵向布局为横向
        '& .MuiSpeedDial-directionUp, & .MuiSpeedDial-directionDown': {
          flexDirection: 'row',
        },
        // 调整操作项间距
        '& .MuiSpeedDialAction-root': {
          margin: '0 8px',
        },
      }}
      icon={<ShareIcon />}
    >
      {actions.map((action) => (
        <SpeedDialAction
          key={action.name}
          icon={action.icon}
          tooltipTitle={action.name}
        />
      ))}
    </SpeedDial>
  );
};

export default HorizontalSpeedDial;

第三方库替代方案 #

如果不想自定义，以下库直接支持横向展开：

React-Motion-Speed-Dial #

轻量且支持自定义展开方向，配置direction为left/right即可实现横向效果：

• 安装：

npm install react-motion-speed-dial

• 使用示例：

import SpeedDial from 'react-motion-speed-dial';
import 'react-motion-speed-dial/dist/style.css';
import CopyIcon from '@mui/icons-material/Copy';
import PrintIcon from '@mui/icons-material/Print';
import ShareIcon from '@mui/icons-material/Share';

const HorizontalSpeedDial = () => {
  return (
    <SpeedDial
      direction="right"
      icon={<ShareIcon />}
    >
      <SpeedDial.Action icon={<CopyIcon />} label="复制" onClick={() => {}} />
      <SpeedDial.Action icon={<PrintIcon />} label="打印" onClick={() => {}} />
    </SpeedDial>
  );
};

React-Speed-Dial #

轻量库，直接通过direction属性设置横向布局：

• 安装：

npm install react-speed-dial

• 使用示例：

import { SpeedDial, SpeedDialItem } from 'react-speed-dial';
import CopyIcon from '@mui/icons-material/Copy';
import PrintIcon from '@mui/icons-material/Print';
import ShareIcon from '@mui/icons-material/Share';

const HorizontalSpeedDial = () => {
  return (
    <SpeedDial
      icon={<ShareIcon />}
      direction="horizontal"
    >
      <SpeedDialItem icon={<CopyIcon />} label="复制" onClick={() => {}} />
      <SpeedDialItem icon={<PrintIcon />} label="打印" onClick={() => {}} />
    </SpeedDial>
  );
};

内容的提问来源于stack exchange，提问作者Ghina Sharaf