极客教程React MUI MobileStepper API
Material-UI (MUI) 是React开发人员常用的开源UI库。它提供了许多预建的组件，这些组件的设计和外观都符合Google的Material Design准则。这使得开发人员可以轻松地创建外观精美、一致的用户界面，而无需从头开始设计和构建。
Material-UI (MUI) Mobile Stepper 是一个允许开发人员在移动应用程序中创建逐步进行的组件。这是许多移动应用程序的常见功能，如注册表单、结账流程和教程演练。
MUI Mobile Stepper组件 基于Material Design准则构建，这意味着它具有简洁和现代的外观。该组件完全可自定义，允许开发人员更改颜色、字体和其他样式属性以适应其品牌或设计。它还提供广泛的辅助功能，包括支持键盘导航和屏幕阅读器。
此外，MUI Mobile Stepper组件非常响应式，并且适配不同的屏幕尺寸和设备。这使得开发人员可以轻松创建在桌面和移动设备上都看起来出色的用户界面。
导入MobileStepper模块：
import MobileStepper from '@mui/material/MobileStepper';
// or
import { MobileStepper } from '@mui/material';
属性列表：
- steps： 定义步骤的总数。
- activeStep： 定义当前步骤的索引，默认为0。
- backButton： 后退按钮元素，可以是按钮或图标，用于返回上一个步骤。
- classes： 覆盖或扩展应用于组件的样式。
- LinearProgressProps： 应用于LinearProgress组件的属性。
- nextButton： 下一个按钮元素，可以是按钮或图标，用于进入下一个步骤。
- position： 设置步进器的位置。可选值为bottom、static和top，默认为bottom。
- sx： 用于添加自定义CSS样式的属性。
- variant： 提供不同的变体，如dots、progress和text。默认为dots。
CSS规则：
-
root(.MuiMobileStepper-root)： 应用于根元素的样式。
- positionBottom(.MuiMobileStepper-positionBottom)： 如果position属性设置为“bottom”，则应用于根元素的样式。
- positionTop(.MuiMobileStepper-positionTop)： 如果position属性设置为“top”，则应用于根元素的样式。
- positionStatic(.MuiMobileStepper-positionStatic)： 如果position属性设置为“Static”，则应用于根元素的样式。
- dots(.MuiMobileStepper-dots)： 如果variant属性设置为“dots”，则应用于点容器的样式。
- dot(.MuiMobileStepper-dot)： 如果variant属性设置为“dots”，则应用于每个点的样式。
- dotActive(.MuiMobileStepper-dotActive)： 如果variant属性设置为“dots”且该点为活动步骤，则应用于点的样式。
-
progress(.MuiMobileStepper-progress)： 如果variant属性设置为“progress”，则应用于线性进度组件的样式。
继承：
-
MobileStepper上也可以使用 Paper 组件的属性，用于定位嵌套组件。
方法：
-
创建一个React项目并安装React MUI模块。
创建React项目：
步骤1： 创建一个React应用。使用以下命令。
npx create-react-app project_name
步骤2： 移动到文件夹执行不同的操作。
cd project_name
步骤3： 安装MUI模块。
npm install @mui/material @emotion/react
npm install @emotion/styled @mui/icons-material
项目结构：
示例1: 我们正在创建一个显示React MUI MobileStepper API的用户界面。
文件名: 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>
</>
);
}
输出: 现在打开浏览器并访问 http://localhost:3000/，你会看到以下输出:
示例2： 我们正在创建一个UI，展示React MUI MobileStepper API的不同变体。
文件名： 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>
);
}
输出： 现在打开你的浏览器，然后访问http://localhost:3000/，你将看到以下输出。
引用： https://mui.com/material-ui/api/mobile-stepper/