Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI SpeedDialIcon API. The SpeedDials are used to display three to six actions immediately. SpeedDialIcon is the icon used to display the SpeedDial. The API provides a lot of functionality and we will learn to implement them.
Import SpeedDialIcon API:
import SpeedDialIcon from '@mui/material/SpeedDialIcon';
// or
import { SpeedDialIcon } from '@mui/material';
Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.
- classes: This overrides the existing styles or adds new styles to the component.
- sx: The system prop allows defining system overrides as well as additional CSS styles.
- icon: It is the label displayed in the step icon.
- openIcon: It is the icon to display when the SpeedDial is open.
CSS Rules:
- root(.MuiSpeedDialIcon-root): It is the style applied to the root element.
- icon(.MuiSpeedDialIcon-icon): It is the style applied to the icon component.
- iconOpen(.MuiSpeedDialIcon-iconOpen): It is the style applied to the icon component if open is set to true.
- iconWithOpenIconOpen(.MuiSpeedDialIcon-iconWithOpenIconOpen): It is the style applied to the icon when an openIcon is provided and if open is set to true.
- openIcon(.MuiSpeedDialIcon-openIcon): It is the style applied to the openIcon if provided.
- openIconOpen(.MuiSpeedDialIcon-openIconOpen): It is the style applied to the openIcon if provided and if open is set to true.
Syntax: Create SpeedDialIcon inside SpeedDial as follows:
<SpeedDial
sx={{
position: "absolute",
bottom: 16, right: 16
}}
icon={<SpeedDialIcon />}
>
</SpeedDial>
Creating React app and Installing dependencies:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react @emotion/styled @mui/lab @mui/icons-material
Project Structure:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have SpeedDialIcon in the SpeedDial.
App.js
Javascript
import "./App.css"; import * as React from "react"; import Box from "@mui/material/Box"; import SpeedDial from "@mui/material/SpeedDial"; import SpeedDialIcon from "@mui/material/SpeedDialIcon"; import SpeedDialAction from "@mui/material/SpeedDialAction"; import FileCopyIcon from "@mui/icons-material/FileCopyOutlined"; import SaveIcon from "@mui/icons-material/Save"; import PrintIcon from "@mui/icons-material/Print"; import ShareIcon from "@mui/icons-material/Share"; import { Css, Html, Javascript } from "@mui/icons-material"; const actions = [ { icon: <Html />, name: "HTML" }, { icon: <Css />, name: "CSS" }, { icon: <Javascript />, name: "Javascript" }, ]; function App() { return ( <div className="App"> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong> React MUI SpeedDialIcon API </strong> </div> <br /> <Box sx={{ height: 320, transform: "translateZ(0px)", flexGrow: 1 }}> <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> </Box> </div> ); } export default App; |
Output:
Example 2: In the following example, we have customized the SpeedDialIcon openIcon to the right arrow icon.
App.js
Javascript
import "./App.css"; import * as React from "react"; import Box from "@mui/material/Box"; import SpeedDial from "@mui/material/SpeedDial"; import SpeedDialIcon from "@mui/material/SpeedDialIcon"; import SpeedDialAction from "@mui/material/SpeedDialAction"; import { Css, Html, Javascript, ArrowForward, Language, } from "@mui/icons-material"; const actions = [ { icon: <Html />, name: "HTML" }, { icon: <Css />, name: "CSS" }, { icon: <Javascript />, name: "Javascript" }, ]; function App() { return ( <div className="App"> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong>React MUI SpeedDialIcon API</strong> </div> <br /> <Box sx={{ height: 320, transform: "translateZ(0px)", flexGrow: 1, }} > <SpeedDial ariaLabel="SpeedDial basic example" sx={{ position: "absolute", left: 16, }} icon={ <SpeedDialIcon icon={<Language />} openIcon={<ArrowForward />} /> } direction="right" > {actions.map((action) => ( <SpeedDialAction key={action.name} icon={action.icon} tooltipTitle={action.name} /> ))} </SpeedDial> </Box> </div> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/api/speed-dial-icon/
