xiaoxia
31 lines
864 B
TypeScript
31 lines
864 B
TypeScript
import React from "react"
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number
|
|
steps: string[]
|
|
}
|
|
|
|
/**
|
|
* 输入阶段顶部的步骤引导（数字步骤）
|
|
*/
|
|
const StepIndicator: React.FC<StepIndicatorProps> = ({ currentStep, steps }) => {
|
|
return (
|
|
<div className="xx-clonemodal-steps">
|
|
{steps.map((label, idx) => {
|
|
const isActive = idx <= currentStep
|
|
return (
|
|
<React.Fragment key={idx}>
|
|
{idx > 0 && <div className="xx-clonemodal-step-connector" />}
|
|
<div className={`xx-clonemodal-step${isActive ? " xx-clonemodal-step--active" : ""}`}>
|
|
<div className="xx-clonemodal-step-number">{idx + 1}</div>
|
|
<span className="xx-clonemodal-step-label">{label}</span>
|
|
</div>
|
|
</React.Fragment>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default StepIndicator
|