Svelte Steps component
pnpm i && pnpm dev
Demonstrates progress in a multi-step process in your application, such as a payment flow.
- Current step info is denoted by the
step
store - If the current step is the last step, the steps component shows as fully complete.
Install the library
npm i --save-dev @beyonk/svelte-steps
See the example
directory for an example.
- Import the
Steps
component and thesetup
function from the library. - Configure the
Steps
component by passing an array of step names and icons - Configure the
theme
option by setting an rgb colour value for thecomplete
theme variable - Set the current step by passing it's array index. Usually 0.
- Add the
<Steps>
component to your page, and pass it the theme, and the current attributes.
<Steps {theme} />
<script>
import { Steps, setup, current } from '@beyonk/svelte-steps'
import { UserIcon, CreditCardIcon, BriefcaseIcon } from 'svelte-feather-icons'
setup([
{ name: 'About You', icon: UserIcon },
{ id: 'payment', name: 'Payment', icon: CreditCardIcon }, // id is optional and will be autogenerated
{ name: 'Confirmation', icon: BriefcaseIcon }
])
const theme = [
{ name: 'complete', value: { r: 6, g: 160, b: 146 } }
]
</script>
The pages component is a mini steps component for pages where space is of the essence.
To go to a specific step, call to() passing the id of the desired step
<Steps {theme} />
<script>
import { to } from '@beyonk/svelte-steps'
to('second-step')
</script>
The $step
store gives you the ability to implement next and back buttons trivially:
<Steps {theme} />
<button on:click={() => to($step.next)}>Next Step</button>
<button on:click={() => to($step.previous)}>Previous Step</button>
<script>
import { to, step } from '@beyonk/svelte-steps'
</script>
To add a new step, pass it to the addStep
method:
after
is the id of the step which should sit previous to the new step.
id
is optional, and is the step id. It will be generated in the absence of passing an id
addStep(step, after, id)
<script>
import { addStep } from '@beyonk/svelte-steps'
import { StarIcon } from 'svelte-feather-icons'
addStep({ name: 'Thank You!', icon: StarIcon }, 'payment')
</script>
To add a new step at the current position, don't pass the position attribute.
addStep(step)
<script>
import { addStep } from '@beyonk/svelte-steps'
import { StarIcon } from 'svelte-feather-icons'
addStep({ name: 'New Step', icon: StarIcon })
</script>
To add a new step with an id, pass it as the third param
addStep(step, after, id)
<script>
import { addStep } from '@beyonk/svelte-steps'
import { StarIcon } from 'svelte-feather-icons'
addStep({ name: 'New Step', icon: StarIcon }, 'payment', 'foo123')
</script>
To add a new step, use the removeStep
function, passing the id of the step to remove
removeStep(id)
<script>
import { removeStep } from '@beyonk/svelte-steps'
removeStep(2)
</script>
To determine if a step exists, query it by id
Step exists? {hasStep('my-step-id')}
<script>
import { hasStep } from '@beyonk/svelte-steps'
</script>
The step state import is called step
and contains metadata about the steps:
Total Steps: {$step.total}
Current Index: {$step.index}
Current Step Name: {$step.name}
Current Step Id: {$step.id}
Is Last Step? {$step.isLast}
Is First Step? {$step.isFirst}
Next step id: {$step.next} (false if last step)
Previous step id: {$step.previous} (false if first step)
<script>
import { step } from '@beyonk/svelte-steps'
</script>
The step icons dispatch a step
event when clicked, and the event's details.step
contains the id and index of the step which was clicked.