New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Is there any way to implement a step label? #25

Open

Isaacmeedinaa opened this issue Mar 30, 2021 · 1 comment

Isaacmeedinaa commented Mar 30, 2021

No description provided.

Ivan-Corporation commented Nov 14, 2022

Simplest way it's just create styles with negative percentages like this:

<Step transition="scale"> 
        {({ accomplished, index }) => (
	  <div>
		<div className={`transitionStep ${accomplished ? "accomplished" : null}`}>
		   🌒
		</div>
           // HERE OUR LABEL
	   <div className='checkpoints-number'>3</div>
        </div>
	)}
</Step>

And then add your custom styles:

.checkpoints-number {
	margin-bottom: -100%;
	padding-top: 15%;
	padding-left: 23%;
	font-weight: 500;
	font-size: 24px;
	color: #FFFFFF;
}

Result would be smth like this:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment