Hello! I’m working on this app where I would like to change the Ionic mode at runtime. Particularly i would like to force md mode for routes under /pages/md/<any_subpath>/… and to let ionic decide automatically for the other routes.
Is it possible to do this?
Thanks
The configuration in Ionic (where the global application mode is determined) is not designed to be reactive, so this is not possible.
You can, however, explicitly set the mode for components in the views for these routes by using the mode property. Example:
<ion-button mode="md">I display in md mode, even on an iPhone!</ion-button>
1 Like
Hi, thanks for your answer. I know I can specify the mode for single button but this is not a good solution because I should specify it for all components.
I think that this feature should be implemented by Ionic. Maybe I can create a feature request on github. Do you think is very difficult to add?
An option I’m think right now is to store the desired mode into a global variable (even sessionstorage…) and force a reload of the app and read the value at that time.
Thanks
Are you referring to a feature where you can have some pages use ios mode and other pages use md mode? If so, I am not sure that feature would be a good fit for Ionic.
One of the main offerings of Ionic is that you can build your app and have it work across iOS and Android with a single code base. Having some pages only work on iOS while others only work on Android goes against that idea and can result in a fragmented code base.
Did a quick search, and it looks like Flutter behaves the same way:
You can use iOS components on Android, but to do this you either create a “Cupertino App” or use “Cupertino Components” (which is the same idea as what Ionic does)
This is an example of a bad UX/UI design. Your users will get frustrated and not use your app. Your app should be uniformed to one design.
Hi! I know what you are saying about the bad design practise but for some cases I think this can be a useful possibility.
In my case I have a Ionic project that is a nomal app, with the design dependent on the platform (ios and md, as default).
Because this is a very simple app, i have some routes for the admin user (visible to only one person) instead of having another project. Here I’m using material components and I created some custom css that fit good for ionic material design.
The app routes is something like this:
/user/page1,
/user/page2,
/user/page3,
/admin/page1,
/admin/page2
ecc…
Users can’t go to /admin pages, and vice versa, and also admin can’t log in from mobile app but only from a version deployed as web app.
This is a good fit for this app, but I would like to force the md design for all /admin pages, because I prefer the admin have always the same theme if he use a computer or mobile safari, etc…
I’m really aware It’s normally not a good practise, but I think that can be useful for some cases when developer know what are doing.
I think Ionic have the really unique capability to be for mobile and web apps.
Thanks