search

efstajas / svelte-stepper

🚶 A simple library for building delightfully animated stepped flows with Svelte.
https://svelte-stepper.jason-e.dev
141 stars 4 forks source link

It's necessary for the next button to be inside ? #9

Open zougari47 opened 7 months ago

zougari47 commented 7 months ago

When I try to place the next button outside the stepper, it doesn't work for me. The UI I have requires the next button to be positioned outside the steps.

efstajas commented 7 months ago

As-is, generally yeah, because the way the step controller functions is by dispatching events, which get consumed by the stepper. So the events need to originate from step components which are nested below the stepper.

However, there's probably a way to work around this. Without having thought about this a lot, I would try something like catching the step controller's events (you can find them here), and exporting a function from your step components that just re-emits any event you pass it, and then using this function to re-emit events within the scope of the stepper.

Another approach could be to use a svelte portal to "portal" the next / previous buttons from within the step components to elsewhere into the DOM.

efstajas commented 6 months ago

Closing for now, lmk if you run into any trouble with the suggestions 👍

lucabrini commented 2 months ago

I think this could be a pretty nice feature

lucabrini commented 2 months ago

However, there's probably a way to work around this. Without having thought about this a lot, I would try something like catching the step controller's events (you can find them here), and exporting a function from your step components that just re-emits any event you pass it, and then using this function to re-emit events within the scope of the stepper.

Can you please provide me an example? I'm kinda new to Svelte

efstajas commented 2 months ago

Re-opening this since I'm thinking exporting a stepController-like object from the Stepper, which could be used in addition or instead of the event-based API, would probably be relatively trivial and solve this need.

@lucabrini I think the easiest approach for now would be to use a "portal", like this one: https://github.com/romkor/svelte-portal

The steps would simply be:

  1. Create an empty div with an explicit ID like #nav-buttons somewhere on your page
  2. Within your step components, put the navigation buttons within a Portal component that points to the div ID from step 1

Disclaimer: I haven't tried it yet, but I can't see why it wouldn't work.

lucabrini commented 2 months ago

Re-opening this since I'm thinking exporting a stepController-like object from the Stepper, which could be used in addition or instead of the event-based API, would probably be relatively trivial and solve this need.

Cool!

@lucabrini I think the easiest approach for now would be to use a "portal", like this one: https://github.com/romkor/svelte-portal

Thank you so much, didn't know about portals :)