如何使用进度条 Material-ui 执行 Stepper
How to do an Stepper with progress bars Material-ui
我正在开发步进器,我想在每个步骤之间添加一个进度条。我正在使用 Material-ui Stepper 连接器来实现此目的。但相同的连接器适用于所有步骤。这不是真正的问题,因为我可以使用 jss 来完成。
bar: { transform: "translateX(-101%) !important" } // This rule can control progress bars
这里真正的问题是我不知道如何使用 jss 将规则添加到其中一个栏中。
如果有更好的方法来添加进度条,那太好了。我只是分享我的内容,以便为您提供更多背景信息。
这是我的:
代码:https://codesandbox.io/s/determined-diffie-636ss?file=/src/App.js
Material-ui 步进器组件没有根据我的需要进行调整,它正在成为一个障碍。所以我创建了自己的 Stepper 组件。
我做了 quick 研究并发现了这个 Simple Stepper by Vicente Lyrio and made my custom component from that code. Here's my result: Stepper with progress bars by Jhonatan Zuluaga 您可以根据需要添加任意数量的步骤并且它会起作用。这是组件:
function CustomStepper(props) {
const { steps, current, progress, classes } = props;
function StepContent({ done, index }) {
return done ? "✓" : index + 1;
}
const ProgressBar = ({ current, step, progress }) => {
let value = 0;
if(current+1 === step) {
value = progress
} else if(current >= step) {
value = 100
}
return <LinearProgress variant="determinate" value={value} classes={{root: classes.linearProgress, bar: classes.bar}} />
}
function renderStep(label, key) {
const { current, progress } = this;
const done = key < current;
const currentStep = key === current;
const stepClasses = classNames({
[classes.stepper__step__index]: true,
[classes.currentStep]: currentStep,
[classes.done]: done
});
return (
<li className={classes.stepper__step} key={key}>
<div className={classes.labelContainer}>
<span className={stepClasses}>
<StepContent done={done} index={key} />
</span>
<p className={classes.stepper__step__label}>{label}</p>
</div>
{!!key && <ProgressBar current={current} step={key} progress={progress} />}
</li>
)
}
return (
<ul className={classes.stepper}>
{steps.map(renderStep, { current, progress })}
</ul>
)
}
我正在开发步进器,我想在每个步骤之间添加一个进度条。我正在使用 Material-ui Stepper 连接器来实现此目的。但相同的连接器适用于所有步骤。这不是真正的问题,因为我可以使用 jss 来完成。
bar: { transform: "translateX(-101%) !important" } // This rule can control progress bars
这里真正的问题是我不知道如何使用 jss 将规则添加到其中一个栏中。
如果有更好的方法来添加进度条,那太好了。我只是分享我的内容,以便为您提供更多背景信息。
这是我的:
代码:https://codesandbox.io/s/determined-diffie-636ss?file=/src/App.js
Material-ui 步进器组件没有根据我的需要进行调整,它正在成为一个障碍。所以我创建了自己的 Stepper 组件。
我做了 quick 研究并发现了这个 Simple Stepper by Vicente Lyrio and made my custom component from that code. Here's my result: Stepper with progress bars by Jhonatan Zuluaga 您可以根据需要添加任意数量的步骤并且它会起作用。这是组件:
function CustomStepper(props) {
const { steps, current, progress, classes } = props;
function StepContent({ done, index }) {
return done ? "✓" : index + 1;
}
const ProgressBar = ({ current, step, progress }) => {
let value = 0;
if(current+1 === step) {
value = progress
} else if(current >= step) {
value = 100
}
return <LinearProgress variant="determinate" value={value} classes={{root: classes.linearProgress, bar: classes.bar}} />
}
function renderStep(label, key) {
const { current, progress } = this;
const done = key < current;
const currentStep = key === current;
const stepClasses = classNames({
[classes.stepper__step__index]: true,
[classes.currentStep]: currentStep,
[classes.done]: done
});
return (
<li className={classes.stepper__step} key={key}>
<div className={classes.labelContainer}>
<span className={stepClasses}>
<StepContent done={done} index={key} />
</span>
<p className={classes.stepper__step__label}>{label}</p>
</div>
{!!key && <ProgressBar current={current} step={key} progress={progress} />}
</li>
)
}
return (
<ul className={classes.stepper}>
{steps.map(renderStep, { current, progress })}
</ul>
)
}