React MUI Speed Dial 导航

React MUI 是一个提供完全加载的组件的UI库，将自己的设计系统带到我们的生产就绪组件中。MUI是一个用户界面库，提供预定义和可自定义的React组件，用于更快速和简便的Web开发，这些Material-UI组件基于Google的Material Design设计。

在本文中，我们将讨论React MUI Speed Dial导航。Speed Dial导航是以浮动操作按钮的形式呈现的，用于显示三到六个相关操作。

Speed Dial导航的变体：

基本Speed Dial: 默认的浮动操作按钮，可以显示相关操作。
受控Speed Dial: 在受控Speed Dial中，组件的打开状态通过open/onOpen/onClose属性控制。
自定义关闭图标: 在这个变体中，使用了一个替代图标来表示关闭和打开状态，使用组件的icon和openIcon属性。
持久动作工具提示: SpeedDialActions的工具提示可以持久地显示，以便在触摸设备上查看工具提示，无需长按操作按钮。
可访问性: 为了更好地实现可访问性，请确保使用ariaLabel和tooltipTitle属性，并使用键盘按键如Esc来关闭Speed Dial，或者使用Space和Enter键来触发选定的Speed Dial操作等。
API: API列表如下：
- <SpeedDial />
- <SpeedDialAction />
- <SpeedDialIcon />

语法:

<SpeedDial>
    ...
</SpeedDial>

创建React项目:

步骤1: 通过npm命令安装React模块来创建一个React应用程序。

npm create-react-app project name

步骤2： 创建完你的React项目后，进入文件夹执行不同的操作。

cd project name

步骤3： 创建ReactJS应用后，使用以下命令安装所需模块：

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

项目结构：

React MUI Speed Dial 导航

运行应用的步骤： 打开终端然后输入以下命令。

npm start

示例1： 下面的示例演示了React MUI基本速拨导航。

import { SpeedDial, SpeedDialAction,  
    SpeedDialIcon } from "@mui/material"; 
import * as React from "react"; 
  
import NoteAddIcon from "@mui/icons-material/NoteAdd"; 
import SendIcon from "@mui/icons-material/Send"; 
import MyLocationIcon from "@mui/icons-material/MyLocation"; 
import EditIcon from "@mui/icons-material/Edit"; 
  
const spdActions = [ 
    { icon: <NoteAddIcon />, name: "New" }, 
    { icon: <EditIcon />, name: "Edit" }, 
    { icon: <MyLocationIcon />, name: "Location" }, 
    { icon: <SendIcon />, name: "Send" }, 
]; 
  
function App() { 
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Speed dial navigation</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <SpeedDial 
                    ariaLabel="basic"
                    sx={{  
                        position: "absolute",  
                        bottom: 30,  
                        right: 20  
                    }} 
                    icon={<SpeedDialIcon />} 
                > 
                    {spdActions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                        /> 
                    ))} 
                </SpeedDial> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI Speed Dial 导航

示例2： 下面的示例演示了React MUI的持久性操作工具提示速拨导航。

import { SpeedDial, SpeedDialAction,  
    SpeedDialIcon } from "@mui/material"; 
import * as React from "react"; 
  
import NoteAddIcon from "@mui/icons-material/NoteAdd"; 
import SendIcon from "@mui/icons-material/Send"; 
import MyLocationIcon from "@mui/icons-material/MyLocation"; 
import EditIcon from "@mui/icons-material/Edit"; 
  
const spdActions = [ 
    { icon: <NoteAddIcon />, name: "New" }, 
    { icon: <EditIcon />, name: "Edit" }, 
    { icon: <MyLocationIcon />, name: "Location" }, 
    { icon: <SendIcon />, name: "Send" }, 
]; 
  
function App() { 
    const [buttonOpen, setButtonOpen] = React.useState(false); 
    const handleButtonOpen = () => setButtonOpen(true); 
    const handleButtonClose = () => setButtonOpen(false); 
  
    return ( 
        <center> 
            <div> 
                <h1 style={{ color: "green" }}> 
                    GeeksforGeeks 
                </h1> 
                <h2>React MUI Speed dial navigation</h2> 
            </div> 
            <div style={{ width: "50%" }}> 
                <SpeedDial 
                    ariaLabel="basic"
                    sx={{  
                        position: "absolute",  
                        bottom: 30,  
                        right: 20  
                    }} 
                    icon={<SpeedDialIcon />} 
                    onClose={handleButtonClose} 
                    onOpen={handleButtonOpen} 
                    open={buttonOpen} 
                > 
                    {spdActions.map((action) => ( 
                        <SpeedDialAction 
                            key={action.name} 
                            icon={action.icon} 
                            tooltipTitle={action.name} 
                            tooltipOpen 
                        /> 
                    ))} 
                </SpeedDial> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出：

React MUI Speed Dial 导航