Material-UI (MUI) is a popular open-source UI library for React developers. It provides a wide range of pre-built components that are designed to look and feel like Google's Material Design guidelines. This makes it easy for developers to create visually appealing and consistent user interfaces without having to design and build everything from scratch.
Material-UI (MUI) Mobile Stepper is a component that allows developers to create a step-by-step process in a mobile application. This is a common feature in many mobile apps, such as registration forms, checkout processes, and tutorial walkthroughs.
The MUI Mobile Stepper component is built on top of Material Design guidelines, which means it has a clean and modern look and feels. The component is fully customizable, allowing developers to change the colors, typography, and other styling properties to match their brand or design. It also provides a wide range of accessibility features, including support for keyboard navigation and screen readers.
In addition, the MUI Mobile Stepper component is highly responsive and adapts to different screen sizes and devices. This makes it easy for developers to create user interfaces that look great on both desktop and mobile devices.
Import MobileStepper Module:
import MobileStepper from '@mui/material/MobileStepper';
// or
import { MobileStepper } from '@mui/material';
Props list:
- steps: It defines the total number of steps.
- activeStep: It defines the current step of the stepper, by default it points to 0.
- backButton: It is a back button element, it can be a button or just an icon. It is used to go back to the previous stepper.
- classes: It is to override or extend the styles applied to the components.
- LinearProgressProps: In this, the props are applied to the LinearProgress element.
- nextButton: It is a next button element, it can be a button or just an icon. It is used to go to the next stepper.
- position: It sets the position of the stepper. Its different types are bottom, static, and top, By default, it's at the bottom.
- sx: This prop is used to add custom CSS styles.
- variant: It provides different variants such as dots, progress, and text. By default, it's set to dots.
CSS Rules:
- root(.MuiMobileStepper-root): The style applied to the root element.
- positionBottom (.MuiMobileStepper-positionBottom): Styles are applied to the root element if the position prop is set to "bottom".
- positionTop (.MuiMobileStepper-positionTop): Styles are applied to the root element if the position prop is set to "top".
- positionStatic( .MuiMobileStepper-positionStatic): Styles are applied to the root element if the position prop is set to "Static".
- dots (.MuiMobileStepper-dots): Styles are applied to the dots container if the variant prop is set to "dots".
- dot (.MuiMobileStepper-dot): Styles are applied to each dot if the variant prop is set to "dots".
- dotActive (.MuiMobileStepper-dotActive): Styles are applied to the dots if the variant prop is set to "dots" and this is the active step.
- progress(.MuiMobileStepper-progress): Styles are applied to the linear progress component if the variant prop is set to "progress".
Inheritance:
- The props of the Paper component are also available on MobileStepper. It can be used to target nested components.
Approach: Create a React project and install React MUI module.
Creating React Project:
Step 1: Create a react app. Use the command below.
npx create-react-app project_name
Step 2: Move into the folder to perform different operations.
cd project_name
Step 3: Installing MUI modules.
npm install @mui/material @emotion/react npm install @emotion/styled @mui/icons-material
Project Structure:
Example 1: We are creating a UI that shows React MUI MobileStepper API.
Filename: App.js
import * as React from 'react';
import Box from '@mui/material/Box';
import { useTheme } from '@mui/material/styles';
import MobileStepper from '@mui/material/MobileStepper';
import Paper from '@mui/material/Paper';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';
import KeyboardArrowLeft from
'@mui/icons-material/KeyboardArrowLeft';
import KeyboardArrowRight from
'@mui/icons-material/KeyboardArrowRight';
const steps = [
{
label: 'Master Java Programming',
description:
`Become a master in JAVA programming
to start a rewarding career. This
course will help you master basic
JAVA concepts such as Variables,
Data Types, I/O to Advanced Java
Collections concepts and Algorithms.
Join the learning wave today!`,
},
{
label: 'Master C++ Programming',
description:
`Start your journey of CPP Programming
Language and master the C++ programming
skills from basics to advanced. Made by
experts, this course is a complete
package of videos, notes & contests
from "Hello World" to STL libraries &
algorithms.`,
},
{
label: 'Python Programming Foundation',
description:
`A beginner-friendly course designed
to help start learning Python language
from scratch. Learn Python basics,
Variables & Data types, Input & Output,
Operators, and more as you build your
python foundation real strong with us!`,
},
];
export default function TextMobileStepper() {
const theme = useTheme();
const [activeStep, setActiveStep]
= React.useState(0);
const maxSteps = steps.length;
const handleNext = () => {setActiveStep(
(prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {setActiveStep(
(prevActiveStep) => prevActiveStep - 1);
};
return (
<>
<h1 style={{ color: "green" }}>
GeeksForGeeks
</h1>
<Box sx={{
maxWidth: 400,
padding: 3,
border: 1
}}>
<Paper
square
elevation={3}
sx={{
display: 'flex',
alignItems: 'center',
height: 50,
pl: 2,
bgcolor: 'success.main',
color: 'white'
}}
>
<Typography>
{steps[activeStep].label}
</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: '100%', boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="text"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === 'rtl' ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button size="small" onClick={handleBack}
disabled={activeStep === 0}>
{theme.direction === 'rtl' ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
</>
);
}
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Example 2: We are creating a UI that shows React MUI MobileStepper API with different variants.
Filename: App.js
import * as React from "react";
import Box from "@mui/material/Box";
import { useTheme } from "@mui/material/styles";
import MobileStepper from "@mui/material/MobileStepper";
import Paper from "@mui/material/Paper";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
const steps = [
{
label: "Master Java Programming",
description:
`Become a master in JAVA programming
to start a rewarding career. This
course will help you master basic
JAVA concepts such as Variables, Data
Types, I/O to Advanced Java Collections
concepts and Algorithms. Join the
learning wave today!`,
},
{
label: "Master C++ Programming",
description:
`Start your journey of CPP Programming
Language and master the C++ programming
skills from basics to advanced. Made by
experts, this course is a complete
package of videos, notes & contests from
"Hello World" to STL libraries & algorithms.`,
},
{
label: "Python Programming Foundation",
description:
`A beginner-friendly course designed to
help start learning Python language from
scratch. Learn Python basics, Variables
& Data types, Input & Output, Operators,
and more as you build your python
foundation real strong with us!`,
},
];
export default function TextMobileStepper() {
const theme = useTheme();
const [activeStep, setActiveStep] = React.useState(0);
const maxSteps = steps.length;
const handleNext = () => {setActiveStep(
(prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {setActiveStep(
(prevActiveStep) => prevActiveStep - 1);
};
return (
<div style={{ display: "flex", border: 3 }}>
<Box sx={{
maxWidth: 400,
padding: 3,
border: 1
}}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}
</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="progress"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
<Box sx={{ maxWidth: 400, padding: 3, border: 1 }}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}
</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="dots"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
<Box sx={{ maxWidth: 400, padding: 3, border: 1 }}>
<Paper
square
elevation={3}
sx={{
display: "flex",
alignItems: "center",
height: 50,
pl: 2,
bgcolor: "success.main",
color: "white",
}}
>
<Typography>{steps[activeStep].label}</Typography>
</Paper>
<Box sx={{
height: 255, maxWidth: 400,
width: "100%", boxShadow: 1
}}>
{steps[activeStep].description}
</Box>
<MobileStepper
variant="text"
steps={maxSteps}
position="static"
activeStep={activeStep}
nextButton={
<Button
size="small"
onClick={handleNext}
disabled={activeStep === maxSteps - 1}
>
Next
{theme.direction === "rtl" ? (
<KeyboardArrowLeft />
) : (
<KeyboardArrowRight />
)}
</Button>
}
backButton={
<Button
size="small"
onClick={handleBack}
disabled={activeStep === 0}
>
{theme.direction === "rtl" ? (
<KeyboardArrowRight />
) : (
<KeyboardArrowLeft />
)}
Back
</Button>
}
/>
</Box>
</div>
);
}
Output: Now open your browser and go to http://localhost:3000/, you will see the following output.
