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

[zougari47]

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]

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]

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

[lucabrini]

I think this could be a pretty nice feature

[lucabrini]

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]

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]

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 :)