Svelte Component

Steppers

Divide and present content in sequenced steps.

typescript 
import { Stepper, Step } from '@skeletonlabs/skeleton';
Source Page Source
Get Started!

This example Stepper will teach you how to use this component. Tap next to proceed to the next step.

Create a set of Steps within the Stepper, then use the on:complete event to detect when all steps are complete. Since horizontal space may be limited on small screens, we recommend no more than five steps at max.

typescript 
function onCompleteHandler(e: Event): void { console.log('event:complete', e); }
typescript 
<Stepper on:complete={onCompleteHandler}>
	<Step>(content)</Step>
	<Step>(content)</Step>
	<!-- ... -->
</Stepper>

Next and Previous

Events are fired when the next or previous steps are pressed.

html 
<Stepper on:next={onNextHandler} on:back={onBackHandler}>...</Stepper>

Step Slots

Each Step component supports a header and default (read: content) slot region.

html 
<Step>
	<svelte:fragment slot="header">(header)</svelte:fragment>
	(content)
</Step>

Locked State

Each Step can have a locked property set, when set to TRUE this locks progression for that step. For example, you can lock a step until a form within it becomes valid.

typescript 
let lockedState: boolean = true;
html 
<Step locked={lockedState}>...</Step>