极客教程React MUI Stepper Navigation
React MUI（材料设计用户界面）是一个提供完全加载的组件的UI库，将我们自己的设计系统带到我们的生产级组件中。MUI是一个用户界面库，为更快捷和简易的Web开发提供了预定义和可定制的React组件，这些Material-UI组件基于Google的Material Design。
在本文中，我们将讨论React MUI Stepper Navigation。Stepper组件表示通过编号的步骤的进度。它与向导类似的工作流程相同。在保存一步之后，它还可以显示瞬态反馈消息。
Stepper变体：
- 水平步进器： 水平步进器用于在每个步骤的内容取决于前一步的情况下。
- 线性： 线性步进器用于按照顺序完成步骤，可以通过将当前步骤索引（从零开始）作为activeStep属性来控制。
- 非线性： 非线性步进器用于在任何位置输入多步流程。
- 替代标签： 通过alternativeLabel属性的帮助，可以将标签放置在步进器图标下方。
- 错误步骤： 如果在导航到不同步骤时出现错误，可以使用错误步骤。
- 自定义水平步进器：
- 水平步进导航： 可以根据需求进行自定义。
- 性能： 为了更好的步进效果，我们可以使用 unmountOnExit 属性来使内容对搜索引擎可用或在模态框中渲染昂贵的组件。
- 垂直步进导航： 当需要狭窄的屏幕大小(如移动屏幕)时使用。
- 性能： 为了更好的步进效果，我们可以使用 unmountOnExit 属性来使内容对搜索引擎可用或在模态框中渲染昂贵的组件。
- 移动步进导航： 是紧凑的，适用于移动屏幕。
- 文本： 在移动步进导航中，当前步骤和总步骤数以文字形式显示。
- 带走马灯效果的文本：
-
圆点： 如果步骤的数量较小，可以显示出圆点。
- 进度： 如果步骤的数量较多，可以使用进度条。
API： API 列表如下：
<MobileStepper />:此 API 用于移动屏幕导航。<Step />:此 API 用于添加步骤组件。<StepButton />:此 API 用于添加步骤按钮。<StepConnector />:此 API 用于添加步骤连接器。<StepContent />:这个API用于向步进器添加内容。<StepIcon />:这个API用于添加步进器图标。<StepLabel />:这个API用于添加步进器标签。<Stepper />:这个API用于步进器导航组件。
语法:
<Stepper>
...
</Stepper>
创建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
项目结构：
运行应用的步骤： 打开终端并输入以下命令。
npm start
示例1： 下面的示例演示了React MUI的线性水平步进导航。
import * as React from "react";
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import { Box } from "@mui/material";
const steps = ['Go to geeksforgeeks.org',
'Select Practice from navbar', 'Do the Problem of the Day'];
function App() {
const [activeStepCount, setActiveStepCount] = React.useState(0);
const [skip, setSkip] = React.useState(new Set());
const optionalStep = (step) => {
return step === 1;
};
const skipStep = (step) => {
return skip.has(step);
};
const handleStepNext = () => {
let newSkipped = skip;
if (skipStep(activeStepCount)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStepCount);
}
setActiveStepCount((prevActiveStep) => prevActiveStep + 1);
setSkip(newSkipped);
};
const handleStepBack = () => {
setActiveStepCount((prevActiveStep) => prevActiveStep - 1);
};
const handleStepSkip = () => {
setActiveStepCount((prevActiveStep) => prevActiveStep + 1);
setSkip((prevSkipped) => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStepCount);
return newSkipped;
});
};
const handleStepReset = () => {
setActiveStepCount(0);
};
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Stepper navigation</h2>
</div>
<div style={{ width: "50%" }}>
<Stepper activeStep={activeStepCount}>
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (optionalStep(index)) {
labelProps.optional = (
<h3 variant="body1">Optional</h3>
);
}
if (skipStep(index)) {
stepProps.completed = false;
}
return (
<Step key={label} {...stepProps}>
<StepLabel {...labelProps}>
{label}
</StepLabel>
</Step>
);
})}
</Stepper>
{activeStepCount === steps.length ? (
<div>
<h3 sx={{ mt: 4, mb: 2 }}>
All done!
</h3>
<Box sx={{ display: 'flex',
flexDirection: 'row', pt: 4 }}>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleStepReset}>Reset</Button>
</Box>
</div>
) : (
<div>
<h3 sx={{ mt: 2, mb: 1 }}>Step
{activeStepCount + 1}</h3>
<Box sx={{ display: 'flex', flexDirection: 'row',
pt: 2 }}>
<Button
color="primary"
disabled={activeStepCount === 0}
onClick={handleStepBack}
sx={{ mr: 1 }}
>
Previous
</Button>
<Box sx={{ flex: '1 1 auto' }} />
{optionalStep(activeStepCount) && (
<Button color="primary"
onClick={handleStepSkip}
sx={{ mr: 1 }}>
Skip
</Button>
)}
<Button onClick={handleStepNext}>
{activeStepCount === steps.length - 1 ?
'Done' : 'Next'}
</Button>
</Box>
</div>
)}
</div>
</center>
);
}
export default App;
输出:
示例2： 下面的示例演示了 React MUI 垂直步骤器导航。
import * as React from "react";
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button';
import { Box } from "@mui/material";
const steps = ['Go to geeksforgeeks.org',
'Select Practice from navbar', 'Do the Problem of the Day'];
function App() {
const [activeStepCount, setActiveStepCount] = React.useState(0);
const [skip, setSkip] = React.useState(new Set());
const optionalStep = (step) => {
return step === 1;
};
const skipStep = (step) => {
return skip.has(step);
};
const handleStepNext = () => {
let newSkipped = skip;
if (skipStep(activeStepCount)) {
newSkipped = new Set(newSkipped.values());
newSkipped.delete(activeStepCount);
}
setActiveStepCount((prevActiveStep) => prevActiveStep + 1);
setSkip(newSkipped);
};
const handleStepBack = () => {
setActiveStepCount((prevActiveStep) => prevActiveStep - 1);
};
const handleStepSkip = () => {
setActiveStepCount((prevActiveStep) => prevActiveStep + 1);
setSkip((prevSkipped) => {
const newSkipped = new Set(prevSkipped.values());
newSkipped.add(activeStepCount);
return newSkipped;
});
};
const handleStepReset = () => {
setActiveStepCount(0);
};
return (
<center>
<div>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h2>React MUI Stepper navigation</h2>
</div>
<div style={{ width: "50%" }}>
<Stepper activeStep={activeStepCount}
orientation="vertical">
{steps.map((label, index) => {
const stepProps = {};
const labelProps = {};
if (optionalStep(index)) {
labelProps.optional = (
<h3 variant="body1">Optional</h3>
);
}
if (skipStep(index)) {
stepProps.completed = false;
}
return (
<Step key={label} {...stepProps}>
<StepLabel {...labelProps}>{label}</StepLabel>
</Step>
);
})}
</Stepper>
{activeStepCount === steps.length ? (
<div>
<h3 sx={{ mt: 4, mb: 2 }}>
All done!
</h3>
<Box sx={{ display: 'flex',
flexDirection: 'row', pt: 4 }}>
<Box sx={{ flex: '1 1 auto' }} />
<Button onClick={handleStepReset}>
Reset
</Button>
</Box>
</div>
) : (
<div>
<h3 sx={{ mt: 2, mb: 1 }}>Step
{activeStepCount + 1}</h3>
<Box sx={{ display: 'flex',
flexDirection: 'row', pt: 2 }}>
<Button
color="primary"
disabled={activeStepCount === 0}
onClick={handleStepBack}
sx={{ mr: 1 }}
>
Previous
</Button>
<Box sx={{ flex: '1 1 auto' }} />
{optionalStep(activeStepCount) && (
<Button color="primary"
onClick={handleStepSkip} sx={{ mr: 1 }}>
Skip
</Button>
)}
<Button onClick={handleStepNext}>
{activeStepCount === steps.length - 1
? 'Done' : 'Next'}
</Button>
</Box>
</div>
)}
</div>
</center>
);
}
export default App;
输出：
参考链接: https://mui.com/material-ui/react-stepper