svelte-step-wizard

Step wizard component for Svelte

Install

npm i svelte-step-wizard

Example

<script>
    import StepWizard from 'svelte-step-wizard'
    let current = 0
</script>

<button on:click={() => {
    current = 0
}}>
Return to step 0
</button>

<StepWizard setStep={current}>
    <StepWizard.Step num={0} let:nextStep let:getStep>
		<p>
			This is the first step.
		</p>
        <div>Step number: {getStep()} </div>
		<button on:click={nextStep}>
			Next Step	>
		</button>
	</StepWizard.Step>
    <StepWizard.Step num={1} let:previousStep let:nextStep let:getStep>
		<p>
			This is the Second step.
		</p>
        <div>Step number: {getStep()} </div>
		<button on:click={previousStep}>
			Go Back
		</button>
		<button on:click={nextStep}>
			Next Step	>
		</button>
	</StepWizard.Step>
	<StepWizard.Step num={2} let:previousStep let:getStep>
		<p>
			This is the Third step.
		</p>
        <div>Step number: {getStep()} </div>
		<button on:click={previousStep}>
			Go Back
		</button>
	</StepWizard.Step>
</StepWizard>