I would like to have multiple pages inside a modal controller. For example there are multiple steps for adding an item in my app, so for adding an item I would like to open a modal controller which will have a page for each of the steps. Does anyone have an idea how I can accomplish this?
I would wonder if a modal is really a good fit for multiple pages inside it. I’m not sure how you could navigate within the modal. You might want to consider a modal with Cards inside it.
See this : http://calendee.com/use-cards-in-ionic-for-mobile-form-goodness/
I am using cards to show sections of a signup/onboarding process. That way, the whole thing is not displayed in one ugly mess. I control the cards so that only the parts they should have access to can be opened at a time. After the entire form is complete, they see a summary of their info and can press the final submit.
That’s an interesting approach. How do you handle animations for when a user selects a specific section?
I don’t think your approach would work for my situation.
I have a product/category search page and once a user selects either a product or a category they are presented with a form that has some fields already pre-filled. I could just keep it all on the same controller, but it would be a bit messy, plus I want to reuse the product/category search for other pages. Being able to have multiple pages inside a modal controller would be ideal, but it seams like it would be difficult to implement.
Right now I’ve implemented this section without the modal controller, the user is simply taken to a new page when they want to a add a new subscription.
I am open to any other suggestions.
could you explain how even the first step works? how did you make the card switch its content if one clicks ‘Save’ after entering first and last name? And what are the animations used?
In the spirit of making apps feel as native as possible, being able to navigate within a modal is actually used quite regularly by Apple’s iOS apps (calendar, reminders and settings). It’s definitely not easy to do with the way modals are currently being handled…but maybe it’s an avenue worth pursuing? Even if that means changing the way modals are initialised. Instead of being embedded in the current view, perhaps they do need to be considered their own page, to allow flexibility to do things like this.
6 Likes
I’ve found a nice workaround for this. see Ion-nav-bar invisible inside modal