英文:
Materiel ui LinearProgress bar steps
问题
如何将进度条分成更多的步骤以获得类似的效果？
我尝试了这段代码，但找不到拆分选项：
<LinearProgress
variant="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
<LinearProgress
variant="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);
// ...
<Stepper
activeStep={stepNumber}
connector={null}
style={{
display: "flex",
justifyContent: "center",
width: "100%",
maxWidth: 300,
}}
>
{steps.map((label) => (
<Step
key={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 state
const [stepNumber, setStepNumber] = useState(1);
const stepsNumber = 6;
// create array of steps [0,1,2,...]
const steps = Array.from({ length: stepsNumber }, (_, i) => i);
// ...
<Stepper
activeStep={stepNumber}
connector={null}
style={{
display: "flex",
justifyContent: "center",
width: "100%",
maxWidth: 300,
}}
>
{steps.map((label) => (
<Step
key={label}
style={{
background: label < stepNumber ? "black" : "grey",
height: 12,
flex: 1,
borderRadius: 12,
}}
/>
))}
</Stepper>
I've made a codesandbox here
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论