Untitled
unknown
plain_text
3 years ago
1.4 kB
4
Indexable
import { Fragment } from 'react' export default function Stepper() { const [step, setStep] = useState(0); return ( <Fragment> <ul className="stepper" data-mdb-stepper="stepper" data-mdb-stepper-type="vertical" > <li className={step===0?`stepper-step stepper-active`:`stepper-step`}> <div className="stepper-head"> <span className="stepper-head-icon"> 1 </span> <span className="stepper-head-text"> CIARA </span> </div> </li> <li className={step===1?`stepper-step stepper-active`:`stepper-step`}> <div className="stepper-head"> <span className="stepper-head-icon"> 2 </span> <span className="stepper-head-text"> PSA </span> </div> </li> <li className={step===2?`stepper-step stepper-active`:`stepper-step`}> <div className="stepper-head"> <span className="stepper-head-icon"> 3 </span> <span className="stepper-head-text"> ARBAI </span> </div> </li> </ul> <div className="stepper-content"> {step === 0 && <Fragment>Contenido 1 stepper.</Fragment>} {step === 1 && <Fragment>Contenido 2 stepper.</Fragment>} {step === 2 && <Fragment>Contenido 3 stepper.</Fragment>} </div> </Fragment> ) }
Editor is loading...