Comments (6)
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.
from svelte-stepper.
Closing for now, lmk if you run into any trouble with the suggestions 👍
from svelte-stepper.
I think this could be a pretty nice feature
from svelte-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.
Can you please provide me an example? I'm kinda new to Svelte
from svelte-stepper.
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:
- Create an empty div with an explicit ID like #nav-buttons somewhere on your page
- 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.
from svelte-stepper.
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 :)
from svelte-stepper.
Related Issues (8)
- Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map') HOT 4
- Overflowing component when using Tailwind, Bootstrap, or other CSS frameworks that use .container
- RTL support? HOT 1
- `Cannot find module 'esm-env'` HOT 2
- Feature Requests HOT 1
- Question: At the component level, where is `props`? HOT 3
- Programmatically change step HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte-stepper.