英文:
Materiel ui LinearProgress bar steps
问题
如何将进度条分成更多的步骤以获得类似的效果？
我尝试了这段代码，但找不到拆分选项：
<LinearProgressvariant="determinate"classes={{ root: "progressBar", bar: "progressBar-bar" }}value={(100 / stepsNumber) * stepNumber}valueBuffer={40}/>
是否有一些选项可以添加？
英文:
how to split a progress bar to more steps to get something like that?
I try this code but I can't find the option of splitting
<LinearProgressvariant="determinate"classes={{ root: "progressBar", bar: "progressBar-bar" }}value={(100 / stepsNumber) * stepNumber}valueBuffer={40}/>
Is there some options to add ?
答案1
得分: 0
由于您提到了“steps”，我建议使用Stepper组件来实现这种功能。
以下是一个包含基本版本的代码，您需要获取您要查找的组件。
// 处理步骤状态const [stepNumber, setStepNumber] = useState(1);const stepsNumber = 6;// 创建步骤数组 [0,1,2,...]const steps = Array.from({ length: stepsNumber }, (_, i) => i);// ...<StepperactiveStep={stepNumber}connector={null}style={{display: "flex",justifyContent: "center",width: "100%",maxWidth: 300,}}>{steps.map((label) => (<Stepkey={label}style={{background: label < stepNumber ? "black" : "grey",height: 12,flex: 1,borderRadius: 12,}}/>))}</Stepper>
英文:
Since you mention steps, I would recommend using the Stepper component for this kind of feature.
The following code has a basic version you'll need to get component you're looking for.
// handle the step stateconst [stepNumber, setStepNumber] = useState(1);const stepsNumber = 6;// create array of steps [0,1,2,...]const steps = Array.from({ length: stepsNumber }, (_, i) => i);// ...<StepperactiveStep={stepNumber}connector={null}style={{display: "flex",justifyContent: "center",width: "100%",maxWidth: 300,}}>{steps.map((label) => (<Stepkey={label}style={{background: label < stepNumber ? "black" : "grey",height: 12,flex: 1,borderRadius: 12,}}/>))}</Stepper>
I've made a codesandbox here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论