feat: Open Page in Modal-Style

[mariusbolik]

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

The Idea is to use a modal globally in the app. Currently a modal depends on a specific page, can't be lazy loaded and the same modal can't be used on another page without copying it.
So the idea is to add an option to make it possible to let a page appear as a modal.

Describe Preferred Solution

Maybe a parameter that can be passed to the NavController.

await this.navController.navigateForward('/foo', {
    showAsModal: true
});

Describe Alternatives

Alternative is to use the ModalController, but it has some disadvantages like mentioned before.

[liamdebeasi]

Thanks for the feature request. Can you please clarify your feature request? Are you just looking to have the page transition appear as if it were a modal?

Modals can be lazy loaded (https://ionicframework.com/docs/api/modal#lazy-loading), and modals can be used on other pages without copying it.

[mariusbolik]

Are you just looking to have the page transition appear as if it were a modal?

Exactly. The problem is that I often use big headers with background images in my app which doesn't work very well with the iOS transition.

A general approach to set the transition in NavController for specific pages would be also a great feature.This was also mentioned in the comments in an Issue opened by me a long time ago: #16829 (comment)

So maybe something like this:

await this.navController.navigateForward('/foo', {
    transition: 'ios' | 'android' | 'modal'
});

But for the modal transition it would be good if there where the familiar options like presentingElement and swipeToClose :)

Modals can be lazy loaded (https://ionicframework.com/docs/api/modal#lazy-loading), and modals can be used on other pages without copying it.

And what I meant here is that it's necessary to import the modal into every page module where you want to use it and put it into the entryComponents and the declarations array.
But a page can be opened just by it's path which is more practical.

So it would be great to let a page appear as if it were a model, or optionally the opportunity to choose between all possible transitions when navigating to a page :)

Best Regards
Marius

[liamdebeasi]

Thanks for the follow up. In that case, there is a feature coming in Ionic Framework 5.2.0 that you should be able to use. We are shipping a feature that lets you provide a custom animation on a per-page basis (#18209).

What this means is when you use routerLink, navController.navigateForward , or other related methods, you can also pass a custom transition.

I do not think it would be a good idea for Ionic Framework to add the feature you initially described, as it would conflate the concept of a page with a modal. However, using the new per-page animation feature in 5.2, you could still accomplish what you need.

You would do something like this:

const myCustomModalAnimation = (baseEl: HTMLElement) => {
  // do animation config in here
};
this.navController.navigateForward('/foo', { animation: myCustomModalAnimation });

If you wanted a particular style transition, you could start by copying our modal transitions.

iOS Transition: https://github.com/ionic-team/ionic/blob/master/core/src/components/modal/animations/ios.enter.ts

MD Transition: https://github.com/ionic-team/ionic/blob/master/core/src/components/modal/animations/md.enter.ts

You will likely need to adjust some of the animation as elements like .modal-wrapper do not exist on individual pages.

We also have docs on how to write custom animations, with special instructions on how to override Ionic component animations: https://ionicframework.com/docs/utilities/animations

Hope this helps!

[dpluna]

Hello there,

I'm trying to use the same approach that you described with navigateForward but using history.push from react-router. It seems that's not working 😞 because "push state" should be serializable and passing a function it's not allowed:

history.push('/myPath', { animation: iosEnterAnimation });

I'm also trying to use navigate (from NavContext) and I was not lucky. It does not accept a third parameter called animation or something like that:

From the typescript's specs:
navigate: (path: string, direction?: RouterDirection | 'none', ionRouteAction?: 'push' | 'replace' | 'pop') => void;

Is it properly implemented for the react implementation or is it just me that I don't know how to apply the animation per page? 🙏

Best regards,
David

[liamdebeasi]

history.push is just the web's standard history API, so providing an animation here will not work. Regarding React, we are working on significant updates to routing in React, so the per-page animation feature will be available when that ships (soon).

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.