Stepper

Divide and present content in sequenced steps.

javascript 
import { Stepper, Step } from '@brainandbones/skeleton';

Examples

1

Step 1 - Get Started!

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

2

Step 2

🔒

Step 3

4

Step 4

5

Step 5

Usage

To begin, create a writable that will store your active step value. This should always be set to 0 (zero).

typescript 
import type { Writable } from "svelte/store";
typescript 
const active: Writable<number> = writable(0);

Scaffold your stepper as shown. If no header slot is provided then the component will add "Step X" text automatically.

html 
<Stepper {active} length={5} on:complete={onComplete}>
	<Step index={0}>
		<svelte:fragment slot="header">(header)</svelte:fragment>
		(content)
	</Step>
	<Step index={1} locked={true}>(content)</Step>
</Stepper>

Create a function to handle your Stepper's on:complete event.

typescript 
const onComplete: any = () => { /* handle the event */ }

Properties

Stepper

Prop Type Default Required Description
activeWritablewritable(0)✓Provide a writable which stores the actively selected step state.
lengthnumber0✓Provide a count of the total number of Steps (children).
durationnumber200-Set the Svelte transition duration.
colorstringtext-white-Provide classes to set the numeral text color.
backgroundstringbg-accent-500 text-white-Provide classes to set the timeline background color.
Prop Type Default Description
buttonBackstringbtn-ghostProvide Button element classes.
buttonNextstringbtn-filledProvide Button element classes.
buttonCompletestringbtn-filled-primaryProvide Button element classes.

Step

Prop Type Default Required Description
indexnumber-✓Indicates the step index value. Should start with 0 (zero)
lockedbooleanfalse-When enabled, a lock icon appears and the Next button is disabled. This prevents progress.

Slots

Stepper

Name Description
defaultAccepts a set of steps to display.

Step

Name Description
defaultProvide the content for the step.
headerOverride the auto-generated heading with your own value. Typically a step title.

Events

Stepper

Prop Description
completeTriggers when the final step's Complete button is pressed.