@beyonk/svelte-steps
v2.2.0
Published
<a href="https://beyonk.com"> <br /> <br /> <img src="https://user-images.githubusercontent.com/218949/144224348-1b3a20d5-d68e-4a7a-b6ac-6946f19f4a86.png" width="198" /> <br /> <br /> </a>
Downloads
301
Keywords
Readme
Svelte Steps
Svelte Steps component
Demo
pnpm i && pnpm dev
About
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.
Usage
Install the library
npm i --save-dev @beyonk/svelte-steps
Steps Component
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>
Pages Component
The pages component is a mini steps component for pages where space is of the essence.
API
Change Step
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>
Add a Step dynamically
After a specified position
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>
After the current position
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>
With a custom id
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>
Remove a Step dynamically
At a specified position
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>
Get Presence of Step
To determine if a step exists, query it by id
Step exists? {hasStep('my-step-id')}
<script>
import { hasStep } from '@beyonk/svelte-steps'
</script>
Step State
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>
Events
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.