要保持前一步骤打开的垂直步进器,你可以使用Material-UI的Stepper
和Step
组件结合使用。
下面是一个使用React.js和Material-UI的代码示例:
import React, { useState } from 'react';
import { Stepper, Step, StepLabel, StepContent, Button } from '@material-ui/core';
const steps = ['步骤1', '步骤2', '步骤3'];
const VerticalStepper = () => {
const [activeStep, setActiveStep] = useState(0);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
return (
{steps.map((label, index) => (
{label}
))}
);
};
export default VerticalStepper;
在上面的示例中,我们使用useState
钩子来跟踪当前活动的步骤。handleNext
函数在点击下一步按钮时将活动步骤增加1,handleBack
函数在点击上一步按钮时将活动步骤减少1。
通过Stepper
组件的activeStep
属性,我们可以将当前活动的步骤传递给垂直步进器。在Step
组件中,我们可以根据activeStep
来控制步进器的显示和隐藏。
每个步骤中的内容可以自定义,上面的示例中我们使用了StepLabel
显示步骤的标签,并在StepContent
中放置了上一步和下一步按钮。
你可以将VerticalStepper
组件放入你的应用程序中,并根据需要自定义步骤标签和内容。