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
stepstore - If the current step is the last step, the steps component shows as fully complete.
Install the library
npm i --save-dev @beyonk/svelte-stepsSee the example directory for an example.
- Import the
Stepscomponent and thesetupfunction from the library. - Configure the
Stepscomponent by passing an array of step names and icons - Configure the
themeoption by setting an rgb colour value for thecompletetheme 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent